Three.js：从场景、相机和渲染器理解网页 3D

它是什么

Three.js 是一个通用的 JavaScript 3D 库。它在浏览器图形能力之上提供场景图、相机、几何体、材质、灯光、纹理、动画和资源加载等常用抽象，让开发者不必从底层图形 API 的全部细节开始搭建网页 3D。

当前核心构建包含 WebGL 与 WebGPU 渲染器，控制器、模型加载器和后期处理等扩展能力则通过 addons 单独导入。官方网站同时提供示例、API 文档、入门手册、编辑器和社区入口，很适合把“看效果”和“查实现”放在一起学习。

官方入门教程把第一个画面归纳为三个基础对象：

接下来通常会创建几何体与材质，再组合成 Mesh 放入场景。动画循环持续更新对象状态并调用渲染器，于是一个静态三维场景才真正变成可交互的实时画面。

这套关系比记住某个立方体示例更重要。以后增加模型、灯光、阴影、粒子或后期处理，本质上仍是在维护场景中的对象，并决定何时、从哪里、以多大成本把它们画出来。

Three.js 适合产品三维展示、数据可视化、互动叙事、创意专题页、轻量游戏场景和 WebXR 实验。它尤其适合需要自己控制场景结构、材质和渲染过程的项目。

如果目标只是普通卡片倾斜、二维粒子背景或少量 CSS 透视，直接使用 CSS、Canvas 2D 或更小的动画方案往往更简单。Three.js 降低了 Web 3D 的入门门槛，但并不会消除实时渲染本身的资源成本。

模型面数、材质数量、透明叠加、阴影、后期处理和设备像素比都会影响性能。应先定义手机端目标，再决定画质上限，而不是完成桌面效果后才被迫整体删减。

视口变化时需要同步渲染尺寸、相机宽高比和投影矩阵。若 Canvas 只是页面中的一个区域，还要以容器尺寸为准，而不是始终读取整个窗口。

模型和纹理需要加载状态、错误降级与合理压缩。场景的核心说明和操作入口应保留在真实 DOM 中，不能因为 3D 初始化失败就一起消失。

离开页面或销毁组件时，应停止动画循环、移除事件监听，并释放不再使用的几何体、材质、纹理与渲染资源。否则单页应用多次进入场景后可能逐渐积累内存和 GPU 资源。

Canvas 中的物体不会自动获得链接、按钮和标题语义。真正重要的文字与操作需要 DOM 等价入口；拖拽、缩放和键盘操作也要避免与页面原生滚动发生冲突。