Question

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

我尝试了以下内容 -

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

同样，evt.detail.intersection.point仅提供相同的x，y和z坐标，无论我在何处单击模型。

这是一个错误 - 每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。

Click事件不提供gltf模型

1 个答案: