Click event does not provide the mesh name in gltf model

Question

Is there a simple way to figure out the name of the child mesh that was clicked in a gltf model? I am on 0.8.0 of aframe.

I tried the following -

HTML source:

  <a-scene embedded="" raycaster-autorefresh cursor="rayOrigin: mouse">
                <a-assets>
                    <a-asset-item id="male" src="../images/trying/scene.gltf"> 
                    </a-asset-item>         
                </a-assets>

 <a-entity id="camera" camera="" position="0 1.6 0" look-controls wasd-controls>
 </a-entity> 

 <a-entity gltf-model="#male" position="-14 -30 -125" rotation= "0 160 0" material-displacements></a-entity> 

</a-scene>

Component source:

    // first component
AFRAME.registerComponent('raycaster-autorefresh', {
  init: function () {
    var el = this.el;
    this.el.addEventListener('object3dset', function () {
      var cursorEl = el.querySelector('[raycaster]');
      cursorEl.components.raycaster.refreshObjects();
    });
  }
});


// second component
var lastIndex = -1;
    var colors = ['red', 'green', 'blue', 'black'];
         AFRAME.registerComponent('material-displacements', {
         init: function () {   
            this.el.addEventListener('object3dset', () => { 
              this.el.addEventListener('click', (evt) => {
              console.log(evt.detail.intersection.object.name);
              });
            });   
          },
    update: function () {
        lastIndex = (lastIndex + 1) % colors.length;
        console.log(lastIndex);
        this.material  = new THREE.MeshStandardMaterial({color: colors[lastIndex]});

        const mesh = this.el.getObject3D('mesh');
        console.log("mesh is", mesh);
        console.log("material is", this.material);

        if (mesh) {
          mesh.traverse((node) => {

            if (node.name==="bed_Wood_0") {
            if (node.isMesh) node.material = this.material;

          }
          });
        }

      }
    }); 

But, it only provides the name of the first child mesh. Similarly, evt.detail.intersection.point only provides the same x, y and z coordinates irrespective of where I click on the model.

My requirement is to be able to figure out which child mesh was clicked inside the gltf model

Answer 1

Similarly, evt.detail.intersection.point only provides the same x, y and z coordinates irrespective of where I click on the model.

This is a bug — update to A-Frame 0.8.2 per issue #3467. There should also be no need for raycaster-autorefresh in A-Frame 0.8+.

For the remaining issue of getting names from nodes attached to the one that was clicked, consider this code:

this.el.addEventListener('click', (evt) => {
  var object = evt.detail.intersection.object;

  // name of entity to which component is attached
  console.log(this.el.getObject3D('mesh').name);

  // name of object directly clicked
  console.log(object.name);

  // name of object's parent
  console.log(object.parent.name);

  // name of object and its children
  object.traverse((node) => console.log(node.name));
});

All of the above will give names of nodes around the mesh that was clicked. Without a demo I can't guess which of them you expect to have clicked, or what nodes exist, so I think you'll need to experiment from there. Also see docs for THREE.Object3D.