I'm trying to play a glb animation in A-FRAME with Three.js, now it works just for a second and then it stop, could someone help me please? this is my 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>
To control animation in a-frame is to use predefined animation-mixer component by aframe extra's.
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="model"
gltf-model="https://rawcdn.githack.com/BabylonJS/MeshesLibrary/55f475726670be2e7e4017b5f88c5762a90508c2/shark.glb"
position=".5 0.5 -5" scale="0.5 0.5 0.5"></a-entity>
</a-scene>
<script>
document.getElementById("model").setAttribute("animation-mixer", "clip:swimming");
const timedelay = setTimeout(delayFunction, 2000);
function delayFunction() {
document.getElementById("model").setAttribute("animation-mixer", "clip:bite");
}
</script>
</body>
where you can set the required animation to clip attribute and play any animation based on your program logic. Use this for reference if any. Here in my code swimming animation plays first and after 2 seconds bite animation plays.
Wait until the model is loaded with:
this.el.addEventListener("model-loaded", evt => /* stuff */)}
update the animation in the renderloop - on each tick. You could use an interval or something else, but aframe has already a built-in function for this purpose:
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('move', {
init: function() {
// wait until the model is loaded
this.el.addEventListener("model-loaded", evt => {
const mixer = new THREE.AnimationMixer(this.el.components['gltf-model'].model);
const clips = this.el.components['gltf-model'].model.animations[0];
mixer.clipAction(clips).play();
// "expose" the animation mixer
this.mixer = mixer;
})
},
// on each render loop (actually before each render loop)
tick: function(t, dt) {
if (!this.mixer) return; // if the mixer exists
this.mixer.update(dt / 1000) // update it with the delta time
}
})
</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>