three.js - 在框架中克隆实体

Question

我正在尝试在循环中创建 gltf 模型的多个克隆并分发它们

原始模型参考here -

<a-entity id="orca" position="4 0 -40" gltf-model="#orca1" static-body animation="property: position.y; dir: alternate; dur: 1000; easing: easeInSine; loop: true; to: 0.5 "></a-entity>

我正在尝试在一个名为模型子集的组件中创建多个副本-

<a-entity model-subset="target: #orca; name: ORCA3DS;"></a-entity>

组件代码如下——

AFRAME.registerComponent('model-subset', {
  schema: {
    target: { default: '', type: 'selector' },
    name: { default: '' }
  },
  init: function() {
    var data = this.data;
    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);
    for (var i = 0; i < 10; i++) {
      var clone = subset.clone();
      clone.visible = true;
      clone.position.x += Math.random() * 5;
      clone.position.y += 0.5;
      clone.position.z = -20 + Math.random() * 20;
      el.setObject3D('clone', clone);   
   });    
  }  
});

但是，只会创建一个克隆而不是十个。是不是我需要在循环中迭代之前监听一些事件？

标签： three.jsaframe

Answer 1

弄清楚了。我将所有对象附加到同一个实体。每个对象都需要自己的实体。将组件代码修改为以下以使其工作 -

AFRAME.registerComponent('model-subset', {
  schema: {
    target: { default: '', type: 'selector' },
    name: { default: '' }
  },
  init: function() {
    var data = this.data;
    var el = this.el;
    var sceneEl = document.querySelector('a-scene');
    var data = this.data;
    data.target.addEventListener('model-loaded', function(e){
    var model = e.detail.model;
    var subset = model.getObjectByName(data.name);
    for (var i = 0; i < 10; i++) {
      var clone = subset.clone();
      var entity = document.createElement('a-entity');
      sceneEl.appendChild(entity);          
      clone.visible = true;
      clone.position.x += Math.random() * 5;
      clone.position.y += 0.5;
      clone.position.z = -20 + Math.random() * 20;
      entity.setObject3D('clone', clone);   
   });    
  }  
});