threejs_skill

Overview

This skill teaches production-ready Three.js patterns for building stable, performant 3D web experiences. It focuses on proper GPU resource management, reliable render loops, responsive canvas handling, and real-world performance techniques. The guidance is practical and targeted at shipping maintainable scenes in browsers.

How this skill works

The skill inspects common lifecycle and runtime concerns: disposing GPU resources, using the renderer's animation loop, keeping camera and renderer sizes in sync, and loading assets safely. It also covers lighting, material choices, and animation updates to avoid visual and memory bugs. Each recommendation maps to minimal code changes that prevent leaks and performance regressions.

When to use it

• When building or maintaining a Three.js production app that must run long-term without memory leaks
• When you see GPU memory growth or 'black' materials after scene transitions
• Before shipping responsive 3D UIs to ensure correct aspect and pixel ratio handling
• When optimizing draw calls for scenes with many objects or repeated geometry
• During integration of external models or HDR environments where lighting and transforms cause issues

Best practices

• Explicitly call dispose() on geometries, materials, and textures before removing meshes to free GPU memory
• Use renderer.setAnimationLoop(animate) and clock.getDelta() for frame-independent animations and proper pause behavior
• On resize, update camera.aspect, call camera.updateProjectionMatrix(), and set renderer.setSize(); clamp device pixel ratio (<=2)
• Enable controls.enableDamping = true and call controls.update() inside the render loop for smooth input
• Merge static geometries or use InstancedMesh to reduce draw calls; monitor renderer.info for bottlenecks
• Use LoadingManager, GLTFLoader (with DRACOLoader for large meshes), and ensure proper CORS for external assets

Example use cases

• A web product viewer that swaps scenes without leaking textures or accumulating GPU memory
• An interactive 3D dashboard that must remain performant on high-DPI devices by clamping pixel ratio
• A game or simulation using hundreds of repeated objects optimized with InstancedMesh
• A virtual showroom using HDR environment maps and PMREMGenerator for realistic reflections
• An avatar system with skinned characters using AnimationMixer.update(delta) and SkeletonHelper during debugging