Project 10: Textured Surface Demo

3D Engineer

Builds on these lessons

Step 1 of 2

Project

Loading a Texture

drei's useTexture loads an image and returns a Three.js texture you can plug into a material's map property.

🎯 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 TexturedCard() {
  const texture = useTexture('/textures/brick.jpg');
  return (
    <mesh>
      <planeGeometry args={[2, 2]} />
      <meshStandardMaterial map={texture} />
    </mesh>
  );
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight intensity={0.8} />
      <TexturedCard />
    </Canvas>
  );
}

← Previous Next →