Effortless 3D with react-three-fiber
summary
Claim: react-three-fiber replaces verbose threejs setup so a React app renders 3D with a single <Canvas> and JSX, handling renderer, scene and loop for you. Examples show a blue cube, sphere and torus, orbit controls for camera interaction, importing an iPhone 16 glTF model via gltfjsx-generated code, and adding physics with Rapier so a cube falls under gravity and a clicked ball receives an impulse.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:31React Three Fiber basics
- 2:54Core 3JS elements
- 3:59Vanilla 3JS code vs React Three Fiber
- 5:03Creating 3D objects
- 6:50Position scale rotation
- 8:18Interactivity with state
- 9:25Animating with useFrame
- 9:47Importing GLTF models
- 11:17Adding physics
- 12:42Key takeaways
related talks
10m3D Models on the Web with React Three Fiber
27m3D graphics in React & React Native using React-three-fiber
37mCreating 3D Experiences with React
45mMaking Your Website Stand Out With React Three Fiber
32mBringing webgl to react
33mIntroduction to 3D on the Web - Creative Coding with React and Three.js
21mBreaking out of the confines: making games in React
36mBlasting React into Space: Building fluid interface swith React and WebGL