Three.js & WebGL

Build interactive 3D web experiences with Three.js. Set up scenes, cameras, meshes, materials, lights, and animations; handle textures and loaders; and optimize WebGL/WebGPU rendering for product configurators, data viz, and immersive sites.

A comprehensive Three.js skill for 3D web development. It scaffolds scenes with cameras, lights, and controls, builds and textures meshes, drives animations, loads GLTF assets, and tunes WebGL/WebGPU performance — useful for product configurators, 3D visualizations, and immersive web experiences.

When to use

Use when building interactive 3D scenes, WebGL/WebGPU apps, product configurators, 3D data visualizations, or immersive web experiences — anything involving Three.js scenes, cameras, meshes, materials, lights, animations, textures, or loaders.

Examples

Product configurator

Build an interactive 3D product viewer

Build a Three.js product configurator that loads a GLTF model, lets users swap materials and colors, and has orbit controls with smooth damping

Optimize a heavy scene

Cut draw calls and improve FPS

My Three.js scene drops to 20 FPS with hundreds of objects — show me how to use instancing and LOD to get back to 60 FPS