three.jsthree.js

从空场景开始，一块块搭出 3D 地球

下面的 3D 画面是真的在用 three.js 渲染，现在什么都没有。按任务清单的顺序加积木：每加一块，画面会变、AI 报告多一行，下面的读数是 WebGL 这一帧实际收到的工作量。试着移除相机或灯光，看画面会怎样。

知识点：积木名是你和 AI 的共同语言

刚才每一次画面变化，都对应下面一件事。

• three.js 是建在 WebGL 上的库：WebGL 只认三角形和着色器，three.js 让你用「场景、相机、网格、灯光」这样有名字的东西描述画面。
• 积木各管一件事：场景装东西，相机决定从哪看，网格 = 几何体（形状）+ 材质（表面），灯光让标准材质能反光，控制器让用户转动视角。少了相机或灯光，画面就是黑的。
• 三角形数和绘制次数是 three.js 替你算出来的：一个物体至少一次绘制，复用几何体能省显存，但每多一个物体，三角形和绘制次数照样增加。
• three 是一个依赖，有实打实的体积：它应该只在需要 3D 的页面按需加载，不能拖慢整站首屏。

什么时候用、怎么验收

当你想要网页里有能转、能点、能动的 3D 时，three.js 是最常见的默认选择。

• 信号：要做 3D 产品展示、3D 地球 / 地图、可交互的 3D 背景，或者 AI 报告里出现 Scene、Mesh、WebGLRenderer。
• 项目是 React / Next 且 3D 交互多：考虑让 AI 用 React Three Fiber（底下仍是 three.js）；只是一段视频或一张图能讲清的效果，先别上 3D。
• 验收一：让 AI 在报告里列出用到的 three.js 对象（相机、网格、灯光、控制器），你能对着画面一一认出来。
• 验收二：打开一个不含 3D 的页面（比如首页），在开发者工具的 Network 里确认没有下载 three；3D 页面则要报告增加了多少 KB。
• 验收三：离开 3D 页面再回来几次，页面不越来越卡，说明 AI 写了释放（dispose）。

正反例：同一个「首页 3D 地球」

需求只差一句话，用户下载的东西差了一个库。