threejs-builder

# Three.js Builder Skill ## Overview This skill builds complete Three.js web applications using a **Phased Construction** pattern with four phases: Design, Build, Animate, Polish. It supports three paradigms — imperative Three.js, React Three Fiber (R3F), and WebGPU — detected automatically from project context. Only the relevant paradigm's reference is loaded. **Scope**: Use for 3D web apps, interactive scenes, WebGL/WebGPU visualizations, R3F declarative 3D, and product viewers. For game engines, 3D model creation, VR/AR experiences, or CAD workflows, use a more specialized skill. --- ## Reference Loading Table | Signal | Load These Files | Why | |---|---|---| | `@react-three/fiber`, `r3f`, `drei`, `useFrame`, `<Canvas>`, `<mesh>`, React project with 3D | `react-three-fiber.md` | **React Three Fiber** | | `WebGPURenderer`, `TSL`, `tsl`, `compute shader`, `wgsl`, `node material`, WebGPU mentioned | `webgpu.md` | **WebGPU** | | Standalone HTML, CDN imports, `new THREE.Scene()`, no React, vanilla JS/TS | `advanced-topics.md` (load as needed)` | **Imperative** | | Game project: `EventBus`, `GameState`, player controller, enemies, scoring, multiple game systems | `game-patterns.md` (alongside paradigm reference)` | **Game architecture** | | GLTF/GLB model loading, `.glb` files, animated characters, skeletal rigs, model import | `gltf-loading.md` (alongside paradigm reference)` | **GLTF loading** | | `references/build-recipes.md` | `build-recipes.md` | Phase 2/3 build, erro...