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 quieras. Las animaciones le dicen al mesh cómo moverse, especificando una serie de keyframes que se distribuyen en el tiempo, luego el mesh fusiona de una pose a otra para simular 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", vinculando cada vértice del mesh al bone más cercano en el skeleton. Los modeladores ajustan el skeleton en diferentes poses, y el mesh se estira y dobla para seguir esos movimientos.

Como alternativa, vertex animations animan un modelo sin la necesidad de un skeleton. Estas animaciones especifican directamente la posición de cada vértice del modelo. Decentraland soporta también estas animaciones.

Ver Animations para detalles sobre cómo crear animaciones para un modelo 3D. Lea Shape components para instrucciones sobre cómo importar un modelo 3D a una escena.

💡 Consejo: Las animaciones suelen ser mejores para mover algo en su lugar, no para cambiar la posición de una entidad. Por ejemplo, puedes establecer 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. Véase Positioning entities para más detalles.

Comprobar si un modelo 3D tiene animaciones

No todos los glTF archivos incluyen animaciones. Para ver si hay alguna disponible, 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 que encuentres "animations":.

💡 Consejo: En skeletal animaciones, un nombre de animación a menudo está compuesto por el nombre del armature, un guion bajo y el nombre de la animación. Por ejemplo myArmature_animation1.

Reproducción automática

Si un modelo 3D incluye animaciones, el comportamiento por defecto es que la primera de ellas siempre se reproduce en bucle.

Para evitar este comportamiento, añade un Animator componente a la entidad que tiene el modelo, y luego maneja la reproducción de las animaciones explícitamente. Si un Animator componente está presente en la entidad, todas las animaciones por defecto quedan en playing: false y necesitan ser reproducidas manualmente.

💡 Consejo: En el Scene Editor, puedes añadir un Animator componente de forma visual. Véase Add Components. También puedes controlar animaciones de forma no codificada mediante Actions, véase Make any item smart.

Manejar 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 realizar. Un solo Animator puede incluir tantos states como sea necesario.

// Crear entidad
const shark = engine.addEntity()

// Añadirle un modelo 3D
GltfContainer.create(shark, {
	src: 'models/shark.glb',
})

Animator.create(shark, {
	states: [
		{
			clip: 'swim',
			playing: true,
			loop: true,
		},
	],
})

Cada state objeto lleva el seguimiento de si una animación se está reproduciendo actualmente.

📔 Nota: El Animator componente debe importarse vía

import { Animator } from "@dcl/sdk/ecs"

Ver Imports para ver cómo manejar estos 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.

const swimAnim = Animator.getClip(sharkEntity, 'swim')

Animator.getClip requiere los siguientes parámetros:

• entity: La entidad del Animator componente que quieres consultar.

• clipName: Cadena con el nombre del clip que quieres obtener.

Animator.getClip devuelve una versión mutable del estado de la animación, por lo que puedes modificar libremente los valores que esta función retorna.

const swimAnim = Animator.getClip(sharkEntity, 'swim')
swimAnim.looping = false

📔 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 múltiples animaciones pueden reproducirse en un solo modelo 3D al mismo tiempo.

Usa la Animator.playSingleAnimation() función en un AnimationState objeto.

Animator.playSingleAnimation(sharkEntity, 'swim')

Si la entidad estaba reproduciendo otras animaciones, Animator.playSingleAnimation las detiene.

Animator.playSingleAnimation requiere los siguientes parámetros:

• entity: La entidad del Animator componente 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éndola desde donde fue pausada. Predeterminado: true.

Animator.playSingleAnimation(sharkEntity, 'swim', false)

La siguiente tabla resume cómo Animator.playSingleAnimation() se comporta, usando diferentes valores para la resetCursor propiedad:

	reset = false (predeterminado)	reset = true
Reproduciéndose actualmente	No tiene efecto.	Se reproduce desde el inicio.
Pausado	Reanuda desde el último fotograma reproduciendo.	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 este ajuste estableciendo la loop propiedad en el state objeto.

Animator.create(shark, {
	states: [
		{
			clip: 'bite',
			playing: true,
			loop: false,
		},
	],
})

Si cuando looping está establecido en false, la animación se reproduce solo una vez y luego se detiene, permaneciendo 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(shark)

Animator.stopAllAnimations requiere los siguientes parámetros:

• entity: La entidad del Animator componente que quieres afectar.

• resetCursor: (opcional) Si true, vuelve a la postura del primer fotograma de la animación. Si false, permanece pausada en su postura actual. Predeterminado: true.

📔 Nota: Al reproducir una animación con Animator.playSingleAnimation, esta función maneja 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 no en bucle termina de reproducirse, por defecto el modelo 3D permanece en la última postura que tuvo. Para cambiar este comportamiento por defecto para que cuando la animación termine vuelva a la primera postura, establece la propiedad shouldReset a true.

Animator.create(shark, {
	states: [
		{
			name: 'bite',
			clip: 'bite',
			playing: true,
			shouldReset: true,
			loop: true,
		},
	],
})

También puedes usar Animator.stopAllAnimations() en cualquier momento para establecer explícitamente la postura de vuelta al primer fotograma de la animación.

📔 Nota: Reiniciar la postura es un cambio abrupto. Si quieres que el modelo transicione suavemente a otra postura, puedes:

Manejar múltiples animaciones

Si un modelo 3D tiene múltiples animaciones empaquetadas, un único Animator componente puede gestionarlas todas.

// Crear entidad
const shark = engine.addEntity()

// Añadirle un modelo 3D
GltfContainer.create(shark, {
	src: 'models/shark.glb'
})

Animator.create(shark, {
	states:[{
			clip: "swim",
			playing: true,
			loop: true
		}. {
			clip: "bite",
			playing: true,
			loop: true
		}
	]
})

En el ejemplo anterior, dos animaciones son gestionadas por objetos state separados, y luego ambos son asignados al mismo Animator componente.

Cada bone en una animación solo puede ser afectado por una animación a la vez, a menos que esas animaciones tengan un 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, entonces pueden reproducirse al mismo tiempo sin problema. Pero si ambas afectan las piernas, entonces debes reproducir solo una a la vez, o reproducirlas con weight valores

más bajos. Si en el ejemplo anterior, la animación bite solo afecta la boca del tiburón, y la animación swim

📔 Nota: solo afecta los bones de la columna del tiburón, entonces ambas pueden reproducirse al mismo tiempo si están en capas separadas. Animator.playSingleAnim() detiene todas las demás animaciones que la entidad está reproduciendo actualmente. Para reproducir múltiples animaciones al mismo tiempo, modifica manualmente la propiedad playing

en los estados de animación.

Velocidad de la animación Cambia la velocidad a la que se reproduce una animación cambiando la propiedad speed

Animator.create(shark, {
	states: [
		{
			clip: 'swim',
			playing: true,
			loop: true,
			El valor de speed es 1 por defecto.
		},
	],
})

speed: 2,

const swimAnim = Animator.getClip(sharkEntity, 'swim')

Establece la velocidad por debajo de 1 para reproducirla más lento, por ejemplo 0.5 para reproducirla a la mitad de velocidad. Establécela por encima de 1 para reproducirla más rápido, por ejemplo 2 para reproducirla al doble de velocidad.

swimAnim.speed = 0.5

El weight Peso de la animación weight La propiedad permite que un único modelo realice múltiples animaciones en diferentes capas a la vez, calculando un promedio ponderado de todos los movimientos involucrados en la animación. El valor de

determina cuánta importancia tendrá esa animación en el promedio. weight Por defecto, 1es igual a weight . El valor de 1.

Animator.create(shark, {
	states: [
		{
			clip: 'swim',
			playing: true,
			loop: true,
			no puede ser mayor que
		},
	],
})

El weight weight: 0.2,

El valor total 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. solo afecta la boca del tiburón, y la animación Por ejemplo, en el ejemplo de código más arriba, estamos reproduciendo la animación weight , que solo tiene un 0.2de

El weight . 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. weight La propiedad puede usarse de maneras interesantes, por ejemplo la propiedad solo afecta la boca del tiburón, y la animación de

podría ajustarse 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. weight También podrías cambiar el valor

📔 Notagradualmente al iniciar y detener una animación para darle una transición más natural y evitar saltos desde la pose por defecto hasta la primera pose de la animación. weight : El valor

const swimAnim = Animator.getClip(sharkEntity, 'swim')

agregado de todas las animaciones que actúan sobre un bone de un modelo 3D no puede ser mayor que 1. Si más de una animación está afectando los mismos bones al mismo tiempo, deben tener su weight establecido en valores que sumen menos de 1.