I have a gltf-model loaded into an a-frame and I am trying to move it along the y-axis by 20 units. The code I am currently using is:
However, when I run the scene in a-frame, the object appears to be moved upwards (you can check this by looking at shadows and inspecting the scene in the "AFTER" images), but it still remains displayed in its original position. It seems like the scene needs some sort of refresh.
So my question is, how can I properly move the object using three.js code?
BEFORE:
BEFORE1
BEFORE2
Here is the code snippet:
<html>
<a-scene>
<a-sky color="#f9f2cf"></a-sky>
<!-- Additional LIGHT attributes that are not required from blender -->
<a-light color="#fff" position="-8 5 0" intensity="3.5" light="intensity:2"></a-light>
<a-light color="#fff" position="0 5 -14.163" intensity="3.5" light="intensity:2"></a-light>
<a-light color="#fff" position="0 5 14.192" intensity="3.5" light="intensity:2"></a-light>
<a-light color="#fff" position="0 -9.574 -2.443" intensity="3.5" light="intensity:2"></a-light>
<a-light color="#fff" position="8.5 5 0" intensity="3.5" light="intensity:2"></a-light>
<!-- CAMERA with WASD controls and circle cursor -->
<a-camera fly look-controls wasd-controls position="17.020 16.700 7.958" rotation="-34.149 89.382 0.000">
<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">
</a-entity>
</a-camera>
<a-assets>
<!-- Sample GLTF animation assets -->
<a-asset-item id="afb_animation" src="models/afb_animation.gltf"></a-asset-item>
</a-assets>
<a-entity id="_afb_animation" position="0 0 0" gltf-model="#afb_animation" ></a-entity>
</a-scene>
<!-- JavaScript to change model position -->
<script>
$( document ).ready(function() {
var yAxis = new THREE.Vector3(0,1,0);
setTimeout(function(){
console.log("rotation complete");
document.querySelector('#_afb_animation').sceneEl.object3D.translateY(20);
}, 3000);
});
</script>