From Blender to the Web - the Journey of a 3D Model
summary
Takes a Blender cupcake model through gltf 2.0 export (glb vs gltf, compression, include selected, apply modifiers), converts the file to JSX, and runs it inside a React canvas using react-three-fiber + drei. Shows orbit controls, contact shadows, swapping material colors at runtime, simple sine-wave animations via useFrame and useRef, and mentions accessibility controls. Live demo hits small build/runtime hiccups but ultimately renders the interactive, animated 3D model on the web.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 3:12Cupcake model in Blender
- 8:10Export to glTF
- 9:56React and Three.js setup
- 13:06Rendering in React
- 16:12Stage and contact shadows
- 17:15Orbit controls
- 17:58Dynamic model colors
- 21:50Animating with useFrame
- 26:42Final code breakdown
- 28:28Conclusion
related talks
26mFrom Blender to the Web - the Journey of a 3D Model
37mCreating 3D Experiences with React
10m3D Models on the Web with React Three Fiber
27m3D graphics in React & React Native using React-three-fiber
32mBringing webgl to react
14mEffortless 3D with react-three-fiber
36mBlasting React into Space: Building fluid interface swith React and WebGL
45mMaking Your Website Stand Out With React Three Fiber