On hover of a 3d model | highlight

Questions
,
2

Based on the other post I’m assuming you’re using R3F - which makes this part actually quite a bit way easier than vanilla threejs.

In R3F you can add pointer / mouse events the same you’d add it in normal React, ex.:

const Box = () => {
  const [shiny, setShiny] = useState(false);
  
  return (
    <mesh
      onPointerEnter={() => setShiny(true)}
      onPointerLeave={() => setShiny(false)}
    >
      <boxGeometry args={[ 1.0, 1.0, 1.0 ]} />
      <meshPhongMaterial color={shiny ? 0xff00ff : 0x880088} />
    </mesh>
  );
};
2 Likes