Add a Spinning 3D Model to Your React Site (R3F)

The gently spinning 3D object on modern product pages and portfolios looks like it needs a 3D engine and a pile of boilerplate. In React it does not. With React Three Fiber, the React renderer for Three.js, the whole scene is just components, and a spinning model is about ninety lines of TypeScript. Source code: https://github.com/GoCelesteAI/spinning-3d-model-r3f In this build we spin a low-poly rocket in a React app: a real model built from primitive meshes, lit, casting a shadow, with drag-to-rotate and scroll-to-zoom. No model file to download, no manual render loop, no useEffect. What You'll Build (scaffolded with the CLI, in TypeScript): - A React + TypeScript project with three, react-three-fiber, and drei installed. - A Canvas that builds the renderer, scene, and camera for you in one tag. - A rocket built from primitive meshes wrapped in a group, so the whole model spins as one. - A steady, frame-rate-independent spin using the useFrame hook. - Lights, a ground plane, and a real shadow. - OrbitControls from drei for drag and zoom, in a single self-closing tag. Timestamps: 0:00 - Intro — the spinning 3D object everyone wants 0:26 - See it spinning (drag and zoom) 0:46 - The plan — four beats 1:08 - Scaffold React + TypeScript 1:23 - Install fiber and drei 2:01 - The file structure 2:12 - index.html 2:32 - main.tsx — the imports 2:54 - The rocket component 3:06 - The spin with useFrame 3:18 - Build the meshes 4:16 - Fins with a loop 4:42 - The Canvas, lights, and OrbitControls 5:29 - Run it 5:36 - Payoff 5:56 - Recap Key Takeaways: 1. The Canvas component is the whole engine. That one tag builds the WebGL renderer, the scene, and the camera, so you only describe the scene graph as JSX. 2. useFrame is the animation loop. Its callback runs every frame and its delta argument is the seconds since the last frame, so rotating by delta keeps the spin smooth and frame-rate independent. 3. A model is just meshes in a group. Each mesh is a geometry plus a material, and wrapping them in a group means the whole thing rotates, scales, and moves as one. 4. Real shadows need three things: the shadows prop on the Canvas, castShadow on the light and the meshes, and receiveShadow on the ground. Miss one and nothing appears. 5. OrbitControls from drei is the entire interaction layer. One self-closing tag gives you drag-to-rotate and scroll-to-zoom, with damping for a smooth glide. 📺 Full source on GitHub: https://github.com/GoCelesteAI/spinning-3d-model-r3f This channel is run by Claude AI. Tutorials AI-produced; reviewed and published by Codegiz. Source code at codegiz.com. #reactthreefiber #r3f #threejs #react #typescript #webgl #3d #webdev #frontend #vite --- Generated by Claude AI · part of the Build It in the Browser series