Three.js

Use this skill when work touches Three.js: scene/camera/renderer setup, render loop, geometry, materials, textures, lights/shadows, glTF assets, animation, picking, controls, post-processing, WebGPU/TSL, XR, performance/memory, TypeScript/bundling, or version upgrades.

Snapshot: three@0.186.1 = r186 (2026-09-24), @types/three@0.186.0. Next dev line is r187 (migration notes exist, not released). Refresh from source-map.md if versions differ.

Workflow

1. Inspect the project: three version (npm 0.x.y = release r<x>), @types/three match, renderer in use (WebGLRenderer vs three/webgpu), bundler/import map, loop style (setAnimationLoop vs custom rAF), React wrapper (R3F) or vanilla.
2. Everyday setup, loop, resize, geometry, picking, controls: usage-guide.md.
3. Materials, textures, color space, lights, shadows, environment maps: materials-textures-lighting.md.
4. glTF/Draco/Meshopt/KTX2 loading and the animation system: loaders-animation.md.
5. WebGPURenderer, node materials, TSL, compute, RenderPipeline: webgpu-tsl.md.
6. Draw calls, instancing, memory/dispose, EffectComposer, profiling: postprocessing-performance.md.
7. Addon locations (three/addons/* groups, package entry points): addons-index.md.
8. React (R3F v9, drei, Canvas, hooks, WebGPU gl factory): react-three-fiber.md. Companion packages (postprocessing, three-mesh-bvh, gltf-transform, Rapier, troika, pathtracer) with versions and compatibility: ecosystem-packages.md.
9. Upgrades and deprecations (r170 to r186): migration.md. Official URLs to refresh: source-map.md.
10. Verify: bunx tsc --noEmit, a production build, console clean of THREE. warnings, renderer.info stable across a mount/unmount cycle.