Creating 3D Experiences with React
summary
Argues that web 3D is approachable, then shows a concrete pipeline: model in Blender, export to glTF 2.0 (binary .glb), optimize with Draco compression, and load into a React app using react-three-fiber + drei. Builds a rotating PS1-style game case with useTexture, meshPhysicalMaterial, contact shadows, OrbitControls, useFrame animation, and postprocessing pixelation plus an FPS limiter; the demo runs in desktop and mobile browsers, while large textures, real-time shadows or physics noticeably hurt performance.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 2:31Blender and why use it
- 6:27Exporting 3D models to web with GLTF
- 8:58Loading 3D model in React
- 10:04Lighting and shadows in scene
- 12:31Textures for 3D model
- 16:01Animating with React Three Fiber
- 21:27Retro effects with post-processing
- 24:02Finalizing 3D demo
- 25:27Q&A
related talks
10m3D Models on the Web with React Three Fiber
33mIntroduction to 3D on the Web - Creative Coding with React and Three.js
29mFrom Blender to the Web - the Journey of a 3D Model
27m3D graphics in React & React Native using React-three-fiber
14mEffortless 3D with react-three-fiber
36mBlasting React into Space: Building fluid interface swith React and WebGL
26mFrom Blender to the Web - the Journey of a 3D Model
07m3D Components in React Application