Animation System
개요
three.js 애니메이션 시스템 내에서 모델의 다양한 속성, 즉
- different material properties (colors, opacity, booleans),
- visibility and transforms
을 애니메이션으로 만들 수 있습니다.
애니메이션 속성은 faded in, faded out, crossfaded and warped 할 수 있습니다.
동일한 객체뿐만 아니라 다른 객체에 대한 서로 다른 애니메이션의
가중치 및 시간 스케일을 독립적으로 변경할 수 있습니다.
동일 물체와 다른 물체의 다양한 애니메이션을 동기화 할 수 있습니다.
이 모든 것을 하나의 동종 시스템에서 달성하기 위해,
three.js 애니메이션 시스템은 "2015년에 완전히 변경" 되었고
지금은 Unity / Unreal Engine 4와 유사한 아키텍처를 사용합니다.
Animation Clips
애니메이션 된 "3D 오브젝트를 성공적으로 가져온 경우"
( bone 과 morph target 중 1가지 이상을 포함해야 함 )
- 예를 들어 Blender에서 Blender exporter 도구로 내보내고
JSONLoader를 사용하여 Three.js 장면으로 로드하는 경우
로드된 mesh의 geometry 속성 중 하나는 이 모델에 대한
AnimationClips 속성들이 포함된 "애니메이션" 이라는 배열이어야 합니다.
각 AnimationClip 은 일반적으로 객체의 특정 활동에 대한 데이터를 보유합니다.
예를들어 mesh가 캐릭터인 경우
걷기 사이클을 위한 AnimationClip, 점프를 위한 AnimationClip,
사이드스텝을 위한 것 등이 있을 수 있습니다.
keyframe Tracks
이러한 AnimationClip 내부에는 애니메이션 속성 각각에 대한 데이터가
별도의 keyframeTrack 에 저장됩니다.
캐릭터 오브젝트가 스켈레톤을 가지고 있다고 가정하면,
하나의 keyframeTrack 은 하반부 bone 의 position 변화에 대한 데이터를 시간에 따라 저장하고
두번째 트랙은 동일한 bone의 rotation 변화에 대한 데이터를 저장하고,
세번째는 트랙의 position, rotation 또는 다른 bone 의 scaling 등이 될것입니다.
AnimationClip 은 많은 트랙으로 구성될 수 있습니다.
모델에 morph targets ( 예 - 친근한 얼굴, 아픈얼굴을 각각 보여주는 두개의 모프 타겟 ) 이
있다고 가정하면 각 트랙에는 클립의 성능 중에
특정 모프 타겟의 영향이 퍼포먼스중 어떻게 변화하는 지에 대한 정보가 있습니다.
Animation Mixer
저장된 데이터는 애니메이션의 기초만을 형성합니다.
- 실제 재생은 AnimationMixer 에 의해 제어됩니다.
이것은 애니메이션 플레이어일 뿐만 아니라 여러개의 애니메이션을
동시에 제어하고 혼합하고 병합할 수 있는 실제 믹서 콘솔과 같은
하드웨어의 시뮬레이션으로 볼 수 있습니다.
Animation Actions
AnimationMixer 자체는 AnimationActions 에 의해 제어되기 때문에
매우 적은 ( 일반적인 ) 속상과 메소드만을 가지고 있습니다.
AnimationActions 을 구성하면
AnimationClip 을 재생, 일시정지, 또는 정지할 시기, Clip 의 반복여부와 횟수,
fade 또는 time scaling 으로 수행할지 여부,
그리고 cross fading 이나 동기화와 같은 몇가지 추가 사항을 결정할 수 있습니다.
Animation Object Group
한 그룹의 객체가 공유 애니메이션 상태를 받게 하려면,
AnimationObjectGroup 을 사용해야 합니다.
Supported Format and Loaders
모든 모델 형식이 애니메이션을 포함하는 것은 아니며 ( OBJ notably does not )
일부 three.js 로더만 AnimationClip 시퀀스를 지원함을 유의하십시오.
이 애니메이션 유형을 지원하는 몇가지로더가 있습니다.
- THREE.JSONLoader
- THREE.ObjectLoader
- THREE.BVHLoader
- THREE.FBXLoader
- THREE.FBXLoader2
- THREE.GLTF2Loader
- THREE.MMDLoader
- THREE.SEA3DLoader
3ds max 와 Maya 는 현재 여러 개의 애니메이션 ( 동일한 타임라인에 있지 않은 애니메이션 ) 을
하나의 파일로 직접 내보낼 수 없습니다.
Example
var mesh;
// Create an AnimationMixer, and get the list of AnimationClip instances
var mixer = new THREE.AnimationMixer( mesh );
var clips = mesh.animations;
// Update the mixer on each frame
function update () {
mixer.update( deltaSeconds );
}
// Play a specific animation
var clip = THREE.AnimationClip.findByName( clips, 'dance' );
var action = mixer.clipAction( clip );
action.play();
// Play all animations
clips.forEach( function ( clip ) {
mixer.clipAction( clip ).play();
} );
