如何解决将画布悬停在其顶部的<h1>上时,其无法捕获鼠标位置
我正在使用React Three Fiber对看着鼠标的3D模型进行动画处理。这是在页面背景中创建一个canvas元素。我在其上面有几个div和h1,每当我的鼠标悬停在div / h1上时,画布就会冻结,直到我将鼠标移出它为止。这样会产生动荡的动画。我该如何纠正?
这是我的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>
);
}
解决方法
您需要为<h1>
和<div>
分配特殊的CSS规则,以使它们不捕获指针事件:
h1 {pointer-events: none;}
这意味着该元素永远不会是指针事件的目标,因此mousemove
事件类型是“传递”到其下面的元素的。参见the MDN docs for further description。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。