Sistema de animação

Visão geral

No sistema de animação three.js, você pode animar várias propriedades de seus modelos: os ossos (bones) de um [page:SkinnedMesh skinned e rigged model], morph targets, diferentes propriedades de material (cores, opacidade, booleanos), visibilidade e transformações. As propriedades animadas podem ser utilizadas com fade in, fade out, crossfaded e warped. As escalas de peso e tempo de diferentes animações no mesmo objeto, bem como em objetos diferentes, podem ser alteradas independentemente. Várias animações no mesmo objeto e em objetos diferentes podem ser sincronizadas.

Para conseguir tudo isso em um sistema homogêneo, o sistema de animação three.js [link:https://github.com/mrdoob/three.js/issues/6881 mudou completamente em 2015] (cuidado com informações desatualizadas!), e agora tem uma arquitetura semelhante à Unity/Unreal Engine 4. Esta página fornece uma breve visão geral dos principais componentes do sistema e como eles trabalham juntos.

Clipes de animação (Animation Clips)

Se você importou com sucesso um objeto 3D animado (não importa se bones ou morph targets ou ambos) — por exemplo, exportando-o do Blender com o [link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender] e carregando-o em uma cena three.js usando [page:GLTFLoader] — um dos campos da resposta deve ser um array chamado "animations", contendo o [page:AnimationClip AnimationClips] para este modelo (veja uma lista de carregadores possíveis abaixo).

Cada `AnimationClip` geralmente contém os dados de uma determinada atividade do objeto. Se o mesh é um personagem, por exemplo, pode haver um AnimationClip para caminhar, um segundo para salto, um terceiro para contornar e assim por diante.

Keyframe Tracks

Dentro de tal 'AnimationClip' os dados para cada propriedade animada são armazenados em um [page:KeyframeTrack] separado. Supondo que um objeto de personagem tenha um [page:Skeleton esqueleto] (skeleton), uma keyframe track pode armazenar os dados para as mudanças de posição do osso do antebraço ao longo do tempo, uma faixa diferente dos dados para as mudanças de rotação do mesmo osso, uma terceira a posição da pista, rotação ou dimensionamento de outro osso, e assim por diante. Deve ficar claro, que um AnimationClip pode ser composto de muitas dessas tracks.

Supondo que o modelo tenha morph targets (por exemplo, um morph target mostrando um rosto amigável e outro mostrando um rosto irritado), cada track contém as informações sobre como a [page:Mesh.morphTargetInfluences influence] de um certo morph target muda durante a execução do clipe.

Animation Mixer

Os dados armazenados formam apenas a base para as animações - a reprodução real é controlada pelo [page:AnimationMixer]. Você pode imaginar isso não apenas como um player de animações, mas como uma simulação de um hardware como um mixer real, que pode controlar várias animações simultaneamente, misturando-os e fundindo-os.

Ações de animação (Animation Actions)

O próprio `AnimationMixer` tem muito poucas propriedades e métodos (gerais), porque pode ser controlado por [page:AnimationAction AnimationActions]. Ao configurar um `AnimationAction` você pode determinar quando um certo `AnimationClip` deve ser reproduzido, pausado ou parado em um dos mixers, se e com que frequência o clipe deve ser repetido, seja executado com um fade ou uma escala de tempo, e algumas coisas adicionais, como crossfading ou sincronização.

Animação de Grupos de Objetos

Se você quiser que um grupo de objetos receba um estado de animação compartilhado, você pode usar um [page:AnimationObjectGroup].

Formatos e Loaders suportados

Observe que nem todos os formatos de modelo incluem animação (notadamente o OBJ não inclui), e que apenas alguns loaders do three.js suportam sequências [page:AnimationClip AnimationClip]. Vários que tem suporte para este tipo de animação:

[page:ObjectLoader THREE.ObjectLoader]
THREE.BVHLoader
THREE.ColladaLoader
THREE.FBXLoader
[page:GLTFLoader THREE.GLTFLoader]
THREE.MMDLoader

Observe que o 3ds max e o Maya atualmente não podem exportar várias animações (ou seja, animações que não estão na mesma linha do tempo) diretamente para um único arquivo.

Exemplo


		let mesh;

		// Create an AnimationMixer, and get the list of AnimationClip instances
		const mixer = new THREE.AnimationMixer( mesh );
		const clips = mesh.animations;

		// Update the mixer on each frame
		function update () {
			mixer.update( deltaSeconds );
		}

		// Play a specific animation
		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
		const action = mixer.clipAction( clip );
		action.play();

		// Play all animations
		clips.forEach( function ( clip ) {
			mixer.clipAction( clip ).play();
		} );