Open MiguelG97 opened 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
Try binding the onclick event directly to the geometry
this is the code to generate buffergeometries:
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