指针事件在错误的时间触发

Question

我运行遇到一个问题，鼠标悬停在我场景中的一个对象上会导致场景中的所有 onPointerOver 侦听器同时触发，有时是随机触发。我认为这是因为我将组件添加到场景的方式，但我不确定。

是什么导致了这种行为？这是我的代码示例，供参考。

我有一个这样的 SampleObject 构造函数，它采用 image 路径和 mouseOver 函数作为道具：

const SampleObject = ({ image, mouseOver }) => {
    const ref = useRef();
    const texture = useLoader(TextureLoader, image);
    return (<mesh ref={ref} onMouseOver={mouseOver}>
       <planeBufferGeometry attach="geometry" />
       <meshPhongMaterial attach="material" map={texture}/>
    </mesh>)
}
export default React.memo(SampleObject);

在渲染中，我使用 Suspense 加载它，因为它涉及加载图像。 onPointerOver 侦听器更新状态：

<Suspense fallback={null}>
    <SampleObject image={ images(`./image.png`).default } onPointerOver={() => {  setMiscState(true)  }} />
    <SampleObject image={ images(`./image.png`).default } onPointerOver={() => {  setMiscState(false)  }} />
</Suspense>

因此，当状态发生变化时，所有这些 SampleObject 组件都会重新渲染。这就是导致 onPointerOver 事件在错误时间触发的原因吗？

Answer 1

此问题出现在 react-three-fiber 的过时版本中。更新软件包以修复它。

否则，为防止出现此问题，请将每个对象封装在单独的 Suspense 包装器中：

[

<Suspense key='suspense1' fallback={null}>
    <SampleObject image={ images(`./image.png`).default } onPointerOver={() => {  setMiscState(true)  }} />
</Suspense>,

<Suspense key='suspense2' fallback={null}>
    <SampleObject image={ images(`./image.png`).default } onPointerOver={() => {  setMiscState(false)  }} />
</Suspense>

]

指针事件在错误的时间触发

Pointer events firing at the wrong time

three.js

reactjs

react-three-fiber