[Three.js] glb 파일 animation 동작하게 하기

Three.js를 활용해서 여러가지 시도를 하는 중에 glb파일을 받아서 렌더링을 하는 구간이있었다.

glb파일은 gltf와 마찬가지로 GLTFLoader를 사용해서 렌더링을 하면된다.

 

glb파일은 바이너리 파일로 안에 모델링 + 텍스쳐 + 모션 등의 정보를 모두 담고 있다.

받았던 파일은 4메가 정도 될정도로 꽤 큰 사이즈였다. (기본 사이즈 자체도 커서 파일 사이즈도 컸던거같음)

 

일단 로드를 할 때는 아래처럼 포지션 세팅하고 하는건 커스터마이징이고.. GLTFLoader를 사용해서 load를 하면 화면에

렌더링이 된다! 이때는 물체와 텍스쳐만 렌더링이 되고 모션은 움직이지 않는다.

const gltfLoader = new GLTFLoader();
const url = 'obj/LittlestTokyo.glb';

gltfLoader.load(url, (gltf) => {
  const root = gltf.scene;
  root.position.set(120, 10, -60);
  root.scale.set(0.05, 0.05, 0.05);
  root.rotation.y = Math.PI * 0.5;
  scene.add(root);
});

 

모션이 움직이게 하기 위해서는 DRACOLoader라는 아이도 필요하다!

없으면.. 일단 에러가 난다.. (DRACOLoader는 3D 모델의 파일을 압축하거나 푸는? 그런거라는데.. 정확히는 찾아봐야할듯!)

 

three,js의 example들을 다운 받으면 안에 있기 떄문에 설정을 해주고...

 

모션의 움직임을 위해서 AnimationMixer를 사용한다.

이 AnimationMixer객체의 clipAction의 함수를 써서 액션을 호출한다음 플레이를 해주는걸 추가한다.

 

하지만 이렇게 해서는 동작을 안한다! 

왜냐면 canvas에 들어가기 때문에 계속해서 렌더링이 필요하기 때문에!!

 

그래서 requestAnimationFrame를 사용하는 함수안에

AnimationMixer의 update함수를 사용해서 돌리면된다.

 

이때, 객체의 시간을 감지하는 Clock이라는 요소를 사용하면 진짜로(!) 모션이 된다!

 

결국 소스는... 아래처럼 적용이 되면 이쁘게 동작도 가능해진다.

  let mixer;
  const gltfLoader = new GLTFLoader();
  // Optional: Provide a DRACOLoader instance to decode compressed mesh data
  var dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath('draco/');
  gltfLoader.setDRACOLoader(dracoLoader);
  const url = 'obj/LittlestTokyo.glb';
  gltfLoader.load(url, (gltf) => {
    const root = gltf.scene;
    mixer = new AnimationMixer(gltf.scene);
    var action = mixer.clipAction(gltf.animations[0]);
    root.position.set(120, 10, -60);
    root.scale.set(0.05, 0.05, 0.05);
    root.rotation.y = Math.PI * 0.5;
    scene.add(root);
    action.play();
  });

  function render() {
    renderer.render(scene, camera);
    const delta = clock.getDelta();
    if (mixer) mixer.update(delta);

    requestAnimationFrame(render);
  }
  
  render();