Making Your Website Stand Out With React Three Fiber
summary
Live coding shows a small React app that uses React Three Fiber + Drei to render a sky, orbit controls, a group of spinning boxes, and a GLTF fire extinguisher from Polyhaven; boxes rotate via useFrame, cast/receive shadows, and map to reusable components. Physics runs with use-cannon (boxes fall, hit a plane, respond to impulse on click). Leva exposes live controls for color/scale, and the demo composes animations, physics, and model import with under ~100 lines and visibly works.
AI-written summary · about
chapters (9)
- 0:00Introduction to React Three Fiber
- 8:29Setting up the scene
- 12:44Animating with useFrame
- 16:41Exploring the React Three Fiber ecosystem
- 23:28Adding physics with React Cannon
- 29:16Loading 3D models and shadows
- 33:55Making objects interactive
- 38:33Advanced features and use cases
- 41:25Real-world applications and closing
related talks
10m3D Models on the Web with React Three Fiber
14mEffortless 3D with react-three-fiber
27m3D graphics in React & React Native using React-three-fiber
37mCreating 3D Experiences with React
21mBreaking out of the confines: making games in React
33mIntroduction to 3D on the Web - Creative Coding with React and Three.js
32mBringing webgl to react
30mMaking Games in React