Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive web experiences. Triggers on tasks involving Three.js, 3D rendering, scenes, cameras, meshes, materials, lights, animations, textures, or WebGL/WebGPU rendering.
Three.js is the industry-standard JavaScript library for creating 3D graphics in web browsers using WebGL and WebGPU. This skill provides practical guidance for building performant, interactive 3D experiences including scenes, cameras, renderers, geometries, materials, lights, textures, and animations.
Use this skill when:
For React integration, use the react-three-fiber skill. For animation, combine with the gsap-scrolltrigger skill. For UI animations, use the motion-framer skill.
This SKILL.md is the routing layer. Detailed recipes, examples, integration notes, and troubleshooting guidance live in references/details.md so they are loaded only when the task needs them.
Before producing concrete output, making a design recommendation, or debugging an implementation, load the relevant reference section below. Do not rely on memory for branch-specific APIs, examples, or caveats.
| Task branch | Read first |
|---|---|
| Core Concepts | references/details.md#core-concepts |
| Quick Start Pattern | references/details.md#quick-start-pattern |
| Common Patterns | references/details.md#common-patterns |
| Integration Patterns | references/details.md#integration-patterns |
| Performance Optimization | references/details.md#performance-optimization |
| Best Practices | references/details.md#best-practices |
| Common Pitfalls | references/details.md#common-pitfalls |
| Resources | references/details.md#resources |
| Advanced Topics | references/details.md#advanced-topics |