Generate Interactive 3D Web Experiences with Three.js

This skill provides a systematic process for building Three.js 3D scenes and interactive experiences, current to r183. It covers core setup (ES module import maps for prototypes vs npm/Vite bundling for production), the required scene/camera/renderer trio, and the animation loop (preferring renderer.setAnimationLoop() over manual requestAnimationFrame for WebXR compatibility). Its systematic development process moves through defining the scene (objects, camera, lighting, interaction model), choosing geometry (Box/Sphere/Cylinder/Plane/Torus/Capsule), selecting materials by lighting need (MeshBasicMaterial unlit vs MeshStandardMaterial/MeshPhongMaterial/MeshLambertMaterial lit), adding ambient and directional lighting, and handling window resize.

It documents concrete interaction patterns - OrbitControls (with damping) or lightweight custom mouse-drag/zoom controls, raycasting for click/hover object selection, particle systems via BufferGeometry, and texture loading - plus production-grade visual polish: shadow maps (PCFSoftShadowMap, shadow camera configuration), environment maps and reflections via CubeTextureLoader, ACES filmic tone mapping and SRGBColorSpace output encoding, fog (linear and exponential), Level of Detail (THREE.LOD) and InstancedMesh for performance at scale, GLTF model loading, and THREE.Timer (r183's recommended replacement for THREE.Clock, since it pauses correctly when a tab is hidden). It also covers GSAP for timeline-based animation and scroll-synced 3D interactions, and names the r183 WebGPU renderer alternative (using TSL instead of GLSL) and a companion threejs-postprocessing skill for effects like bloom and depth of field.

Use this skill for any request involving 3D visualizations, interactive 3D experiences, WebGL/WebGPU rendering, animations/particles/visual effects, or 3D data visualization - it explicitly recommends an import-map approach for quick prototypes/demos/embedded artifacts and a production build (npm/Vite) approach for client projects, complex apps, and team collaboration.

It flags specific pitfalls to avoid rather than "when not to use": using the renamed outputEncoding instead of outputColorSpace (renamed in r152), forgetting scene.add(), using lit materials without adding lights, skipping resize handling, and using THREE.Clock when THREE.Timer is now recommended.

Input is a 3D scene or interaction requirement - a rotating object, a mouse-responsive sphere, a particle field, a shadowed environment. Output is working Three.js code following the systematic setup - scene/camera/renderer initialization, geometry+material=mesh, lighting if needed, an animation loop, and resize handling - plus a troubleshooting reference for common failure modes (black screen, poor performance, invisible objects).

# Import map approach (no build step)
"three": "https://cdn.jsdelivr.net/npm/three@0.183.0/build/three.module.js"

Built on Three.js r183, with OrbitControls and GLTFLoader from three/addons, GSAP for animation timelines, optional React Three Fiber/Drei for React integration, and a recommended production stack of Three.js + Vite + GSAP + post-processing. Companion skills: threejs-postprocessing for effects, threejs-shaders for WebGPU/TSL custom shaders.

Developers building 3D visualizations, interactive scenes, or WebGL/WebGPU-based visual experiences who want current (r183) Three.js patterns and performance practices rather than outdated API usage.