You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
5.6 KiB
150 lines
5.6 KiB
2 years ago
|
<!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>
|