Three.js从入门到进阶：完整学习指南与实战要点 - 指南

在Web 3D开发领域，Three.js绝对是绕不开的核心库。它基于WebGL封装，让开发者无需深入底层就能快速构建炫酷的3D场景——小到简单的产品展示，大到复杂的元宇宙应用，都能靠它实现。

很多新手刚接触Three.js时会被"3D坐标系""材质""光照"等概念劝退，其实只要按「基础组件→核心操作→进阶功能→实战优化」的顺序推进，就能逐步掌握。这篇文章整理了Three.js全阶段学习知识点，附详细代码示例和避坑指南，帮你少走弯路。

一、入门必懂：3D场景的"最小组成单元"

任何Three.js程序都依赖4个核心组件，这是搭建3D场景的基石，必须牢牢掌握。

1. 场景（Scene）：3D世界的"容器"

场景就像一个虚拟的3D舞台，所有要显示的物体、灯光、相机都得"搬"到这个舞台上才能生效。它还能管理物体的层级关系，比如让一个模型成为另一个模型的子物体，实现联动效果。

核心用法：

// 1. 创建场景
const scene = new THREE.Scene();
// 2. 常用配置：设置背景色（白色）
scene.background = new THREE.Color(0xffffff);
// 3. 关键操作：向场景添加物体（mesh是后续创建的模型）
scene.add(mesh);
// 4. 进阶：设置雾效（让远处物体渐隐，增强景深）
scene.fog = new THREE.Fog(0xffffff, 10, 50); // 雾色、近距、远距

学习重点：理解场景的"容器"本质，掌握add方法的层级嵌套逻辑（父物体移动时，子物体同步移动）。

2. 相机（Camera）：3D世界的"眼睛"

相机模拟人眼视角，决定了场景中哪些部分会被渲染到屏幕上。Three.js最常用的是透视相机和正交相机，二者适用场景完全不同。

核心类型与用法：

• PerspectiveCamera（透视相机）：最常用，模拟真实世界的"远小近大"效果，适合绝大多数3D场景（如游戏、产品展示）。 // 参数：视场角(fov)、宽高比(aspect)、近裁切面(near)、远裁切面(far) const camera = new THREE.PerspectiveCamera( 75, // 视场角：镜头能覆盖的角度（单位：度） window.innerWidth / window.innerHeight, // 宽高比：与画布尺寸匹配 0.1, // 近裁切面：距离相机比这更近的物体不渲染 1000 // 远裁切面：距离相机比这更远的物体不渲染 ); // 关键：调整相机位置（默认在原点，需拉开距离才能看到物体） camera.position.z = 5;

• OrthographicCamera（正交相机）：无透视效果，远近物体大小一致，适合2D游戏、工程图纸、UI界面等场景。 // 参数：左、右、上、下、近、远 const camera = new THREE.OrthographicCamera( -window.innerWidth/2, window.innerWidth/2, window.innerHeight/2, -window.innerHeight/2, 0.1, 1000 );

学习重点：

• 透视相机4个参数的含义：尤其是近/远裁切面，设置不当会导致物体"消失"（近裁太近或远裁太远会影响性能）。

• 相机的核心方法：position（设置位置）、lookAt（让相机朝向某个点）。

• 窗口适配：窗口大小变化时，需更新相机宽高比和投影矩阵（后面实战部分有完整代码）。

3. 渲染器（Renderer）：3D世界的"画笔"

渲染器的作用是把"场景+相机"的组合，绘制到网页的DOM元素上（本质是调用WebGL API进行图形渲染）。它的配置直接影响画面质量和性能。

核心用法：

// 1. 创建渲染器，开启抗锯齿（画面更平滑）
const renderer = new THREE.WebGLRenderer({ antialias: true });
// 2. 设置渲染尺寸（与窗口一致）
renderer.setSize(window.innerWidth, window.innerHeight);
// 3. 关键配置：开启阴影渲染（默认关闭，需手动开启）
renderer.shadowMap.enabled = true;
// 优化阴影质量
renderer.shadowMap.quality = THREE.PCFSoftShadowMap;
// 4. 将渲染画布添加到页面（renderer.domElement是canvas元素）
document.body.appendChild(renderer.domElement);
// 5. 单次渲染（动画需配合循环调用）
renderer.render(scene, camera);

学习重点：抗锯齿、阴影开启、像素比优化（renderer.setPixelRatio(window.devicePixelRatio)，解决高清屏模糊问题）。

4. 物体（Mesh）：3D世界的"演员"

Mesh是场景中可见的3D物体，由「几何体」和「材质」组成——几何体定义形状，材质定义外观，二者结合才能构成可见的模型。

核心组成：

1. 几何体（Geometry）<