Samer Noufal
All Resources
Code SnippetWeb Dev2026-03-02

Load 3D Models in React with Three.js

Load and display glTF/GLB 3D models in a React application using React Three Fiber and the useGLTF hook. Includes orbit controls, lighting, and Suspense loading.

typescript
import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF, Environment } from '@react-three/drei';
import { Suspense } from 'react';

function Model({ url }: { url: string }) {
  const { scene } = useGLTF(url);
  return <primitive object={scene} scale={1} />;
}

function LoadingFallback() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="#666" wireframe />
    </mesh>
  );
}

export default function ModelViewer() {
  return (
    <Canvas camera={{ position: [0, 2, 5], fov: 50 }}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} />
      <Environment preset="studio" />
      <Suspense fallback={<LoadingFallback />}>
        <Model url="/models/product.glb" />
      </Suspense>
      <OrbitControls />
    </Canvas>
  );
}

How It Works

React Three Fiber (R3F) brings Three.js into the React component model. The useGLTF hook from drei handles loading and caching 3D models:

  1. Canvas sets up the Three.js renderer, scene, and camera
  2. useGLTF loads and caches the .glb/.gltf file, returning the scene graph
  3. primitive renders the loaded scene directly into the R3F scene
  4. Suspense shows a fallback while the model loads asynchronously

glTF vs Other Formats

  • glTF/GLB: The recommended format for web 3D. Compact, fast to parse, supports PBR materials, animations, and scene hierarchy. GLB is the binary version (single file)
  • OBJ: Legacy format. No materials, no animations. Use only for simple geometry
  • FBX: Common in game engines but heavy for web. Convert to glTF before using in Three.js

Optimizing Models for Web

  • File size: Use Draco compression — useGLTF supports it automatically via drei
  • Polygon count: Keep under 100k triangles for smooth performance on mobile. Use tools like gltf-transform or Blender's Decimate modifier
  • Textures: Use KTX2/Basis compressed textures. Resize to the smallest dimensions that look acceptable
  • gltfjsx: Run npx gltfjsx model.glb to generate a typed React component from your model

Tips

  • Place model files in the /public folder so they're served as static assets
  • Use Environment from drei for realistic reflections without complex light setups
  • For product configurators, load separate parts as individual models and compose them in a group
  • Always wrap your model component in Suspense — loading is async and React needs a boundary
Three.jsReactglTFReact Three Fiber3D