[React.js] React Three Fiber(R3F) 애니메이션 재생

1. useEffect 훅에서 play() 메서드 작동 안 됨

3D 모델의 애니메이션을 재생하고자 하였다. 아래의 코드를 적용해 봤는데 애니메이션이 플레이되지 않았다.

import React, {  useState, useEffect } from "react";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader";
import { useLoader } from "@react-three/fiber";

const Model = ({ characterPath, scale }) => {
  const gltf = useLoader(GLTFLoader, characterPath);
  const mixer = new THREE.AnimationMixer(gltf.scene);

  const action = mixer.clipAction(gltf.animations[0]);

  useEffect(() => {
    action.play(); // 애니메이션 시작
    return () => {
      mixer.stopAllAction(); // 컴포넌트가 언마운트되면 애니메이션 정지
    };
  }, [action]);

  return <primitive object={gltf.scene} scale={scale} />;
};

 

2. useFrame 훅 사용하여 해결

R3F에서 useFrame 훅을 제공했는데 이 훅을 사용해 애니메이션을 성공적으로 재생할 수 있었다.

import { GLTFLoader } from "three/addons/loaders/GLTFLoader";
import { useLoader, useFrame } from "@react-three/fiber";
import * as THREE from "three";

const Model = ({ characterPath, scale }) => {
  let mixer = null;
  const { scene, animations } = useLoader(GLTFLoader, characterPath);
  
  mixer = new THREE.AnimationMixer(scene);
  void mixer.clipAction(animations[0]).play();
  
  // useFrame 훅 사용
  useFrame((state, delta) => {
    mixer.update(delta);
  });

  return <primitive object={scene} scale={scale} />;
};

 

참고 자료
https://codesandbox.io/s/r3f-animation-mixer-forked-8mk4w5?file=/src/App.js