技能介绍

解决什么问题

Three.js 的学习资料散落在官方文档、示例仓库和大量博客里，结果往往是两种浪费：要么照着 demo 抄了个旋转立方体，却说不清 Scene、Camera、Renderer 各自的职责边界；要么一上来就碰自定义着色器与后处理，却忽略了真正决定 Web 3D 页面能否在低端设备上跑起来的约束——draw call 预算、实例化、LOD 与几何精度。这个技能把从首个场景到进阶渲染的路径整理成可执行的分步流程，让输出不再是孤立代码片段，而是先确认目标平台与交互层级，再给出结构化的 SceneSpec。

核心能力

分级学习路径：L1 场景搭建、几何体、材质、灯光与渲染循环；L2 加载器、贴图、相机、动画与数学工具；L3 射线拾取、控制器与后处理；L4 PBR、TSL 节点材质与自定义着色器；L5 物理、VR/XR 与 WebGPU 计算。
起步骨架：Scene + PerspectiveCamera + WebGLRenderer → 加几何体与 MeshStandardMaterial → 加方向光与环境光 → requestAnimationFrame 渲染循环，模板见 references/template.md。
效果扩展：用 GLTFLoader 加载模型，用 OrbitControls 控制相机，用 EffectComposer 串联 bloom、景深、SSAO；自定义效果走 ShaderMaterial + uniforms。
性能优化：InstancedMesh 实例化、LOD、视锥剔除与合批，目标是压住 draw call 并控制几何精度。
结构化产出：SceneSpec 显式列出 objects、lights、materials、postfx 与 perf_notes，可继续交给 ui-styling、web-frameworks 或 frontend-development 消费。

适用边界与注意点

不适用于纯 2D 界面排版，这类需求应走 ui-styling；也不适用于浏览器之外的 3D，例如需要桌面图形引擎的项目。另外，资料中的 references/template.md 是路径约定：若实际工作区没有该文件，技能仍按上述步骤讲清思路，但模板代码需要使用者自行补齐，不要默认它能直接读盘。