使用 Three.js 实现 3D 网页动画

随着网页技术的发展，3D 图形变得越来越常见。Three.js 是一个基于 WebGL 的 JavaScript 库，它简化了 3D 图形的创建过程，使得开发者能够轻松地在网页上实现复杂的 3D 效果。本文将引导您通过简单的步骤，使用 Three.js 创建一个基本的 3D 场景，并实现一个物体的旋转动画。

1. 引言

Three.js 提供了一套简洁的 API，可以帮助我们快速构建 3D 场景。无论是游戏开发、数据可视化还是教育领域，Three.js 都能发挥重要作用。接下来，我们将一起探索如何使用 Three.js 创建一个简单的 3D 场景，并实现物体的旋转动画。

2. Three.js 快速入门

2.1 安装与配置

首先，我们需要在项目中引入 Three.js。可以通过 npm 或直接在 HTML 文件中引用 CDN 版本。这里假设我们使用的是 CDN 方式。

1<script src="https://cdn.jsdelivr.net/npm/three@0.135.0/build/three.min.js"></script>

2.2 创建第一个 3D 场景

在 Three.js 中，创建 3D 场景非常简单。只需要创建一个场景对象、一个渲染器以及一个相机即可。

1// 创建 3D 场景
2const scene = new THREE.Scene();
3
4// 创建 WebGL 渲染器
5const renderer = new THREE.WebGLRenderer({ antialias: true });
6renderer.setClearColor(0xffffff, 1); // 背景颜色
7renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小
8document.body.appendChild(renderer.domElement); // 添加渲染器 DOM 元素到页面
9
10// 创建透视相机
11const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
12camera.position.z = 500;

3. 添加 3D 对象

3.1 几何体

几何体定义了 3D 对象的形状。Three.js 提供了许多内置的几何体，如球体、立方体等。

1// 创建一个长方体几何体
2const geometry = new THREE.BoxGeometry(100, 100, 100);

3.2 材质

材质定义了 3D 对象的外观。Three.js 提供了多种材质类型，例如 MeshBasicMaterial 和 MeshStandardMaterial。

1// 创建一个基本材质
2const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

3.3 网格模型

网格模型结合了几何体和材质，是最终呈现在场景中的 3D 对象。

1// 创建网格模型
2const mesh = new THREE.Mesh(geometry, material);
3mesh.position.set(0, 10, 0); // 设置位置
4scene.add(mesh); // 添加到场景

4. 动画循环

为了实现动画，我们需要使用 requestAnimationFrame 方法来持续更新场景并重新渲染。

1function render() {
2    requestAnimationFrame(render);
3    renderer.render(scene, camera);
4}
5
6render();

5. 3D 物体旋转动画

为了让网格模型旋转，我们需要在每一帧更新它的旋转角度。

5.1 基本原理

通过不断更新网格模型的旋转属性，我们可以实现物体的旋转。

5.2 示例代码

1let rotationAngle = 0;
2
3function render() {
4    requestAnimationFrame(render);
5    rotationAngle += 0.01;
6    mesh.rotation.y = rotationAngle;
7    renderer.render(scene, camera);
8}
9
10render();

6. 结语

通过上述步骤，您已经成功地使用 Three.js 创建了一个简单的 3D 场景，并实现了物体的旋转动画。