Can someone assist me with playing a glb animation in A-FRAME using Three.js? The animation works for a second and then stops. Here is my current code:
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('move', {
init: function () {
setTimeout( () => {
let position = this.el.getAttribute("position")
console.log(this.el.components['gltf-model'].model )
// Create an AnimationMixer, and get the list of AnimationClip instances
const mixer = new THREE.AnimationMixer( this.el.components['gltf-model'].model);
const clips = this.el.components['gltf-model'].model.animations[0];
var clock = new THREE.Clock();
// Play all animations
mixer.clipAction( clips ).play();
//In the animation block of your scene:
var delta = 0.25 * clock.getDelta();
mixer.update( delta );
}, 2000)
}
})
</script>
<a-scene>
<a-entity gltf-model="https://rawcdn.githack.com/BabylonJS/MeshesLibrary/55f475726670be2e7e4017b5f88c5762a90508c2/shark.glb" move position=".5 0.5 -5" scale="0.5 0.5 0.5"></a-entity>
</a-scene>