Bringing webgl to react
summary
A React reconciler called react-three-fiber translates JSX into three.js instances so you declare scenes instead of writing imperative setup; a minimal proof used ~169 lines to recreate older bindings, a cube example drops ~70 lines of three.js boilerplate to less than half with hooks like useFrame and a single createInstance function. The stack mixes DOM and WebGL (HTML inside canvas), runs demos with physics (cannon.js), postprocessing, VR, and even sustains scenes of up to ~1,000,000 moving cubes at 60fps; a small game and a Blender-like web CAD already work.
AI-written summary · about
chapters (8)
- 0:00Start
- 4:03React 3 Renderer
- 11:36Responsiveness
- 14:29Performance and Mixing 3d with Html
- 15:35Performance
- 20:25Orbit Controls
- 27:11Blender
- 29:15What Resources Would You Recommend to Someone Wanting To Learn React Spring
related talks
36mBlasting React into Space: Building fluid interface swith React and WebGL
18mReact and WebGL
10m3D Models on the Web with React Three Fiber
14mEffortless 3D with react-three-fiber
21mBreaking out of the confines: making games in React
37mCreating 3D Experiences with React
27m3D graphics in React & React Native using React-three-fiber
33mIntroduction to 3D on the Web - Creative Coding with React and Three.js