Javascript 当鼠标悬停在<；上时，画布未捕获鼠标位置；h1>；最重要的是

我用React Three Fiber制作了一个看着鼠标的3d模型的动画。这是在我的页面背景中创建画布元素。我在上面有几个div和h1层，每当我的鼠标悬停在div/h1上时，画布就会冻结，直到我将鼠标从中取出。这将产生一个看起来起伏的动画。我如何纠正这一点

这是我的反应组件：

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

函数模型（）{
const{camera，gl，mouse，intersect，viewport}=usetree（）；
const{nodes}=useLoader（GLTFLoader，'/scene.glb'）；
const canvasRef=useRef（null）；
const group=useRef（）；
useFrame（{mouse}）=>{
常数x=（mouse.x*viewport.width）/1200；
常量y=（mouse.y*viewport.height）/2；
组当前旋转y=x+3；
});
返回(
);
}

您需要为

和

分配一个特殊的CSS规则，以便它们不会捕获指针事件：

h1{指针事件：无；}

---

这意味着元素永远不是指针事件的目标，因此

mousemove

事件排序“通过”到它下面的元素。请参阅。

我认为您需要将

指针事件：无

添加到重叠元素中，以便它们停止阻止鼠标事件到达画布。但是如果h1包含链接，我需要能够接受指针事件，该怎么办？然后您可以将

指针事件：自动

添加到子

锚定标记中。