技术文摘
Unpkg 引入 Three.js 及简单验证的方法
Unpkg 引入 Three.js 及简单验证的方法
在网页开发中，Three.js 为创建 3D 场景和动画提供了强大的功能。而 Unpkg 则是一个方便的资源获取平台，它能帮助我们快速引入 Three.js 库。下面就详细介绍如何通过 Unpkg 引入 Three.js 并进行简单验证。
我们要明确 Unpkg 的作用。Unpkg 是一个基于 npm 的免费 CDN 服务，它能让我们直接在 HTML 文件中引用 npm 上的包。这意味着我们无需手动下载 Three.js 的文件，就能在项目中使用它。
接下来是引入 Three.js 的步骤。在 HTML 文件的 <head> 标签内，添加一个 <script> 标签，其 src 属性指向 Unpkg 上 Three.js 的链接。例如：<script src="https://unpkg.com/three/build/three.min.js"></script>。这个链接会从 Unpkg 服务器获取最新版本的 Three.js 库，并将其加载到我们的项目中。
引入完成后，我们可以进行简单的验证来确保 Three.js 正常工作。在 HTML 文件的 <body> 标签内，添加一个 <canvas> 元素，这将作为 Three.js 渲染 3D 场景的容器。例如：<canvas id="myCanvas"></canvas>。
然后，在 JavaScript 文件中，获取这个 <canvas> 元素，并初始化 Three.js 的渲染器、场景和相机。代码如下：
// 获取 canvas 元素
const canvas = document.getElementById('myCanvas');
// 创建渲染器
const renderer = new THREE.WebGLRenderer({ canvas });
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建一个简单的物体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 渲染场景
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
这段代码创建了一个简单的 3D 场景，包含一个绿色的立方体，并让它不断旋转。如果在浏览器中打开 HTML 文件，能看到一个旋转的立方体，那就说明我们成功通过 Unpkg 引入了 Three.js 并使其正常工作。
通过以上步骤，我们利用 Unpkg 轻松引入了 Three.js 并完成了简单验证，为后续创建更复杂的 3D 项目奠定了基础。