Estoy tratando de reproducir una animación glb en A-FRAME con Three.js, ahora funciona solo por un segundo y luego se detiene, ¿alguien podría ayudarme, por favor? este es mi código:
<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>Para controlar la animación en un cuadro es usar un componente mezclador de animación predefinido por aframe extra.
<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>donde puede configurar la animación requerida para recortar el atributo y reproducir cualquier animación basada en la lógica de su programa. Use esto como referencia , si corresponde. Aquí, en mi código, la animación de natación se reproduce primero y después de 2 segundos se reproduce la animación de mordida.
Espere hasta que el modelo se cargue con:
this.el.addEventListener("model-loaded", evt => /* stuff */)} actualice la animación en el renderloop - en cada tick . Podría usar un intervalo o algo más, pero aframe ya tiene una función incorporada para este propósito:
<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>