React Three Fiber - 如果使用索引，bufferGeometry 上的指针事件不起作用

Question

我正在 React Three Fiber 中使用正交相机来可视化 2d 形状（示例中为正方形，但它也应该支持多边形）。

但问题是，一旦我将

indexes

添加到我的索引中，指针事件就停止工作。

这里是示例代码，其中包含没有

index

的工作示例和带有

index

的损坏示例 https://codesandbox.io/s/pointer-actions-with-indices-xt3f7k?file=/src/App.js

我的猜测是我错过了一些明显的东西，但我对 Three.js/React Fiber 没有那么丰富的经验。

export default function App() {
  const [color, setColor] = useState("#33ffaa");

  const positions = new Float32Array(
    [
      [0, 0, 1],
      [100, 0, 1],
      [100, 100, 1],
      [0, 100, 1],
    ].flat()
  );

  const indices = new Uint32Array(
    [
      [0, 1, 2],
      [0, 2, 3]
    ].flat()
  );

  const onPointerEnter = () => {
    setColor("#9933ff");
  };
  const onPointerLeave = () => {
    setColor("#33ffaa");
  };

  return (
    <Canvas flat={true} orthographic={true}>
      <mesh
        onPointerEnter={onPointerEnter}
        onPointerLeave={onPointerLeave}
        position={[-100, -100, 0]}
      >
        <bufferGeometry>
          <bufferAttribute
            attach="index"
            array={indices}
            count={indices.length}
          />
          <bufferAttribute
            attach="attributes-position"
            array={positions}
            count={positions.length / 3}
            itemSize={3}
          />
        </bufferGeometry>
        <meshBasicMaterial color={color} side={THREE.DoubleSide} />
      </mesh>
    </Canvas>
  );
}

我尝试过谷歌搜索，但找不到有关与 bufferGeometry 相关的指针事件的信息。

Answer 1

GitHub 上有一个讨论，我在其中找到了此问题的解决方案：https://github.com/pmndrs/react- Three-Fiber/discussions/2956#discussioncomment-9110309