0

I'm using React Three Fiber to animate a 3d model looking at the mouse. This is creating a canvas element in the background of my page. I have a few divs and h1s layered on top of it, and whenever my mouse hovers over the divs/h1s, the canvas freezes, until I mouse out of it. This results in a choppy looking animation. How do I rectify this?

This is my React Component:

function Model() {
  const { camera, gl, mouse, intersect, viewport } = useThree();
  const { nodes } = useLoader(GLTFLoader, '/scene.glb');
  const canvasRef = useRef(null);
  const group = useRef();

  useFrame(({ mouse }) => {
    const x = (mouse.x * viewport.width) / 1200;
    const y = (mouse.y * viewport.height) / 2;
    group.current.rotation.y = x + 3;
  });
  return (
    <mesh
      receiveShadow
      castShadow
      ref={group}
      rotation={[1.8, 40, 0.1]}
      geometry={nodes.HEAD.geometry}
      material={nodes.HEAD.material}
      dispose={null}></mesh>
  );
}
charlieyin
  • 371
  • 6
  • 16
  • I think you're going to need to add `pointer-events:none` to the overlapping elements so they'll stop blocking mouse events from reaching the canvas. – Daniel Beck Sep 08 '20 at 20:18

1 Answers1

1

You'll need to assign a special CSS rule to your <h1> and <div>s so that they don't capture pointer events:

h1 {pointer-events: none;}

This means the element is never the target of pointer events, so the mousemove event sort of "passes through" to the element below it. See the MDN docs for further description.

M -
  • 26,908
  • 11
  • 49
  • 81