获课地址：xingkeit.top/7640/

Three.js 作为 WebGL 生态中最具代表性的 3D 引擎，其核心架构围绕场景（Scene）、相机（Camera）和渲染器（Renderer）三大组件构建。这三个组件共同构成了虚拟 3D 世界的"铁三角"，分别承担空间管理、视角控制和画面输出的核心功能。

一、场景：虚拟世界的空间管理者

场景是 Three.js 的顶级容器，所有 3D 对象（网格、灯光、相机）必须加入场景才能被渲染。其本质是一个树状数据结构，通过 THREE.Scene 类实例化后，可动态管理对象层级关系。例如在建筑可视化项目中，场景可包含建筑模型、环境光、太阳光等对象，通过 scene.add() 方法将这些元素组织成完整的虚拟环境。

场景的空间管理具备三个关键特性：

1. 坐标系基准：所有对象的位置、旋转和缩放都基于场景的世界坐标系，默认原点位于画布中心。
2. 层级嵌套：支持通过 THREE.Group 创建对象组，实现批量变换控制。如汽车模型可将车身、车轮等部件分组，通过移动组对象实现整体移动。
3. 剔除优化：内置视锥体剔除（Frustum Culling）机制，自动排除相机视野外的对象，显著提升渲染性能。

二、相机：虚拟世界的观察之眼

相机决定了场景的呈现视角，其参数配置直接影响最终渲染效果。Three.js 提供两种核心相机类型：

1. 透视相机（PerspectiveCamera）
   模拟人眼视觉特性，遵循近大远小的透视规律。其核心参数包括：
   • 视野角度（FOV）：控制视角范围，典型值为 60-75 度
   • 宽高比（Aspect）：匹配画布尺寸，避免图像拉伸
   • 裁剪面（Near/Far）：定义渲染距离范围，通常设置为 0.1-1000 单位
     在游戏开发中，透视相机常用于第一人称视角，通过动态调整位置和朝向实现角色移动效果。
2. 正交相机（OrthographicCamera）
   采用平行投影方式，物体尺寸不受距离影响。其参数配置包含 left/right/top/bottom 边界值，适合 CAD 建模、2.5D 游戏等场景。例如在建筑图纸渲染中，正交相机可确保不同楼层的平面图保持真实比例。

相机控制可通过两种方式实现：

• 直接参数调整：通过修改 position 和 lookAt 属性改变视角
• 控制器辅助：集成 OrbitControls 等插件，实现鼠标拖拽旋转、滚轮缩放等交互

三、渲染器：虚拟世界的成像引擎

渲染器负责将场景和相机信息转换为屏幕像素，其核心是 WebGLRenderer 类。该组件通过以下机制实现高效渲染：

1. 硬件加速
   基于 WebGL API 直接调用 GPU 计算，支持顶点着色器和片元着色器并行处理。在粒子系统渲染中，可同时处理数百万个独立粒子的位置和颜色计算。

2. 渲染管线优化
   包含五个关键阶段：

   • 场景图遍历：递归处理对象可见性
   • 状态设置：配置深度测试、混合模式等 GPU 参数
   • 顶点处理：计算模型视图矩阵
   • 光栅化：将三维坐标转换为屏幕像素
   • 后处理：应用 Bloom 发光、SSAO 环境光遮蔽等特效

3. 高级特性支持

   • 阴影映射：通过 shadowMap.enabled 开启实时阴影
   • 抗锯齿处理：支持 MSAA 多重采样抗锯齿
   • PBR 材质：实现基于物理的光照渲染
   • WebXR 集成：支持 VR/AR 设备输出

四、组件协同工作机制

三大组件通过渲染循环实现动态交互：

1. 初始化阶段：创建场景、配置相机参数、实例化渲染器
2. 资源加载：导入 3D 模型、纹理贴图等资源
3. 动画循环：每帧执行以下操作
   • 更新对象状态（位置/旋转/缩放）
   • 调用 renderer.render(scene, camera) 执行渲染
   • 处理用户输入（鼠标/键盘事件）

在电商产品展示场景中，这种协同机制可实现：透视相机绕产品旋转，正交相机显示多角度视图，渲染器实时输出高光反射效果，最终通过 WebGL 渲染到浏览器画布。

五、性能优化实践

针对复杂场景的渲染优化，可采取以下策略：

1. 层级管理：使用 THREE.Layers 实现对象分组渲染
2. LOD 技术：根据相机距离动态切换模型精度
3. 实例化渲染：通过 InstancedMesh 批量绘制重复对象
4. WebGL 扩展：启用 OES_texture_float 等扩展提升计算精度
5. 内存管理：及时调用 dispose() 方法释放不再使用的几何体和材质资源

Three.js 的场景-相机-渲染器架构，通过清晰的职责划分和高效的协同机制，为开发者提供了构建虚拟世界的强大工具集。理解其核心原理，有助于在产品展示、数据可视化、游戏开发等领域创造更具沉浸感的 3D 体验。