Project 15: Interactive Hover Box

3D Engineer

Builds on these lessons

Step 1 of 2

Project

Hover Without a Raycaster

react-three-fiber wires up raycasting for you — onPointerOver/onPointerOut fire automatically when the cursor crosses a mesh.

🎯 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 ClickableBox() {
  const [hovered, setHovered] = useState(false);
  return (
    <mesh
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  );
}

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

← Previous Next →