pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js
https://docs.pmnd.rs/react-three-fiber
MIT License
26.98k stars 1.54k forks source link

R3F raycast hits wrong object #3236

Open MiguelG97 opened 4 months ago

MiguelG97 commented 4 months ago

this is the code to generate buffergeometries:

  const boxList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  const depth = 0.1;
  const width = 0.017;
return
  <Splat
    position={[0, 0, 0]}
    src={URL}
  />

  <CameraControls
    makeDefault
  />
  {boxList.map((i) => {
    const v1 = [-0.075 + i * width, 0.06, 0];
    const v2 = [-0.075, 0.06, -depth];
    const v3 = [
      -0.075 + (i + 1) * width,
      0.06,
      -depth,
    ];
    const v4 = [
      -0.075 + (i + 1) * width,
      0.06,
      0,
    ];

    const v5 = [v1[0], 0.15, v1[2]];
    const v6 = [v2[0], 0.15, v2[2]];
    const v7 = [v3[0], 0.15, v3[2]];
    const v8 = [v4[0], 0.15, v4[2]];

    const vertices = new Float32Array([
      //bottom
      ...v1,
      ...v2,
      ...v3,

      ...v3,
      ...v4,
      ...v1,

      //top
      ...v5,
      ...v6,
      ...v7,

      ...v7,
      ...v8,
      ...v5,

      //north
      ...v1,
      ...v4,
      ...v5,

      ...v4,
      ...v5,
      ...v8,

      //east
      ...v1,
      ...v2,
      ...v5,

      ...v5,
      ...v6,
      ...v2,

      //south
      ...v2,
      ...v3,
      ...v6,

      ...v6,
      ...v7,
      ...v3,

      //west
      ...v3,
      ...v4,
      ...v7,

      ...v7,
      ...v8,
      ...v4,
    ]);

    return (
      <mesh
        key={i}
        onPointerMove={(e) => {
          console.log(e.object.id);
        }}
      >
        <bufferGeometry>
          <bufferAttribute
            attach="attributes-position"
            array={vertices}
            count={vertices.length / 3}
            itemSize={3}
          />
        </bufferGeometry>
        <meshBasicMaterial
          transparent={true}
          opacity={0.1}
          color={0xff0000}
          side={2}
        />
      </mesh>
    );
  })}
  <Preload all />

Now the issue is that when hovering the mouse over the same object, it returns different Ids!!

enter image description here

How can I intersect the buffer geometries using the raycast in R3F? Regards

wangbo122 commented 3 months ago

Try binding the onclick event directly to the geometry