threejs 관련

Animation system

 
 

 

 
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 시퀀스를 지원함을 유의하십시오.
 
이 애니메이션 유형을 지원하는 몇가지로더가 있습니다.
 
 
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();
} );

댓글

댓글 본문
작성자
비밀번호
버전 관리
gamza
현재 버전
선택 버전
graphittie 자세히 보기