0

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

这是我的反应组件：

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

1 回答 1

1

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

h1 {pointer-events: none;}

这意味着元素永远不会是指针事件的目标，因此mousemove事件会“传递”到它下面的元素。有关详细说明，请参阅MDN 文档。

于 2020-09-08T20:47:16.953 回答