单击事件不提供 gltf 模型中的网格名称

Question

有没有一种简单的方法可以找出在 gltf 模型中单击的子网格的名称？我在 aframe 0.8.0.

我尝试了以下 -

HTML 来源：

  <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>

组件来源：

    // 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;

          }
          });
        }

      }
    });

但是，它只提供了第一个子网格的名称。同样，evt.detail.intersection.point 只提供相同的 x、y 和 z 坐标，而不管我在模型上的哪个位置单击。

我的要求是能够找出在 gltf 模型中单击了哪个子网格

Answer 1

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

这是一个错误 — 根据 issue #3467 更新到 A-Frame 0.8.2。在 A-Frame 0.8+ 中也应该不需要 raycaster-autorefresh。

对于从附加到被单击节点的节点获取名称的剩余问题，请考虑以下代码：

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));
});

以上所有内容都会给出被单击的网格周围的节点名称。如果没有演示，我无法猜测您希望点击其中的哪些，或者存在哪些节点，所以我认为您需要从那里进行试验。另见 docs for THREE.Object3D.

单击事件不提供 gltf 模型中的网格名称

Click event does not provide the mesh name in gltf model

javascript

dom-events

aframe

gltf