Three.js Production Patterns

Resource Cleanup

• Call .dispose() on geometries, materials, and textures before removing objects — Three.js never garbage collects GPU resources automatically
• When removing a mesh: mesh.geometry.dispose(); mesh.material.dispose(); scene.remove(mesh) — missing any step causes memory leaks
• Textures loaded via TextureLoader stay in GPU memory forever unless explicitly disposed — track and clean up on scene transitions

Render Loop

• Always use renderer.setAnimationLoop(animate) instead of manual requestAnimationFrame — it handles VR, pauses when tab is hidden, and provides proper timing
• For animations, use clock.getDelta() for frame-independent movement — raw frame counting breaks on different refresh rates

Responsive Canvas

• On window resize, update both camera aspect AND renderer size: camera.aspect = width/height; camera.updateProjectionMatrix(); renderer.setSize(width, height)
• Missing updateProjectionMatrix() after aspect change causes stretched/squished rendering
• Use renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) — values above 2 kill performance with minimal visual benefit

Imports and Setup

• OrbitControls and other addons: import { OrbitControls } from 'three/addons/controls/OrbitControls.js' — the path varies by bundler, check your setup
• Always set controls.enableDamping = true with OrbitControls and call controls.update() in render loop — without this, damping silently fails