Jhonny Freitas

there You go.js

// this is basically the function i've written not long ago - yours may differ
// from mine but the most important thing is to set the name for the component that is imported/loaded

// Note that instead of name there are values like position, scale material name, color hex code and basically everything
// that the imported objects' array contains

var load_consecutive = function(objectFetch, nameFetch, scaleFetch, positionFetch, materialFetch) {
  loader.load(objectFetch, function(object) {
    object = new THREE.Mesh(object, materialFetch);
    object.material.needsUpdate = true;
    object.position.set(0, positionFetch, 0);
    object.scale.set(scaleFetch, scaleFetch, scaleFetch);
    object.name = nameFetch;  // here You set the name for the part of the model you wish to name/choose/see the name

    raycastArray.push(object);
    group_main.add(object);
  });
}


let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let raycastArray = [];
let objectChosen = '';


function onDocumentMouseDown(event) {
  event.preventDefault();
  mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
  mouse.y = -(event.clientY / renderer.domElement.height) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(raycastArray);
  if (intersects.length > 0) {
    console.log(intersects[0].object.name); // here You have the console.log function that return the name.
    objectChosen = intersects[0].object.name;
  }
}
document.addEventListener('mousedown', onDocumentMouseDown, false);