Three.js入门指南：从零构建你的第一个3D场景

1. Three.js初识：为什么选择这个3D引擎？

第一次接触Three.js时，我被它的简单易用震惊了。作为一个基于WebGL封装的JavaScript 3D库，它让在网页中创建3D内容变得像搭积木一样简单。你可能不知道，现在网上看到的很多酷炫3D效果，比如产品展示、游戏场景、数据可视化，背后都是Three.js在发挥作用。

Three.js最大的优势就是降低了3D开发的门槛。原生WebGL虽然强大，但学习曲线陡峭，光是写个三角形就要几十行代码。而用Three.js，创建一个旋转的立方体只需要不到20行代码。我在实际项目中对比过，同样的3D效果，用Three.js开发效率能提升5-10倍。

这个库由Ricardo Cabello（网名mrdoob）在2010年创建，现在已经发展成GitHub上最受欢迎的3D库之一，有超过11万星标。社区活跃度很高，基本上每几个月就会发布新版本，加入更多实用功能。我特别喜欢它的文档和示例系统，遇到问题翻翻文档，或者看看examples目录下的几百个示例，基本都能找到解决方案。

2. 环境准备：三分钟快速搭建开发环境

2.1 安装Three.js的三种方式

根据我的经验，初学者最容易卡在环境配置这一步。其实Three.js的安装非常灵活，这里分享三种最常用的方法：

第一种是通过npm安装，适合现代前端项目：

npm install three

安装后可以用ES6模块方式引入：

import * as THREE from 'three';

第二种是直接引入CDN链接，适合快速原型开发：

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

第三种是下载完整源码包，适合深入学习：

1. 访问GitHub发布页下载最新版本
2. 解压后找到build/three.js文件
3. 通过script标签引入本地文件

2.2 开发工具的选择

我强烈推荐使用VS Code配合Live Server插件。它的热重载功能可以实时预览3D效果，调试起来特别方便。另外，Chrome的开发者工具也是必备的，可以用它来查看WebGL调用和性能分析。

如果遇到奇怪的渲染问题，可以试试Three.js自带的编辑器。它位于源码包的editor目录下，打开index.html就能用。我经常用它来快速验证一些材质和光照效果。

3. 三大核心概念：场景、相机、渲染器

3.1 创建3D舞台：Scene对象

想象一下你要拍一部电影，首先需要搭建一个拍摄场地。在Three.js中，Scene就是这个虚拟的3D舞台。所有物体、灯光都要添加到Scene中才能被看到。

创建一个基础场景只需要一行代码：

const scene = new THREE.Scene(); scene.background = new THREE.Color(0x333333); // 设置背景色

我建议在开发初期就给场景添加坐标轴辅助，这样可以直观看到物体位置：

const axesHelper = new THREE.AxesHelper(100); // 参数表示轴线长度 scene.add(axesHelper);

3.2 虚拟摄像机：Camera的设置技巧

相机决定了观众能看到什么。Three.js主要提供两种相机：

• 透视相机（PerspectiveCamera）：模拟人眼视角，近大远小
• 正交相机（OrthographicCamera）：适合工程制图，没有透视变形

新手建议从透视相机开始：

const camera = new THREE.PerspectiveCamera( 75, // 视野角度(FOV) window.innerWidth / window.innerHeight, // 宽高比 0.1, // 近裁面 1000 // 远裁面 ); camera.position.set(5, 5, 5); // 设置相机位置 camera.lookAt(0, 0, 0); // 看向场景中心

这里有个实用技巧：把相机位置和lookAt目标点打印出来，调试时特别有用：

console.log('Camera position:', camera.position); console.log('Camera target:', camera.getWorldDirection());

3.3 渲染器：把3D变成2D图像

渲染器就像电影的放映机，负责把3D场景渲染到网页上。WebGLRenderer是最常用的：

const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

我强烈建议开启抗锯齿（antialias），虽然会消耗一些性能，但画面质量提升明显。另外记得处理窗口大小变化：

window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });

4. 创建你的第一个3D物体：彩色立方体

4.1 几何体：定义物体形状

立方体是最基础的3D几何体，Three.js提供了BoxGeometry类：

const geometry = new THREE.BoxGeometry(1, 1, 1); // 长宽高都是1个单位

这里的单位是虚拟的，可以理解为米、厘米或者任意你喜欢的单位。我习惯用米制，这样物理模拟时比较直观。

4.2 材质：定义物体外观

材质决定物体看起来是什么样子的。我们先用最简单的MeshBasicMaterial：

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, // 绿色 wireframe: false // 是否显示线框 });

如果想看到立方体的立体感，可以换成MeshPhongMaterial：

const material = new THREE.MeshPhongMaterial({ color: 0x00ff00, specular: 0x111111, shininess: 30 });

4.3 网格：组合几何体和材质

把几何体和材质组合起来，就创建了一个完整的3D物体：

const cube = new THREE.Mesh(geometry, material); scene.add(cube);

这时候如果渲染场景，可能什么都看不到。因为相机和物体的位置可能重合了，需要调整相机位置：

camera.position.z = 5;

4.4 让立方体动起来

3D场景没有动画就太无聊了。在渲染循环中添加旋转逻辑：

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

这里有个性能优化技巧：只在场景需要更新时才重新渲染。可以用以下模式：

let needsUpdate = true; function animate() { requestAnimationFrame(animate); if(needsUpdate) { renderer.render(scene, camera); needsUpdate = false; } } // 当有变化时设置needsUpdate为true cube.rotation.x += 0.01; needsUpdate = true;

5. 场景优化与调试技巧

5.1 添加光源提升真实感

之前的立方体看起来比较平，因为没有光照。Three.js有几种常用光源：

// 环境光（整体亮度） const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); // 平行光（类似太阳光） const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(1, 1, 1); scene.add(directionalLight);

我习惯用HemisphereLight模拟自然光照：

const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1); scene.add(light);

5.2 性能监控工具

Three.js自带性能监控插件Stats.js，使用很简单：

import Stats from 'three/examples/jsm/libs/stats.module.js'; const stats = new Stats(); document.body.appendChild(stats.dom); function animate() { requestAnimationFrame(animate); stats.update(); // ...其他动画逻辑 }

这个工具会显示FPS、渲染时间等关键指标。如果FPS低于30，就需要考虑优化了。

5.3 常见问题排查

1. 物体不显示：检查是否添加到场景、相机位置是否正确、物体是否在视锥体内
2. 画面卡顿：减少多边形数量、简化着色器、使用性能监控工具定位瓶颈
3. 材质显示异常：检查是否需要光照、纹理是否加载成功

我常用的调试方法是逐步简化场景：先移除所有物体，然后一个一个加回来，直到问题重现。

6. 下一步学习路径

掌握了基础场景搭建后，可以继续探索：

• 加载复杂模型：使用GLTFLoader加载设计师创建的3D模型
• 高级材质：尝试PBR材质、自定义着色器
• 物理引擎：结合cannon.js或ammo.js实现物理模拟
• 交互功能：添加鼠标点击、拖拽等交互

Three.js的examples目录里有大量示例代码，我建议从这些方向入手：

1. webgl_animation_cloth - 布料模拟
2. webgl_effects_anaglyph - 3D立体效果
3. webgl_geometry_text - 3D文字
4. webgl_shadowmap - 动态阴影

记住，学习Three.js最好的方式就是动手实践。遇到问题时，Three.js的官方论坛和GitHub issues都是很好的求助渠道。