Three.js - Animation system

As I said before, I used the old three.js library and the recent implementation was unfamiliar to me.
Let's look at the contents of the three.js doc and implement it together.
The following is a translation of threejs.org's animation system.

이전에 얘기했듯이 구형 three.js 라이브러리를 쓰다보니 최근 구현은 저조차도 생소하더군요.

three.js doc의 내용을 보면서 같이 구현을 해봅시다.

다음은 threejs.org의 에니메이션 시스템을 번역한 내용입니다.

 

Animation system

Overview

Within the three.js animation system you can animate various properties of your models: the bones of a skinned and rigged model, morph targets, different material properties (colors, opacity, booleans), visibility and transforms. The animated properties can be faded in, faded out, crossfaded and warped. The weight and time scales of different simultaneous animations on the same object as well as on different objects can be changed independently. Various animations on the same and on different objects can be synchronized.

three.js 애니메이션 시스템 내에서 스키닝 및 리깅 된 모델의 뼈, 모프 대상, 다양한 재질 속성 (색상, 불투명도, 부울), 가시성 및 변형 등 모델의 다양한 속성에 애니메이션을 적용 할 수 있습니다. 애니메이션 속성은 페이드 인, 페이드 아웃, 크로스 페이드 및 뒤 틀릴 수 있습니다. 동일한 객체뿐만 아니라 다른 객체에서도 서로 다른 동시 애니메이션의 가중치 및 시간 스케일을 독립적으로 변경할 수 있습니다. 동일한 객체와 다른 객체의 다양한 애니메이션을 동기화 할 수 있습니다.

To achieve all this in one homogeneous system, the three.js animation system has completely changed in 2015 (be aware of outdated information!), and it has now an architecture similar to Unity/Unreal Engine 4. This page gives a short overview of the main components of the system and how they work together.

하나의 동종 시스템에서이 모든 것을 달성하기 위해 three.js 애니메이션 시스템은 2015 년에 완전히 변경되었으며 (오래된 정보를 알고 있습니다!) 이제 Unity / Unreal Engine 4와 유사한 아키텍처를 갖습니다.이 페이지는 간단한 개요를 제공합니다. 시스템의 주요 구성 요소와 함께 작동하는 방식.

Animation Clips

If you have successfully imported an animated 3D object (it doesn't matter if it has bones or morph targets or both) — for example exporting it from Blender with the glTF Blender exporter and loading it into a three.js scene using GLTFLoader — one of the response fields should be an array named "animations", containing the AnimationClips for this model (see a list of possible loaders below).

애니메이션 3D 객체를 성공적으로 가져 오면 (예 : 뼈 또는 모프 대상이 있거나 둘 다 상관 없음), 예를 들어 glTF Blender 내보내기를 사용하여 Blender에서 내보내고 GLTFLoader를 사용하여 three.js 장면에로드 응답 필드 중 하나는이 모델의 AnimationClips를 포함하는 "animations"라는 배열이어야합니다 (아래의 가능한 로더 목록 참조).

 

;; AnimationClips라는 개념이 들어가고, 그 배열은, 만약 glTF 모델이라면, 'animations' 라는 배열이라고 함.

 

Each AnimationClip usually holds the data for a certain activity of the object. If the mesh is a character, for example, there may be one AnimationClip for a walkcycle, a second for a jump, a third for sidestepping and so on.

 

각 AnimationClip은 일반적으로 객체의 특정 활동에 대한 데이터를 보유합니다. 예를 들어 메시가 캐릭터 인 경우 워치 사이클에 하나의 AnimationClip, 점프에 대해 두 번째, 사이드 스텝에 대해 세 번째 등이있을 수 있습니다.

Keyframe Tracks

Inside of such an AnimationClip the data for each animated property are stored in a separate KeyframeTrack. Assuming a character object has a skeleton, one keyframe track could store the data for the position changes of the lower arm bone over time, a different track the data for the rotation changes of the same bone, a third the track position, rotation or scaling of another bone, and so on. It should be clear, that an AnimationClip can be composed of lots of such tracks.

이러한 AnimationClip 내부에서 각 애니메이션 속성의 데이터는 별도의 KeyframeTrack에 저장됩니다. 캐릭터 오브젝트에 스켈레톤이 있다고 가정하면, 하나의 키 프레임 트랙은 시간이 지남에 따라 팔 아래쪽 뼈의 위치 변경에 대한 데이터를 저장할 수 있고, 다른 트랙은 동일한 뼈의 회전 변경에 대한 데이터를, 다른 하나는 트랙 위치, 회전 또는 스케일링을 저장할 수 있습니다 다른 뼈의 등등. AnimationClip은 많은 트랙으로 구성 될 수 있음이 분명합니다.

Assuming the model has morph targets (for example one morph target showing a friendly face and another showing an angry face), each track holds the information as to how the influence of a certain morph target changes during the performance of the clip.

모델에 모프 타겟이 있다고 가정하면 (예 : 친한 얼굴을 표시하는 모프 타겟 하나와 화난 얼굴을 표시하는 모프 타겟) 각 트랙에는 클립을 수행하는 동안 특정 모프 타겟의 영향이 어떻게 변하는 지에 대한 정보가 포함됩니다.

Animation Mixer

The stored data forms only the basis for the animations - actual playback is controlled by the AnimationMixer. You can imagine this not only as a player for animations, but as a simulation of a hardware like a real mixer console, which can control several animations simultaneously, blending and merging them.

저장된 데이터는 애니메이션의 기초 만 형성합니다. 실제 재생은 AnimationMixer에 의해 제어됩니다. 이것을 애니메이션 플레이어 일뿐만 아니라 실제 믹서 콘솔과 같은 하드웨어의 시뮬레이션으로 상상할 수 있습니다. 실제 믹서 콘솔은 여러 애니메이션을 동시에 제어하고 혼합하고 병합 할 수 있습니다.

Animation Actions

The AnimationMixer itself has only very few (general) properties and methods, because it can be controlled by the AnimationActions. By configuring an AnimationAction you can determine when a certain AnimationClip shall be played, paused or stopped on one of the mixers, if and how often the clip has to be repeated, whether it shall be performed with a fade or a time scaling, and some additional things, such crossfading or synchronizing.

AnimationMixer 자체는 AnimationActions에 의해 제어 될 수 있기 때문에 (일반적인) 프로퍼티와 메소드는 거의 없습니다. AnimationAction을 구성하면 클립을 반복해야하는 횟수와 빈도, 페이드 또는 타임 스케일링으로 수행해야하는지 여부 및 믹서 중 하나에서 특정 AnimationClip을 재생, 일시 정지 또는 중지 할시기를 결정할 수 있습니다. 크로스 페이딩 또는 동기화와 같은 추가 사항.

Animation Object Groups

If you want a group of objects to receive a shared animation state, you can use an AnimationObjectGroup.

객체 그룹이 공유 애니메이션 상태를 받도록하려면 AnimationObjectGroup을 사용할 수 있습니다.

Supported Formats and Loaders

Note that not all model formats include animation (OBJ notably does not), and that only some three.js loaders support AnimationClip sequences. Several that do support this animation type:

• THREE.ObjectLoader
• THREE.BVHLoader
• THREE.ColladaLoader
• THREE.FBXLoader
• THREE.GLTFLoader
• THREE.MMDLoader
• THREE.SEA3DLoader

Note that 3ds max and Maya currently can't export multiple animations (meaning animations which are not on the same timeline) directly to a single file.

Example

basicStructure2.zip

4.57MB

 

The quickest understanding is to try it out, so let's put it in the example above.

가장 빠른 이해는 실행은 해보는 것이므로, 위의 예제에 맞추어 넣어보도록 하겠습니다.

mainPage

1. Set mixer globally to update the render method.
2. sets the mixer and clips. The mixer configuration is a bit different than the docs description.
3. stops all animation once.
4. Select the 'run' animation and play it.

This way we can see the human character running. There's a little bouncing frame, but let's check this out later.

So let's combine this with the previous key event. For simplicity we will make the mixer and clips global to pass.

1번 mixer를 render 메서드에서 업데이트 시키기위해 전역으로 설정합니다.

2번은 mixer와 clips를 설정합니다. mixer설정이 docs의 설명과는 조금 다르네요.

3번 모든 애니메이션을 일단 멈춥니다.

4번 'run' 애니메이션을 선택하고, 그것을 play합니다.

 

이렇게 하면 휴먼케릭터가 달리는것을 볼수 있습니다. 약간 튀는 프레임이 있는데, 이 문제는 추후 확인하도록 합시다.

 

자, 이걸 이전장의 키이벤트와 결합시키도록 합시다. 간단히 하기 위해서 넘겨줘야될 mixer와 clips를 전역으로 만들겠습니다.

 

Change globally

전역으로 변경합니다

 

keyProcess.js

Stop all 1. animation, then run the 2. animation.

1번 먼저 모든 애니메이션을 멈춘후, 2번 해당 애니메이션을 실행시킵니다.