title: change position of gltf-model in a-frame scene using three.js
body: <p>I have gltf-model loaded to a-frame and I want to move it by y-axis by 20. I use this code:</p>
  
  <p>The problem appears in a-frame scene, actually the object is moved up (check shadows and scene inspector in "after" images), but it still displayed on it's previous position. It seems that the scene needs some kind of refresh. </p>
  
  <p><strong>The question is, how to move it properly with three.js code?</strong>
  <BR>
  BEFORE:
  <a href="https://i.stack.imgur.com/H4MW0.png" rel="nofollow noreferrer">BEFORE1</a>
  <a href="https://i.stack.imgur.com/gxOLw.png" rel="nofollow noreferrer">BEFORE2</a></p>
  
  <p><BR>
  AFTER:
  <a href="https://i.stack.imgur.com/EdqUK.png" rel="nofollow noreferrer">AFTER1</a>
  <a href="https://i.stack.imgur.com/GRgZ0.png" rel="nofollow noreferrer">AFTER2</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;html&gt;
  </code></pre>
  
  <p>
      
      
       
    
    </p>
  
  <pre><code>&lt;a-scene&gt;
    &lt;a-sky color="#f9f2cf"&gt;&lt;/a-sky&gt;
  
    &lt;!-- LIGHT a-frame no need to export from blender --&gt;
    &lt;a-light color="#fff" position="-8 5 0" intensity="3.5" light="intensity:2"&gt;&lt;/a-light&gt;
    &lt;a-light color="#fff" position="0 5 -14.163" intensity="3.5" light="intensity:2"&gt;&lt;/a-light&gt;
    &lt;a-light color="#fff" position="0 5 14.192" intensity="3.5" light="intensity:2"&gt;&lt;/a-light&gt;
    &lt;a-light color="#fff" position="0 -9.574 -2.443" intensity="3.5" light="intensity:2"&gt;&lt;/a-light&gt;
    &lt;a-light color="#fff" position="8.5 5 0" intensity="3.5" light="intensity:2"&gt;&lt;/a-light&gt;
  
    &lt;!-- CAMERA with wasd controls and circle cursor --&gt;
    &lt;a-camera fly look-controls wasd-controls position="17.020 16.700 7.958" rotation="-34.149 89.382 0.000"&gt;  
      &lt;a-entity 
        cursor="fuse: true; fuseTimeout: 500"
        position="0 0 -1"
        geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
        material="color: black; shader: flat"&gt;
      &lt;/a-entity&gt;
    &lt;/a-camera&gt;
  
    &lt;a-assets&gt;
      &lt;!-- GLTF animation samples --&gt;
      &lt;a-asset-item id="afb_animation" src="models/afb_animation.gltf"&gt;&lt;/a-asset-item&gt;
    &lt;/a-assets&gt;
  
    &lt;a-entity id="_afb_animation" position="0 0 0"  gltf-model="#afb_animation" &gt;&lt;/a-entity&gt;
  &lt;/a-scene&gt;
  
  &lt;!-- script change model position --&gt;
  &lt;script&gt;
  
    $( document ).ready(function() {
  
      var xAxis = new THREE.Vector3(1,0,0);
  
      setTimeout(function(){
        console.log("rotation: done");
  
        document.querySelector('#_afb_animation').sceneEl.object3D.translateY(20);
  
      }, 3000);
  
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>