Aframe - エンティティ内のオブジェクト3Dのクローン

Question

フレームを使用して、<a-assets>を使用して約114人のメッシュを含むobjモデルにロードします。その配列内の特定のメッシュを見つけたいとしたら、何度もシーン全体で何度もclone()を実行します。普通の古いthree.jsを使用して私は最小の努力でこれを行うことができますが、私は<a-entity>構造でこれを行う方法を見つけることができないようです。私はthis.el.sceneEl.appendChild()を試しましたが、そのエラーはparameter 1 is not a nodeと言っています。私もthis.el.sceneEl.add()を試しましたが、そのエラーはTrying to add an element that doesn't have an object3Dで出ています。この問題を解決するための最良のアプローチに関する考えはありますか？

people.js

AFRAME.registerComponent('people', { 
    schema: { 
     samplePerson: {default: {}} 
    }, 

    init: function() { 
     var el = this.el; 

     // Listen for when the model is loaded 
     el.sceneEl.addEventListener('model-loaded', this.loadPersonModel.bind(this)); 
    }, 

    loadPersonModel: function() { 

     // Update all meshes from the object3D which is made up with 114 child meshes 
     this.el.object3DMap.mesh.children.forEach(function (obj) { 
      obj.material.color = new THREE.Color(0xff0000); 
      obj.visible = false; 
     }); 

     // Get a sample person for which we will instantiate all over the place 
     this.data.samplePerson = this.el.object3D.getObjectByName("people_silhouette73"); 

     // Clone ten people throughout the scene 
     for (var i = 0; i < 10; i++) { 
      console.log(this.data.samplePerson); 
      if (this.data.samplePerson) { 
       var clone = this.data.samplePerson.clone(); 
       clone.visible = true; 

       // Randomly position the object 
       clone.position.x += Math.random() * 10; 
       clone.position.y += 0.01; 
       clone.position.z = -300 + Math.random() * 25; 

       // Add the object to the scene 
       this.el.sceneEl.appendChild(clone); 
      } 
     } 
    } 
}); 

index.htmlを

<a-scene> 
    <a-assets> 
     <a-asset-item id="people-obj" src="./assets/obj/silhouette_people_lowpoly_obj.obj" 
        name="testname"></a-asset-item> 
    </a-assets> 
    <a-entity obj-model="obj: #people-obj;" obj-name="person" people></a-entity> 
    </a-entity> 
</a-scene> 

Answer 1

私は2つの段階でこれをアプローチでしょう。まず、モデルをロードして非表示にします（または、理想的にはモデルをシーン全体から削除します）。第二に、彼らが必要とするオブジェクトの部分を抽出一個の以上の余分なエンティティを持っている：

<a-entity obj-model="obj: #people-obj;" id="group" visible="false"></a-entity> 
<a-entity position="0 0 0" 
      model-subset="target: #group; 
         name: person1;"></a-entity> 
<a-entity position="3 0 0" 
      model-subset="target: #group; 
         name: person2;"></a-entity> 
<a-entity position="6 0 0" 
      model-subset="target: #group; 
         name: person3;"></a-entity> 

その後model-subsetコンポーネント定義： `モデルsubset`コンポーネント上

AFRAME.registerComponent('model-subset', { 
    schema: { 
    target: {default: '', type: 'selector'}, 
    name: {default: ''} 
    }, 
    init: function() { 
    var el = this.el; 
    var data = this.data; 
    data.target.addEventListener('model-loaded', function (e) { 
     var model = e.detail.model; 
     var subset = model.getObjectByName(data.name); 
     el.setObject3D('mesh', subset.clone()); 
    }); 
    }, 
    update: function() { /* ... */ }, 
    remove: function() { /* ... */ } 
});