Raycaster: Get ID of individual geometries of a mergeBufferGeometry

by MichaelJendryke

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as _ from "https://threejs.org/build/three.module.js";
import {BufferGeometryUtils} from "https://threejs.org/examples/jsm/utils/BufferGeometryUtils.js";

let scene = new _.Scene();
let camera = new _.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 10);
let renderer = new _.WebGLRenderer();
renderer.setClearColor(0x202020);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let geoms = [];
let c = new _.Color();

for (let i = 0; i < 3; i++){
  let cellID = i + 1000 
	let g = createHex(cellID); 
  g.translate(-3 + i*3, 0, 0);
  geoms.push(g);
}

let geom = BufferGeometryUtils.mergeBufferGeometries(geoms);

let mat = new _.MeshBasicMaterial({vertexColors: true, wireframe: true});

let mesh = new _.Mesh(geom, mat);
scene.add(mesh);

window.addEventListener( 'mousedown', getInstanceId, false );

let raycaster = new _.Raycaster();
let mouse = new _.Vector2();
let intersects;

function getInstanceId(event){
	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
	raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(mesh);
  if (intersects.length > 0){
  	let o = intersects[0];
    let instIdx = Math.floor(o.faceIndex / 4);
    console.log("instanceId is " + instIdx);
   
    
    const idAttribute = o.object.geometry.getAttribute( 'id' );
    const index = o.object.geometry.index;
    const vertexIndex = index.getX( o.face.a );
    const id = idAttribute.getX( vertexIndex );
    console.log('id: ', id)
  }
}

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
});


function createHex(cellID){
	let pts = [];
  let baseVec = new _.Vector3(1, 0, 0);
  let axis = new _.Vector3(0, 0, 1);
  let angleStep = Math.PI / 3;
  c.set(Math.random() * 0x888888 + 0x888888);
  let col = [];
  
  for(let i = 0; i < 6; i++){
  	pts.push(new _.Vector3().copy(baseVec).applyAxisAngle(axis, angleStep *...