Pointer events don't work if using attach="index" on bufferGeometry

[javve]

I'm using an orthographic camera to visualise a 2d shape (a square in the example but it should support polygons as well).

But the problem is that as soon as I add indexes to my indicies the pointer events stop working.

Here is the example code with both a working example without index and a broken one with index https://codesandbox.io/s/pointer-actions-with-indices-xt3f7k?file=/src/App.js

My guess is that I'm missing something obvious but I'm not that experienced with 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>
  );
}

I've tried googling but can't find info about pointer events associated to bufferGeometry.

[jonybekov]

@drcmda @gsimone @CodyJasonBennett I'm facing the same issue. Any ideas?

[GibsDev]

Also experiencing this, and looking for potential solutions.

[GibsDev]

I figured it out!

I think the bufferAttribute class/component must be equivalent to the float32BufferAttribute class/component. So when you specify a <bufferAttribute /> component, it's equivalent to using a <float32BufferAttribute /> component.

While observing a standard plane mesh for comparison, I could see that the index property was using a Uint16BufferAttribute instance. So the solution is to make sure to use a <uint16BufferAttribute /> for the index attachment.

So something like this:

<mesh
    onPointerOver={onPointerOver}
    onPointerOut={onPointerOut}
    onPointerDown={onPointerDown}
    onPointerUp={onPointerUp}
    onPointerMove={onPointerMove}
>
    <bufferGeometry >
        <bufferAttribute
            attach="attributes-position"
            array={vertices}
            count={vertices.length / 3}
            itemSize={3}
        />
        <uint16BufferAttribute
            attach="index"
            array={indices}
            count={indices.length}
            itemSize={1}
        />
        <bufferAttribute
            attach="attributes-uv"
            array={uvs}
            itemSize={2}
            count={4}
        />
    </bufferGeometry>
    {/* material */}
</mesh>

You can also replace the <bufferAttribute /> components with <float32BufferAttribute /> components if you want to be more technically accurate to the plane mesh, but it seems like they function the same.

Also I created the indices array using a Uint16 array:

vertices: new Float32Array([
    ...cornerPoints[0], // Top left
    ...cornerPoints[1], // Top right
    ...cornerPoints[2], // Bottom right
    ...cornerPoints[3], // Bottom left
]),
indices: new Uint16Array([
    2, 1, 0,
    0, 3, 2
]),
uvs: new Float32Array([
    0, 1,
    1, 1,
    1, 0,
    0, 0
])