Web 3D 素材运行时管线

大理论

3D 体验的风险通常不在 Three.js API，而在未治理的素材链路：模型来源不清、poly count 过高、4K/8K 纹理直出、KTX/Draco/Meshopt 未处理、首屏空白、移动端过热、reduced-motion 无 fallback、以及 canvas 内容没有文本替代。3D 应被视为运行时管线，而不是单个视觉组件。

小知识点

1. 先定义 3D 任务：产品检查、空间解释、品牌沉浸、数据表达、游戏玩法或装饰；没有任务就不要用重 3D。
2. 记录模型、HDRI、纹理、材质、字体、声音和参考图的来源许可；Three.js 的 MIT 许可不覆盖第三方模型或贴图。
3. glTF/GLB 入库前检查 vertex/triangle count、texture dimensions、animation clips、materials、unused nodes、bounds 和 scale。
4. 优化管线优先 glTF Transform：prune、dedup、resize、meshopt/draco、KTX2/UASTC/ETC1S 或 WebP，根据目标设备选择。
5. 加载状态要有 skeleton/poster/progress 和错误恢复；不要让首屏 canvas 黑屏或空白。
6. reduced-motion/low-power/no-WebGL 下提供静态 poster、图片序列、普通产品图或文本说明；交互目标必须可键盘或通过替代控件完成。

设计判断

如果 3D 明确让用户更好理解产品、空间或状态，并且在弱设备、无 WebGL、慢网和 reduced-motion 下仍能完成任务，它是有效增强。如果 3D 只是遮盖内容、拖慢首屏、或没有授权记录，它是风险资产。

实现建议

建立 3D intake record：purpose、runtime、modelSource、license、textureSource、hdrSource、polyBudget、textureBudget、compression、loader、fallbackPoster、altSummary、controls、reducedMotion、mobileQuality、memoryBudget、verificationScreenshots。实现前用 glTF Transform inspect/optimize 或同等工具做模型审计；部署前用桌面和移动视口截图、canvas 像素、加载失败和 reduced-motion 验证。

反例/风险

把 Sketchfab/Polycam 模型下载后不记许可；Three.js license 记录成整个场景许可；8K 法线贴图直上首屏；模型加载失败只剩黑 canvas；滚轮缩放抢走页面滚动；移动端风扇狂转；无 WebGL 用户看不到产品核心信息。

案例分析

Three.js 的许可文件采用 MIT；glTF Transform 官方文档说明它可读写 glTF 2.0，并用于 bundling、splitting、optimizing，CLI 还能 resize、WebP、KTX2/Basis 和 mesh compression；KTX-Software 文档说明项目文件通常采用 Apache 2.0，但仓库也包含多种许可证和少量特殊情况。可学习点是：3D 交付要把运行时库、模型、纹理和压缩工具分别记录，而不是用一个开源标签覆盖全部素材链路。

来源链接

Three.js License: https://github.com/mrdoob/three.js/blob/dev/LICENSE Three.js: https://threejs.org/ glTF Transform: https://gltf-transform.dev/ glTF Transform GitHub: https://github.com/donmccurdy/glTF-Transform KTX-Software License: https://github.khronos.org/KTX-Software/license.html