Three.js 入门教程：手把手教你打造你的第一个 3D 网页动画

简单一句话来说：2D平面展示不了真实性，3D能大大吸引用户浏览！！

Three.js，作为一款开源的 3D 图形库，正是实现这些效果的绝佳工具。无论你是前端开发者、设计师，还是对 3D 动画感兴趣的初学者，这篇文章都将带你快速入门 Three.js，打造属于你的第一个 3D 网页动画。

一、什么是 Three.js？

二、开始之前：准备工作

安装 Three.js

三、创建你的第一个 3D 场景

1. 创建 HTML 文件

2. 编写 JavaScript 代码

3. 运行代码

四、理解 Three.js 的核心概念

五、扩展你的 3D 场景

添加灯光

添加更多动画

六、总结

一、什么是 Three.js？

Three.js 是一个基于 WebGL 的 JavaScript 库，它简化了在网页上创建和渲染 3D 图形的过程。WebGL 是一种低级的 3D 图形 API，可以直接与 GPU 交互，但它的学习曲线较为陡峭。Three.js 的出现，正是为了降低入门门槛，让开发者能够更轻松地创建 3D 内容。

通过 Three.js，你可以快速构建 3D 场景、添加物体、设置灯光，并实现各种动画效果。它广泛应用于游戏开发、数据可视化、交互式网页设计等领域。

二、开始之前：准备工作

在开始之前，请确保你已经具备以下基础：

HTML 和 CSS：熟悉基本的网页布局和样式。
JavaScript：了解基本的 JavaScript 语法和 DOM 操作。
Node.js（可选）：如果你希望运行本地服务器来测试代码，可以安装 Node.js。

安装 Three.js

你可以通过以下几种方式引入 Three.js：

直接使用 CDN：在 HTML 文件中通过 <script> 标签引入 Three.js。

HTML复制
```
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
```
通过 npm 安装：如果你使用的是现代前端开发工具链（如 Webpack 或 Vite），可以通过 npm 安装 Three.js。

bash
```
npm install three
```
然后在你的项目中引入它：

JavaScript
```
import * as THREE from 'three';
```

三、创建你的第一个 3D 场景

让我们从一个简单的例子开始：创建一个旋转的立方体。

1. 创建 HTML 文件

首先，创建一个基本的 HTML 文件，用于加载 Three.js 和设置一个画布容器。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 入门教程</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. 编写 JavaScript 代码

在与 HTML 文件同级的目录下创建一个 script.js 文件，并添加以下代码：

JavaScript

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个相机
const camera = new THREE.PerspectiveCamera(
    75,            // 视野角度
    window.innerWidth / window.innerHeight, // 宽高比
    0.1,           // 近裁剪面
    1000           // 远裁剪面
);
camera.position.z = 5; // 将相机向后移动，以便看到场景

// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个立方体几何体
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();

3. 运行代码

将上述 HTML 和 JavaScript 文件保存到本地，然后直接用浏览器打开 HTML 文件。你会看到一个绿色的立方体在屏幕上旋转。

四、理解 Three.js 的核心概念

在上述代码中，我们涉及到了 Three.js 的三个核心概念：场景（Scene）、相机（Camera） 和 渲染器（Renderer）。

场景（Scene）：场景是 3D 世界的基础，所有对象（如几何体、灯光等）都必须添加到场景中。
相机（Camera）：相机决定了我们从哪个角度观察场景。在 Three.js 中，最常用的相机类型是透视相机（PerspectiveCamera）。
渲染器（Renderer）：渲染器负责将场景和相机的内容绘制到屏幕上。Three.js 默认使用 WebGL 渲染器。

五、扩展你的 3D 场景

现在你已经创建了一个基本的 3D 场景，接下来可以尝试添加更多元素，比如灯光和动画。

添加灯光

在 Three.js 中，灯光是必不可少的，因为它可以增强场景的真实感。以下是添加一个环境光和一个点光源的代码：

JavaScript

// 添加环境光
const ambientLight = new THREE.AmbientLight(0x404040); // 环境光颜色
scene.add(ambientLight);

// 添加点光源
const pointLight = new THREE.PointLight(0xffffff, 1, 100); // 白色光源，强度为1，范围为100
pointLight.position.set(10, 10, 10); // 设置光源位置
scene.add(pointLight);

添加更多动画

你可以通过修改 animate 函数来实现更多复杂的动画效果。例如，让立方体沿着一个路径移动：

JavaScrip

let time = 0;

function animate() {
    requestAnimationFrame(animate);

    // 让立方体沿着一个圆形路径移动
    cube.position.x = Math.sin(time) * 3;
    cube.position.y = Math.cos(time) * 3;

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);

    time += 0.01;
}

六、总结

通过本文的介绍，你已经成功创建了一个简单的 3D 场景，并了解了 Three.js 的基本概念。Three.js 是一个功能强大的工具，它可以帮助你实现各种复杂的 3D 效果。无论是简单的动画，还是复杂的 3D 游戏，Three.js 都能为你提供强大的支持。

如果你对 Three.js 感兴趣，可以继续探索更多高级功能，比如纹理映射、阴影效果、模型加载等。Three.js 的官方文档和社区资源也非常丰富，可以帮助你进一步提升技能。

希望这篇文章能激发你对 3D 网页动画的兴趣！如果你有任何问题或建议，欢迎在评论区留言。

🔍three.js官方中文文档
🔍Three.js中文网