1

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 モデル内でクリックされたかを把握できるようにすることです

4

1 に答える 1