Project 14: 3D Model Loader

3D Engineer

Builds on these lessons

Step 1 of 2

Project

Loading a 3D Model

useGLTF loads an external .glb model; since loading is asynchronous, it must be wrapped in a Suspense boundary.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

function Model() {
  const { scene } = useGLTF('/models/chair.glb');
  return <primitive object={scene} />;
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight intensity={0.8} />
      <Suspense fallback={null}>
        <Model />
      </Suspense>
    </Canvas>
  );
}

← Previous Next →