Aframe-在实体中克隆object3D

Question

使用a-frame，我使用<a-assets>加载obj模型，该模型包含约114个人员网格。 然后，我想在该数组中找到特定的网格，然后在整个场景中多次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

我将分两个步骤进行处理。 首先，加载模型并将其隐藏（或者理想情况下将其完全从场景中删除）。 其次，拥有一个或多个额外的实体来提取所需对象的一部分：

<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组件：

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 () { /* ... */ }
});