title: Cloning entities in a-frame
body: <p>I am trying to create multiple clones of a gltf model in loop and distribute them</p>
  
  <p>The original model is referred here - </p>
  
  <pre><code>&lt;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 "&gt;&lt;/a-entity&gt;
  </code></pre>
  
  <p>and I am trying to create multiple copies in a component called model-subset - </p>
  
  <pre><code>&lt;a-entity model-subset="target: #orca; name: ORCA3DS;"&gt;&lt;/a-entity&gt;
  </code></pre>
  
  <p>The component code is as follows - </p>
  
  <pre><code>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 &lt; 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);   
     });    
    }  
  });
  </code></pre>
  
  <p>However, only one clone gets created instead of ten. Is it that I need to listen for some event before I can iterate in the loop? </p>