用途：指导构建高性能 3D Web 体验，涵盖 Three.js、WebGPU 优先渲染、TSL（Three Shader Language）与 React Three Fiber，包括场景架构、资源压缩、绘制调用预算以及 React 19 / Next.js 集成模式。
适用场景：创建 3D 场景、WebGPU 渲染设置、TSL 着色器编写、资源优化（Draco/KTX2）、React Three Fiber 组合、Next.js 3D 内容流式加载、加载 GLTF 模型、灯光与阴影、动画播放与混合。不适用：2D canvas 动画、简单 SVG 图形、无客户端水合的纯服务端渲染、仅面向 2022 年前硬件的项目。
主要能力与用法要点：WebGPU 渲染器使用 import * as THREE from 'three/webgpu'，首次渲染前必须 await renderer.init()；R3F 画布用 <Canvas gl={...}> 配合 Suspense 支持流式加载；帧更新用 useFrame((state, delta) => ...)，直接修改 ref，不要用 setState；TSL 着色器从 three/tsl 导入，基于节点，可编译为 WGSL 或 GLSL；实例化用 instancedMesh 更新矩阵，重复几何体单次绘制；BatchedMesh（r156+）让不同几何体共享一个材质；Draco 压缩命令 gltf-pipeline -i in.gltf -o out.glb -d，几何体可减少最多 90%；KTX2 纹理经 Basis Universal 的 toktx 保持 VRAM 压缩；LOD 按相机距离切换细节；按需渲染用 <Canvas frameloop="demand">；卸载时对几何体、材质、纹理调用 .dispose()；计算着色器用 Fn(() => {...})().compute(count)；灯光用 DirectionalLight、SpotLight、HemisphereLight，需同时开启 renderer.shadowMap 与 light.castShadow；GLTF 用 GLTFLoader + DRACOLoader；动画用 AnimationMixer + clipAction()，每帧用 clock.getDelta() 更新；交叉淡入淡出用 fadeOut()/fadeIn() 做权重混合；环境贴图用 RGBELoader + PMREMGenerator 设置 scene.environment；拾取用 Raycaster.setFromCamera(pointer, cam)，GLTF 需 recursive: true；形变目标用 mesh.morphTargetInfluences[index]。
常见错误与纠正：不要在 useFrame 内新建 Vector3 或 Color，应预分配；React 项目不要手动 requestAnimationFrame，用 useFrame；WebGPU 必须 await renderer.init()；资源加载需包 Suspense；远景用 LOD 或 Impostors；动画不要用 setState；运动乘以 delta 以与帧率无关；mixer.update(delta) 必须传 delta；移除 GLTF 时遍历并释放资源；阴影需渲染器与灯光同时开启；相机 near/far 比值保持小以避免 z-fighting。
限制：资料未提供具体版本兼容范围、收费或价格、平台支持细节与效果数据，暂未提供。