克隆框架中的实体

时间:2018-11-05 13:42:12

标签: three.js aframe

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

此处引用原始模型-

<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);   
   });    
  }  
});

但是,只能创建一个克隆,而不是十个。我需要在循环中进行迭代之前监听一些事件吗?

1 个答案:

答案 0 :(得分:0)

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

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);   
   });    
  }  
});