Animaciones de modelos 3D
Cómo animar modelos 3D en tu escena
Modelos 3D en .glTF y .glb el formato pueden incluir tantas animaciones como desees en ellos. Las animaciones le indican a la malla cómo moverse, especificando una serie de keyframes que se disponen a lo largo del tiempo, la malla luego se mezcla de una pose a otra para simular un movimiento continuo.
La mayoría de las animaciones de modelos 3D son skeletal animations. Estas animaciones simplifican la geometría compleja del modelo en una "figura de palo", enlazando cada vértice de la malla al bone más cercano en el skeleton. Los modeladores ajustan el skeleton en diferentes poses, y la malla se estira y dobla para seguir estos movimientos.
Como alternativa, vertex animations animan un modelo sin la necesidad de un skeleton. Estas animaciones especifican la posición de cada vértice del modelo directamente. Decentraland también soporta estas animaciones.
Ver Animations para más detalles sobre cómo crear animaciones para un modelo 3D. Lee Shape components para instrucciones sobre cómo importar un modelo 3D a una escena.
💡 Tip: Las animaciones suelen ser mejores para mover algo en su lugar, no para cambiar la posición de una entidad. Por ejemplo, puedes configurar una animación para mover los pies de un personaje en su lugar, pero para cambiar la ubicación de la entidad es mejor usar el componente Transform. Ver Positioning entities para más detalles.
Comprobar si un modelo 3D tiene animaciones
No todos los glTF archivos incluyen animaciones. Para ver si hay disponibles, puedes hacer lo siguiente:
Si usas VS Code(recomendado), instala la GLTF Tools extensión y visualiza el contenido de un archivo glTF allí.
Abre el Babylon Sandbox sitio y arrastra el archivo glTF (y cualquier .jpg o .bin dependencia) al navegador.
Abre el .glTF archivo con un editor de texto y desplázate hacia abajo hasta encontrar "animations":.
💡 Tip: En skeletal animaciones, el nombre de una animación suele componerse del nombre de su armature, un guion bajo y el nombre de la animación. Por ejemplo myArmature_animation1.
Reproducción automática
Si un modelo 3D incluye alguna animación, el comportamiento por defecto es que la primera de ellas siempre se reproduce en bucle.
Para evitar este comportamiento, agrega un Animator componente a la entidad que tiene el modelo, y luego controla la reproducción de las animaciones explícitamente. Si un Animator componente está presente en la entidad, todas las animaciones por defecto quedan en un playing: false estado, y necesitan ser reproducidas manualmente.
💡 Tip: En el Scene Editor, puedes agregar un Animator componente visualmente. Ver Add Components. También puedes controlar animaciones de forma no-code vía Actions, ver Haz inteligente cualquier item.
Controlar animaciones explícitamente
Un Animator componente se usa para acceder a todas las animaciones de la entidad y puede usarse para indicar explícitamente a la entidad que reproduzca o detenga una animación. El Animator componente incluye un arreglo de states, esta lista debe incluir un objeto por cada una de las animaciones que el modelo 3D puede ejecutar. Un único Animator puede incluir tantos estados como sean necesarios.
Cada state objeto realiza un seguimiento de si una animación se está reproduciendo actualmente.
📔 Nota: El Animator component must be imported via
import { Animator } from "@dcl/sdk/ecs"
Ver Imports para ver cómo manejarlos fácilmente.
Obtener una animación
Obtén un clip del Animator por nombre usando la .Animator.getClip() función. Esta función devuelve una versión mutable del objeto de estado de la animación.
Animator.getClip requiere los siguientes parámetros:
entity: La entidad delAnimatorcomponente que deseas consultar.clipName: Cadena con el nombre del clip que quieres obtener.
Animator.getClip devuelve una versión mutable del estado de la animación, para que puedas modificar libremente los valores de lo que esta función retorna.
📔 Nota: Si intentas usar Animator.getClip() para obtener un clip que existe en el modelo 3D, pero no está listado en el Animator componente, devuelve null.
Reproducir una animación
El .playing el campo en un estado de animación determina si la animación se está reproduciendo actualmente. Ten en cuenta que varias animaciones pueden estar reproduciéndose en un solo modelo 3D al mismo tiempo.
Usa la Animator.playSingleAnimation() función en un AnimationState objeto.
Si la entidad estaba reproduciendo otras animaciones, Animator.playSingleAnimation las detiene.
Animator.playSingleAnimation requiere los siguientes parámetros:
entity: La entidad delAnimatorcomponente que quieres afectar.clipName: Cadena con el nombre del clip que quieres reproducir.resetCursor: (opcional) Si true, reproduce la animación desde el inicio, incluso si la animación estaba previamente pausada. Si false, seguirá reproduciéndose la animación desde donde fue pausada. Por defecto: true.
La siguiente tabla resume cómo Animator.playSingleAnimation() se comporta, usando diferentes valores para la resetCursor propiedad:
reset = false (por defecto)
reset = true
Actualmente reproduciéndose
No tiene efecto.
Se reproduce desde el inicio.
Pausado
Se reanuda desde el último fotograma reproducido.
Se reproduce desde el inicio.
Finalizado (No en bucle)
Se reproduce desde el inicio.
Se reproduce desde el inicio.
Animaciones en bucle
Por defecto, las animaciones se reproducen en un bucle que repite la animación indefinidamente.
Cambia esta configuración ajustando el loop propiedad en el state objeto.
Si looping está establecido en false, la animación se reproduce solo una vez y luego se detiene, quedándose en la postura del último fotograma.
Detener una animación
Para detener todas las animaciones que una entidad esté reproduciendo, usa Animator.stopAllAnimations().
Animator.stopAllAnimations requiere los siguientes parámetros:
entity: La entidad delAnimatorcomponente que quieres afectar.resetCursor: (opcional) Si true, vuelve a la postura en el primer fotograma de la animación. Si false, queda pausada en su postura actual. Por defecto: true.
📔 Nota: Al reproducir una animación con Animator.playSingleAnimationesta función gestiona la detención de todas las demás animaciones en segundo plano. No necesitas detener explícitamente otras animaciones en ese caso.
Cuando una animación que no es en bucle termina de reproducirse, por defecto el modelo 3D permanece en la última postura que tuvo. Para cambiar este comportamiento por defecto y que cuando la animación termine vuelva a la primera postura, configura el shouldReset propiedad a true.
También puedes usar Animator.stopAllAnimations() en cualquier momento para restablecer explícitamente la postura al primer fotograma de la animación.
📔 Nota: Restablecer la postura es un cambio brusco. Si quieres que el modelo transicione suavemente a otra postura, puedes o bien:
Manejar múltiples animaciones
Si un modelo 3D tiene múltiples animaciones empaquetadas en él, un único Animator componente puede ocuparse de todas ellas.
En el ejemplo anterior, dos animaciones se manejan mediante objetos separados, y luego se asignan ambos al mismo state Cada bone en una animación solo puede ser afectado por una animación a la vez, a menos que esas animaciones tengan un Animator component.
weight que sume un valor de 1 o menos. Si una animación solo afecta las piernas de un personaje, y otra solo afecta la cabeza del personaje, entonces pueden reproducirse al mismo tiempo sin problema. Pero si ambas afectan las piernas del personaje, entonces debes reproducir solo una a la vez, o reproducirlas con
valores que sume un valor de 1 o menos. más bajos.
Si en el ejemplo anterior, la bite animación solo afecta la boca del tiburón, y la swim animación solo afecta los huesos de la columna del tiburón, entonces ambas pueden reproducirse al mismo tiempo si están en capas separadas.
📔 Nota: Animator.playSingleAnim() detiene todas las demás animaciones que la entidad esté reproduciendo actualmente. Para reproducir múltiples animaciones al mismo tiempo, modifica la playing propiedad en los estados de animación manualmente.
Velocidad de la animación
Cambia la velocidad a la que se reproduce una animación cambiando la speed propiedad. El valor de speed es 1 por defecto.
Establece la velocidad menor que 1 para reproducirla más despacio, por ejemplo 0.5 para reproducirla a la mitad de velocidad. Establécela mayor que 1 para reproducirla más rápido, por ejemplo 2 para reproducirla al doble de velocidad.
Peso de la animación
El que sume un valor de 1 o menos. La propiedad permite que un solo modelo lleve a cabo múltiples animaciones en diferentes capas a la vez, calculando un promedio ponderado de todos los movimientos implicados en la animación. El valor de que sume un valor de 1 o menos. determina cuánta importancia se le dará a esa animación en el promedio.
Por defecto, que sume un valor de 1 o menos. es igual a 1. El valor de que sume un valor de 1 o menos. no puede ser mayor que 1.
El que sume un valor de 1 o menos. el valor de todas las animaciones activas en una entidad debería sumar 1 en todo momento. Si suma menos de 1, el promedio ponderado usará la posición por defecto del armature para la parte restante del cálculo.
Por ejemplo, en el ejemplo de código anterior, estamos reproduciendo la swim animación, que solo tiene un que sume un valor de 1 o menos. de 0.2. Este movimiento de natación será bastante sutil: solo el 20% de la intensidad que la animación define. El 80% restante del cálculo toma valores de la postura por defecto del armature.
El que sume un valor de 1 o menos. La propiedad puede usarse de maneras interesantes, por ejemplo el que sume un valor de 1 o menos. propiedad de swim podría establecerse en proporción a qué tan rápido está nadando el tiburón, así no necesitas crear múltiples animaciones para natación rápida y lenta.
También podrías cambiar gradualmente el que sume un valor de 1 o menos. valor al iniciar y detener una animación para darle una transición más natural y evitar saltos desde la pose por defecto a la primera pose de la animación.
📔 Nota: El valor agregado de que sume un valor de 1 o menos. de todas las animaciones que actúan sobre un bone de un modelo 3D no puede ser más de 1. Si más de una animación está afectando los mismos huesos al mismo tiempo, necesitan tener su weight establecido en valores que sumen menos de 1.
Última actualización