three.js glb / gltf 모델 load하여 애니메이션 적용하기

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

...

// gltf loader
const gltfLoader = new GLTFLoader();
let mixer; 

gltfLoader.load(
    '/models/threeJScharacter.glb',
    gltf => {
        // console.log(gltf.scene.children[0]);
        const characterMesh = gltf.scene.children[0];
        scene.add(characterMesh);

        mixer = new THREE.AnimationMixer(characterMesh);
        const actions = [];
        actions[0] = mixer.clipAction(gltf.animations[0]);
        actions[1] = mixer.clipAction(gltf.animations[1]);
        actions[0].repetitions = 2;
        actions[0].clampWhenFinished = true;
        actions[0].play();
    }
);

gltf loader를 이용해서 glb로 export한 3D모델을 three.js에서 mesh로 사용할 수 있다.

gltf load로 읽으면 유니티 오브젝트 마냥 여러 계층구조를 가진 오브젝트를 얻고, 그 안의 scene.children 배열에 mesh가 들어있다.

 

mesh에서 Animation Mixer를 뽑아서 clipAction을 통해 애니메이션 배열에서 각각의 clip을 꺼내올 수 있다.

clip을 play하여 애니메이션을 재생할 수 있다.

반복설정인 repetitions가 있고, clampWhenFinished는 애니메이션이 끝났을 때 애니메이션 시작 동작으로 돌려주는 설정이다.