将鼠标悬停在其顶部的 <h1> 上时，画布未捕获鼠标位置答案

【问题标题】：Canvas not capturing mouse position when hovered over an <h1> on top of it将鼠标悬停在其顶部的 <h1> 上时，画布未捕获鼠标位置
【发布时间】：2020-12-27 06:04:24
【问题描述】：

我正在使用 React Three Fiber 为注视鼠标的 3d 模型制作动画。这是在我的页面背景中创建一个画布元素。我有几个 div 和 h1s 在它上面分层，每当我的鼠标悬停在 divs/h1s 上时，画布就会冻结，直到我将鼠标移出它为止。这会导致看起来不连贯的动画。我该如何纠正这个问题？

这是我的 React 组件：

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>
  );
}

【问题讨论】：

我认为您需要将pointer-events:none 添加到重叠元素中，这样它们就不会阻止鼠标事件到达画布。

标签： javascript reactjs animation three.js react-three-fiber

【解决方案1】：

您需要为您的 <h1> 和 <div>s 分配一个特殊的 CSS 规则，以便它们不会捕获指针事件：

h1 {pointer-events: none;}

这意味着元素永远不是指针事件的目标，因此mousemove 事件有点“传递”到它下面的元素。见the MDN docs for further description。

【讨论】：

但是如果 h1 包含一个链接，我需要能够接受指针事件吗？
然后可以将pointer-events: auto添加到子<a>锚标签中。