javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
							<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8" />
		<base href="../../../" />
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
	</head>
	<body>
		<h1>Sistema de animação</h1>

		<h2>Visão geral</h2>

		<p class="desc">

			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.<br /><br />

			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.
		
		</p>

		<h3>Clipes de animação (Animation Clips)</h3>

		<p class="desc">

			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).<br /><br />

			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.
		
		</p>

		<h3>Keyframe Tracks</h3>

		<p class="desc">

			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.<br /><br />

			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.

		</p>

		<h3>Animation Mixer</h3>

		<p class="desc">

			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.

		</p>

		<h3>Ações de animação (Animation Actions)</h3>

		<p class="desc">

			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.

		</p>

		<h3>Animação de Grupos de Objetos</h3>

		<p class="desc">

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

		</p>

		<h3>Formatos e Loaders suportados</h3>

		<p class="desc">
			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 <i>tem</i>
			suporte para este tipo de animação:
		</p>

			<ul>
				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
				<li>THREE.BVHLoader</li>
				<li>THREE.ColladaLoader</li>
				<li>THREE.FBXLoader</li>
				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
				<li>THREE.MMDLoader</li>
			</ul>

		<p class="desc">
			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.
		</p>

		<h2>Exemplo</h2>

		<code>
		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();
		} );
		</code>

	</body>
</html>