Three.js 金字塔教程：创建你的第一个 3D 金字塔

用 Three.js 在网页上构建栩栩如生的 3D 世界

了解 Three.js

Three.js 是一个强大的 JavaScript 库，可为网页注入 3D 图形的魅力。它利用 WebGL 的加速功能，在大多数现代浏览器中呈现令人惊叹的视觉效果。Three.js 是构建交互式 3D 场景的理想选择，例如游戏、可视化和虚拟现实体验。

安装 Three.js

踏入 Three.js 世界的第一步是安装它。前往官方网站下载最新版本，或通过 npm 安装：

npm install three

创建场景和相机

场景是容纳所有 3D 对象的虚拟空间。相机充当我们的眼睛，让我们探索场景。创建它们轻而易举：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

创建金字塔几何体

金字塔，由三角形组成，是 3D 世界中的经典形状。Three.js 提供了 THREE.PyramidGeometry 类来创建金字塔几何体。只需指定其底边长度、高度和更多参数：

const geometry = new THREE.PyramidGeometry(1, 2, 4);

创建金字塔材质

材质定义了金字塔的外观。Three.js 提供了各种材质，例如 THREE.MeshBasicMaterial 和 THREE.MeshLambertMaterial。您可以自定义颜色、透明度等属性：

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

创建金字塔网格对象

网格对象将几何体和材质融合在一起，形成可渲染的 3D 对象。使用 THREE.Mesh 类来创建金字塔网格对象：

const mesh = new THREE.Mesh(geometry, material);

将金字塔网格对象添加到场景中

为了让金字塔可见，我们必须将它添加到场景中：

scene.add(mesh);

渲染场景

现在，是时候让金字塔栩栩如生了。创建一个渲染器，将场景和相机作为参数，并将结果渲染到 HTML 元素中：

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

循环渲染

为了让金字塔旋转，我们需要创建一个渲染循环。requestAnimationFrame 函数在这里派上用场，不断渲染场景，让金字塔动起来：

function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

常见问题解答

1. 如何更改金字塔的颜色？

只需修改材质的颜色属性，例如：material.color.set(0x00ff00);。

2. 如何调整金字塔的尺寸？

通过修改几何体的参数来调整尺寸，例如：geometry.width = 2;。

3. 如何添加纹理到金字塔？

创建 THREE.TextureLoader 实例并加载图像。然后，将纹理应用于材质，例如：material.map = texture;。

4. 如何控制金字塔的旋转速度？

更改 animate 函数中的旋转增量，例如：mesh.rotation.y += 0.02;。

5. 如何在场景中添加多个对象？

只需重复创建几何体、材质和网格对象的步骤，然后将每个网格对象添加到场景中。