Three.js & React Three Fiber
Build 3D web experiences with Three.js and React Three Fiber. Creates scenes, lighting, materials, animations, physics simulations, and interactive 3D interfaces that run in the browser.
This skill helps you build 3D web applications using Three.js and its React wrapper, React Three Fiber (R3F). It generates scenes with proper lighting and materials, implements camera controls, creates GLSL shaders, adds physics with Rapier, and optimizes 3D rendering performance.
threejs 3d webgl react-three-fiber shaders
When to use
Use when building 3D product viewers, interactive data visualizations, WebGL games, architectural walkthroughs, or any immersive 3D experience that runs in the browser.
Examples
Product viewer
Create an interactive 3D product showcase
Build a 3D product viewer with orbit controls, environment lighting, material customization, and smooth camera transitions between views
Particle system
Create a performant GPU particle effect
Build a GPU-driven particle system with custom GLSL shaders that reacts to mouse movement with 10,000+ particles at 60fps