链接：最佳课程 - Three.js Journey - The ultimate Three.js course
✨ 前言
随着 Web 技术的发展，浏览器已不再局限于展示文字和图片，而是逐步成为一个可以呈现复杂 3D 场景的平台。Three.js 作为最流行的 WebGL 封装库，极大地降低了 Web 3D 开发的门槛。
本文将带你从零搭建一个 Three.js 项目，逐步掌握场景、相机、光照、模型加载等核心功能，最终实现可交互的 3D 效果展示。
📦 什么是Three.js？
Three.js 是一个基于 WebGL 封装的 JavaScript 3D 库。它通过更易于理解的 API 隐藏了底层复杂的 OpenGL 操作，让开发者可以快速创建 3D 图形应用，广泛用于可视化、游戏、产品展示、3D 编辑器等场景。
优势：
- 提供丰富的几何体和材质封装
- 支持物理光照、阴影、后处理特效
- 支持模型加载、粒子系统、动画骨骼
- 拥有完善的生态与官方示例
🧰 环境搭建与项目初始化
在开始编码前，我们先搭建基本开发环境。
步骤 1：初始化项目
bash
mkdir threejs-demo
cd threejs-demo
npm init -y
npm install three步骤 2：创建HTML模板
html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Three.js Demo</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>🧱 第一个3D 场景：旋转的立方体
我们从一个最基础的 3D 对象 ------ 旋转立方体开始，建立场景、相机、渲染器，并通过动画循环进行动态渲染。
main.js示例代码：
js
// main.js
import * as THREE from 'three';
// 1. 创建场景
const scene = new THREE.Scene();
// 2. 创建透视相机
const camera = new THREE.PerspectiveCamera(
75, window.innerWidth / window.innerHeight, 0.1, 1000
);
camera.position.z = 5;
// 3. 创建 WebGL 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 4. 创建几何体和材质
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 5. 动画循环
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();🧠 Three.js 核心概念解析
| 概念 | 说明 |
|---|---|
| Scene（场景） | 所有可见对象的容器，相当于舞台 |
| Camera（相机） | 视角设置，决定用户看到的画面。常用：PerspectiveCamera |
| Renderer（渲染器） | 将场景画面渲染到 Canvas 上 |
| Geometry（几何体） | 定义物体的形状，如 Box、Sphere |
| Material（材质） | 物体外观，例如颜色、纹理、透明度 |
| Mesh（网格） | 几何体与材质的组合，才是最终渲染的对象 |
🌈 进阶功能展示
💡 添加光照效果
js
// 添加环境光（整体亮度）
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// 添加点光源（模拟灯泡）
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);⚠️ 注意：部分材质（如 MeshBasicMaterial）不受光照影响，需替换为如
MeshStandardMaterial才能看到光照变化。
📦 加载3D模型（GLTF 格式）
js
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load(
'/model.gltf',
(gltf) => scene.add(gltf.scene),
undefined,
(error) => console.error('模型加载失败：', error)
);🖱️ 添加用户交互控制器
js
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;🧠 性能优化建议（大型项目必看）
| 技术 | 说明 |
|---|---|
BufferGeometry |
更高效的几何体结构，替代旧的 Geometry |
| 合并网格 | 使用 mergeBufferGeometries() 减少 draw call |
| 使用 LOD | 根据距离切换模型精度（Level of Detail） |
| 启用视锥体裁剪 | Three.js 默认开启，可提升性能 |
| 管理资源释放 | .dispose() 可手动释放内存资源，避免内存泄漏 |
💼 实战案例分享
✅ 案例 1：3D 产品展示
js
const loader = new GLTFLoader();
loader.load('product.gltf', (gltf) => {
const product = gltf.scene;
scene.add(product);
const ambient = new THREE.AmbientLight(0xffffff, 0.5);
const point = new THREE.PointLight(0xffffff, 1);
point.position.set(10, 10, 10);
scene.add(ambient, point);
});✅ 案例 2：3D 数据可视化（柱状图）
js
function createBarChart(data) {
data.forEach((val, i) => {
const h = val * 0.1;
const geometry = new THREE.BoxGeometry(0.5, h, 0.5);
const material = new THREE.MeshStandardMaterial({ color: 0x3498db });
const bar = new THREE.Mesh(geometry, material);
bar.position.x = i - data.length / 2;
bar.position.y = h / 2;
scene.add(bar);
});
}📚 总结
Three.js 为 Web 开发者打开了 3D 世界的大门。本教程从环境搭建、核心概念、光照模型、模型加载、交互控制到性能优化，为你搭建了完整的知识体系。
🧩 如果你想继续深入，推荐：
- 学习物理材质与光照原理（PBR）
- 研究动画系统（骨骼动画、关键帧）
- 实现粒子系统与后期特效
- 尝试与 React、Vue 等框架集成（如 React Three Fiber）