Javascript Aframe-在实体中克隆object3D

使用a-frame，我加载了一个

obj

模型，该模型使用

加载了大约114个人物网格。然后，我想在该阵列中找到一个特定的网格，然后在整个场景中多次克隆该网格。使用简单的旧three.js，我可以用最少的努力来完成这项工作，但我似乎找不到在

结构中完成这项工作的方法。我已经尝试了

this.el.sceneEl.appendChild（）

，但是错误地说

参数1不是节点

；我还尝试了

this.el.sceneEl.add（）

，但尝试添加一个没有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);
            }
        }
   }
});

AFRAME.registerComponent（'people'{
模式：{
samplePerson:{default:{}}
},
init：函数（）{
var el=this.el；
//在加载模型时侦听
el.sceneEl.addEventListener（'model-load'，this.loadPersonModel.bind（this））；
},
loadPersonModel:函数（）{
//从object3D更新所有网格，object3D由114个子网格组成
this.el.object3DMap.mesh.children.forEach（函数（obj）{
obj.material.color=新的三种颜色（0xff0000）；
obj.visible=false；
});
//获取一个我们将在各地实例化的示例人员
this.data.samplePerson=this.el.object3D.getObjectByName（“人”）；
//在整个场景中克隆十个人
对于（变量i=0；i<10；i++）{
console.log（this.data.samplePerson）；
if（this.data.samplePerson）{
var clone=this.data.samplePerson.clone（）；
clone.visible=true；
//随机定位对象
clone.position.x+=Math.random（）*10；
克隆位置y+=0.01；
clone.position.z=-300+Math.random（）*25；
//将对象添加到场景中
this.el.sceneEl.appendChild（克隆）；
}
}
}
});

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>

---

我将分两步来解决这个问题。首先，加载模型并将其隐藏（或者理想情况下将其从场景中完全移除）。第二，有一个或多个额外的实体提取他们需要的对象部分：

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

---

对

模型子集的调用非常好

组件…非常干净。如果我想克隆

n

人，我是否应该设置一个新组件来获取

的

id

并克隆

n

人？此外，在这个新组件中，您是否建议同时获取

obj模型的
id
，并在实体全部创建后将其完全删除？您是否提前知道名称列表？您可以创建一个组件，该组件从名称列表创建子实体。您的模式可能是
{name:{default:[]}
，然后是
模型子集创建者=“name:person1，person2，person3；”
。我会测试删除模型-可能不太重要。这很有效：
，但当我在组件中尝试以下操作时，
var standingPerson=document.querySelector（“#standingPerson”）；这名儿童（站立的人）；statingPerson.setAttribute（'position'，'10'）它不会将对象附加到场景中。关于如何使用随机位置反复克隆此模型子集，您有什么想法吗？您的代码看起来不错。我最后一条评论中的链接包括随机位置。如果这不起作用，我认为您需要设置一个Codepen或JSFIDLE演示。
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 () { /* ... */ }
});