简介
Three.js 是一个开源的 JavaScript 3D 库，它可以在浏览器中创建高性能的 WebGL 渲染器，并提供了丰富的 3D 几何体、材质、光源、摄像机等组件，方便开发者快速构建具有交互性的 3D 前端应用。本文将总结 Three.js 的一些技巧和实践经验，帮助读者更好地学习和使用该库。
创建场景
在开始之前，我们需要先创建一个场景。使用 Three.js 创建场景的代码如下：
-- -------------------- ---- ------- -- ------ ------ -- ----- ------ - ---------------------------------- -- ---------- ----- -------- - --- --------------------- ------ --- ----------------------------------- -------------------- -- ---- ----- ------ - --- ------------------------ --- -- ---- ----------------- - ------------------- -- --- ---- -- --- ---- -- --- -- -- ---- ----- ----- - --- --------------展开代码
上面的代码中，我们首先获取页面中的 canvas 元素，然后创建了一个渲染器，设置了场景大小为浏览器窗口大小。接着，我们创建了一个透视相机（PerspectiveCamera），并设置了其视场角度、宽高比、近截面和远截面。最后，我们创建了一个场景（Scene）。
添加 3D 对象
下面我们来添加一些 3D 对象到场景中。使用 Three.js 创建 3D 对象的代码如下：
// 创建一个立方体 const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); const cube = new THREE.Mesh(geometry, material); // 将立方体添加到场景中 scene.add(cube);
上面的代码中，我们首先创建了一个立方体（BoxGeometry），并设置其宽度、高度、深度为 1。然后，我们创建了一个基础网格材质（MeshBasicMaterial），并设置其颜色为红色。接着，我们通过将几何体和材质传递给网格对象（Mesh）来创建一个立方体网格，并将其添加到场景中。
使用光源
如果只是在场景中添加 3D 对象，它们将没有任何阴影和高光等效果，因此需要添加光源。使用 Three.js 创建光源的代码如下：
// 创建一个点光源 const light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(0, 0, 10); // 将光源添加到场景中 scene.add(light);
上面的代码中，我们创建了一个点光源（PointLight），并设置其颜色、强度和距离。然后，我们将光源的位置设置在场景中心略偏上方。
渲染场景
最后，我们需要渲染场景并显示到页面中。使用 Three.js 渲染场景的代码如下：
-- -------------------- ---- ------- -------- --------- - ------------------------------- -- -------- --------------- -- ----- --------------- -- ----- ---------------------- -------- - ----------展开代码
上面的代码中，我们通过 requestAnimationFrame 方法不断刷新场景，使立方体随时间旋转。然后，我们使用渲染器的 render 方法将场景和相机渲染到 canvas 中。
总结
通过本文的介绍，我们了解了如何使用 Three.js 创建场景、添加 3D 对象、使用光源和渲
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/58424
