3D graphics in React & React Native using React-three-fiber
summary
Shows that a single JSX codebase using react-three-fiber plus Expo and Three.js runs the same 3D scenes on web, iOS and Android (example repo and Play/App links provided). Demonstrates loading GLTF/OBJ models (one demo file ≈10MB), animating with the useFrame hook (runs on the JS thread so heavy per-frame updates cause jank), and swapping materials/textures. Builds include a streaming-app avatar demo and an air‑con product viewer; it works smoothly on web and iOS, while Android is hit-or-miss for complex animations.
AI-written summary · about
chapters (14)
- 0:00Introduction to 3D graphics
- 3:11Tools for cross-platform 3D
- 5:59Why React-three-fiber
- 8:27Building scenes and objects
- 10:36Animating 3D elements
- 12:00Using 3D models in React
- 13:26Challenges with mobile 3D
- 15:12Final thoughts on React 3D
- 17:33Q&A on 3D model formats
- 18:55Converting React web to React Native
- 20:27Performance and optimization
- 23:17Manipulating 3D objects
- 24:00Comparison with native engines
- 26:45Future of React Native 3D
related talks
10m3D Experiences in React Native With Expo-GL
14mEffortless 3D with react-three-fiber
37mCreating 3D Experiences with React
10m3D Models on the Web with React Three Fiber
45mMaking Your Website Stand Out With React Three Fiber
32mBringing webgl to react
20m3D and Canvas-Based Animations with Reanimated
29mFrom Blender to the Web - the Journey of a 3D Model