threejs-builder

Three.js Builder 是一项专业的工程技能，旨在加速 3D 网页应用程序的开发。它作为 WebGL 开发人员的综合指南与样板生成器，专注于现代 ES 模块生态系统。无论您是构建交互式数据可视化、3D 角色查看器还是网页游戏原型，此技能都提供了管理复杂层级变换所需的核心架构——场景图（Scene Graph）。它非常适合需要实现稳定 3D 内容，同时保持跨设备高性能与帧率的前端工程师与创意开发人员。

• 优化场景初始化流程，包括相机、渲染器及场景图阶层的管理。

• 提供对原始几何体、标准材质配置以及环境光、平行光与聚光灯等高级灯光模型的深入支持。

• 包含 GLTF 与 GLB 模型加载的健壮逻辑，提供缓存、复制与管理 3D 模型的高效模式。

• 具备先进的动画状态管理工具，如 AnimationMixer、交叉淡入淡出（Crossfading）以及动态角色或物体移动的循环模式控制。

• 整合性能防护措施，例如像素比处理、阴影贴图优化以及响应式 Canvas 的窗口缩放事件处理。

• 提供游戏循环、OrbitControls 交互处理以及交互式 3D 元素的状态管理实用模式。

• 在启动新的 Three.js 项目时使用此技能，通过 npm 与 Vite 兼容的结构来强制执行模块化编码标准。

• 确保所有 3D 素材遵循 GLTF/GLB 格式，以获得与所提供加载与动画工具的最佳兼容性。

• 通过使用 Group 容器来维护场景图阶层，保持对象树的组织性与性能效率。

• 在状态转换时（例如从闲置到奔跑）应用动画交叉淡入淡出技术，以确保视觉效果的流畅性。

• 使用提供的最小化样板建立基准渲染器，然后根据项目设计需求层叠特定的着色器或后处理效果。

• 始终根据设备性能设置渲染器的像素比，以确保在移动设备与高 DPI 显示器上的清晰度，同时不牺牲性能。