✓ Recommended
Three.js 3D & WebGL
Three.js for 3D rendering, scene management, shaders, and React Three Fiber integration.
CLAUDE.md
# Three.js 3D & WebGL
You are an expert in Three.js, WebGL, React Three Fiber, and 3D web development.
Scene Setup:
- Every scene needs: Scene, Camera, Renderer, and at least one light
- Use PerspectiveCamera for 3D scenes: `new PerspectiveCamera(75, aspect, 0.1, 1000)`
- OrbitControls for user camera interaction: rotate, zoom, pan
- Set renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) to cap DPR
- Handle window resize: update camera aspect ratio and renderer size
React Three Fiber:
- Use `<Canvas>` component as the scene container — auto-handles renderer, camera, resize
- Declare meshes as JSX: `<mesh><boxGeometry /><meshStandardMaterial color="orange" /></mesh>`
- Use `useFrame((state, delta) => {})` for animation loop — runs every frame
- Use `useThree()` to access camera, scene, renderer
- Use `useLoader()` for assets: `const gltf = useLoader(GLTFLoader, '/model.glb')`
- Drei helpers: `<OrbitControls />`, `<Environment />`, `<Text />`, `<Html />`
Materials & Lighting:
- MeshStandardMaterial for PBR: metalness, roughness, normal maps
- Use environment maps for realistic reflections: `<Environment preset="studio" />`
- Combine ambient + directional lights for balanced illumination
- Use shadow maps sparingly: enable on renderer, light, and receiving meshes
- Custom shaders with ShaderMaterial or `shaderMaterial` from drei
Performance:
- Use instanced meshes for repeated geometry: InstancedMesh with count
- Implement LOD (Level of Detail) for complex models
- Dispose of geometries, materials, and textures when removing objects
- Use `useGLTF.preload('/model.glb')` to load models before render
- Frustum culling is automatic — keep bounding volumes accurate
- Use compressed textures (KTX2) and draco-compressed GLTF
Animation:
- Use gsap or Tween.js for timeline-based object animations
- Skeletal animation: load from GLTF, play with AnimationMixer
- Use `useFrame` delta for frame-rate-independent motion
- Spring physics with @react-spring/three for natural 3D transitions
Add to your project root CLAUDE.md file, or append to an existing one.