本技能面向 Three.js 3D 网页开发，提供从基础场景搭建到性能优化的系统化指导。Three.js 是基于 WebGL 与 WebGPU 在浏览器中创建 3D 图形的 JavaScript 库，本技能围绕其场景、相机、渲染器、几何体、材质、灯光、纹理与动画展开。
用途
用于构建交互式 3D 网页体验、产品配置器或可视化器，实现 WebGL/WebGPU 渲染，处理 3D 模型、场景与动画，优化 Three.js 性能，与 GSAP、React 等库集成，以及排查渲染问题。React 集成建议配合 react-three-fiber 技能，动画可结合 gsap-scrolltrigger，界面动画可用 motion-framer。
核心概念与主要能力
- 场景图架构：Scene、Camera、Lights、Meshes（Mesh 与 InstancedMesh）、Groups 构成树状结构。
- 必备组件：Scene 容器、Camera 视角、Renderer 绘制到画布、Geometry 形状、Material 外观、Mesh 组合几何体与材质。
- WebGPU 渲染：通过 three/webgpu 引入 WebGPURenderer，使用 setAnimationLoop、色调映射等设置。
- 材质与纹理：MeshStandardMaterial 等材质，TextureLoader 加载纹理并设置 SRGBColorSpace。
- 灯光策略：三点布光（主光、补光、轮廓光加环境光）、物理点光源（power 流明）、半球光。
- 性能手段：InstancedMesh 批量渲染、几何体复用、纹理 mipmap 与 2 的幂尺寸、LOD、视锥剔除、资源 dispose。
- 模型加载：GLTFLoader 配合 DRACOLoader 加载 glb，遍历启用阴影，AnimationMixer 播放动画。
- 阴影配置：renderer.shadowMap 启用与类型，光源 shadow.mapSize、camera 范围与 radius 等。
- 交互：Raycaster 结合鼠标坐标实现点击拾取。
- 后处理：EffectComposer、RenderPass、UnrealBloomPass 实现泛光。
- 进阶：ShaderMaterial 自定义 GLSL、WebGLRenderTarget 渲染到纹理、GPUComputationRenderer 实现 GPGPU 计算。
使用方式
技能给出标准快速开始模板：创建 Scene、PerspectiveCamera、WebGLRenderer（含 antialias、setPixelRatio、shadowMap），添加环境光与方向光，接入 OrbitControls（启用 damping），以 requestAnimationFrame 驱动渲染循环，并监听 resize 更新相机宽高比与投影矩阵、渲染器尺寸。WebGPU 版本改用 WebGPURenderer 与 setAnimationLoop。还提供 Clock 计算 deltaTime 做帧无关动画，以及 Group 组织对象、命名查找等规范。
适用场景
交互式 3D 网页、产品配置器与可视化器、WebGL/WebGPU 应用、3D 模型与动画展示、Three.js 性能调优、与 GSAP/React 等库集成、渲染问题调试。
限制与注意事项
技能提到常见陷阱：窗口缩放未更新宽高比、在动画循环中反复创建对象导致内存泄漏、忘记为渲染器/光源/对象启用阴影、Z-Fighting 闪烁、纹理色彩空间未设置、未调用 dispose 释放资源。资源方面，内置 references/（api_reference.md、materials_guide.md、optimization_checklist.md）、scripts/setup_scene.py 与 assets/starter_scene/ 起始项目；纹理优化、glTF 校验、着色器库、HDRI 与解码器二进制未随包提供，需使用项目认可的依赖与工具。资料未提供安装命令、收费与平台信息。