Open MiguelG97 opened 2 months ago
three
@react-three/fiber
@react-three/drei
node
npm
yarn
The issue is that when hovering the mouse over the same buffer geometry mesh, it returns different Ids!!
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;
<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> );
})}
How can I intersect the buffer geometries using the raycast in R3F? Regards
three
version:@react-three/fiber
version:^8.16.2@react-three/drei
version:^9.105.4node
version:20.10.0npm
(oryarn
) version:10.2.3Problem description:
The issue is that when hovering the mouse over the same buffer geometry mesh, it returns different Ids!!![image](https://github.com/pmndrs/drei/assets/78984964/a432d6a8-1857-4b7c-a1be-251bffb75c49)
Relevant code:
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;
<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, ];
})}
Suggested solution:
How can I intersect the buffer geometries using the raycast in R3F? Regards