Styling / UI & Animation
Three.js
The dominant WebGL library — 3D scenes, shaders, cameras, lighting in the browser.
Monthly cost
Free
Popularity
5/5
LLM knowledge
5/5
Difficulty
Hard
bundle: ~150kb
#open-source
What Three.js is good at
Strengths
- +Massive ecosystem
- +Runs in every modern browser
- +Huge amount of reference code online
Tradeoffs
- −Significant bundle (~150kb gzip)
- −WebGL learning curve
- −Mobile perf needs care
Coding-agent prompt
Drop into Claude / Cursor to get idiomatic Three.js code.
You're writing Three.js code. Follow these rules: - Dispose of geometries, materials, and textures explicitly on unmount — leaks are the #1 footgun. - Use a single `renderer`, `scene`, and animation loop per canvas. - Set `renderer.setPixelRatio(window.devicePixelRatio)` but cap at 2 to avoid burning mobile GPUs. - `BufferGeometry` over `Geometry` (which is removed). - Keep draw calls low — merge geometries, use `InstancedMesh` for repeated meshes. - Load assets with `GLTFLoader` + DRACO compression for production.
Popular pairings with Three.js
Browse all categories