📌 Three.js에서 3D 모델 애니메이션 불러오기 & 제어하기

📌 Three.js에서 3D 모델 애니메이션 불러오기 & 제어하기

이전 글에서는 GLTFLoader를 사용하여 3D 모델을 불러오고, Three.js 씬에 배치하는 방법을 배웠습니다.
이번 글에서는 애니메이션이 포함된 GLTF 모델을 불러오고, 재생/정지/속도 조절 등의 기능을 추가하는 방법을 다룹니다.

---

🚀 1. Three.js에서 애니메이션 적용하는 방법

GLTF 모델(.gltf 또는 .glb)에는 애니메이션이 포함될 수 있습니다.
Three.js에서는 AnimationMixer를 사용하여 애니메이션을 제어할 수 있습니다.

📌 애니메이션 적용 방법

1. useGLTF()를 사용하여 GLTF 모델 로드
2. AnimationMixer를 생성하고 애니메이션 클립을 설정
3. useFrame()을 활용하여 애니메이션을 업데이트
4. 버튼을 추가하여 재생 / 일시정지 / 속도 조절 기능 구현

---

🛠 2. 애니메이션이 포함된 3D 모델 추가하기

✅ 1) 애니메이션이 포함된 3D 모델 다운로드

아래 사이트에서 .glb 파일을 다운로드하여 프로젝트의 public/models 폴더에 저장합니다.

🔹 무료 GLTF 모델 다운로드 사이트

• Sketchfab
• Mixamo
• CGTrader

예제 파일:

📂 public/models/
 ┣ 📜 animated_robot.glb

---

✅ 2) Three.js에서 애니메이션이 있는 GLTF 모델 로드

📌 src/components/AnimatedModel.jsx

import { useRef, useEffect } from "react";
import { useGLTF } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import * as THREE from "three";

const AnimatedModel = ({ modelPath, animationIndex = 0, isPlaying = true }) => {
  const { scene, animations } = useGLTF(modelPath);
  const mixer = useRef(null);

  useEffect(() => {
    if (animations.length > 0) {
      mixer.current = new THREE.AnimationMixer(scene);
      const action = mixer.current.clipAction(animations[animationIndex]);
      if (isPlaying) {
        action.play();
      } else {
        action.stop();
      }
    }
  }, [scene, animations, animationIndex, isPlaying]);

  useFrame((_, delta) => {
    if (mixer.current) {
      mixer.current.update(delta);
    }
  });

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

export default AnimatedModel;

📌 설명

• useGLTF()를 사용하여 3D 모델을 로드합니다.
• AnimationMixer를 생성하여 애니메이션을 실행합니다.
• useFrame()을 사용하여 매 프레임마다 애니메이션을 업데이트합니다.

---

🎛 3. 애니메이션 제어 기능 추가하기

애니메이션을 재생 / 정지 / 속도 조절할 수 있도록 UI를 추가해보겠습니다.

📌 src/components/AnimationControls.jsx

import { useState } from "react";

const AnimationControls = ({ onPlay, onPause, onSpeedChange }) => {
  const [speed, setSpeed] = useState(1);

  const handleSpeedChange = (e) => {
    const newSpeed = parseFloat(e.target.value);
    setSpeed(newSpeed);
    onSpeedChange(newSpeed);
  };

  return (
    <div style={{ textAlign: "center", margin: "10px" }}>
      <button onClick={onPlay} style={{ margin: "5px" }}>▶ Play</button>
      <button onClick={onPause} style={{ margin: "5px" }}>⏸ Pause</button>
      <label style={{ marginLeft: "10px" }}>Speed: </label>
      <input
        type="range"
        min="0.1"
        max="2"
        step="0.1"
        value={speed}
        onChange={handleSpeedChange}
      />
    </div>
  );
};

export default AnimationControls;

---

🏗 4. 최종적으로 애니메이션 컨트롤러 적용

이제 AnimatedModel과 AnimationControls를 ModelViewer에 결합합니다.

📌 src/components/ModelViewer.jsx

import { useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import AnimatedModel from "./AnimatedModel";
import AnimationControls from "./AnimationControls";

const ModelViewer = () => {
  const [isPlaying, setIsPlaying] = useState(true);
  const [speed, setSpeed] = useState(1);

  return (
    <div>
      <Canvas camera={{ position: [0, 2, 5], fov: 50 }}>
        <ambientLight intensity={0.5} />
        <directionalLight position={[5, 5, 5]} intensity={1} />
        <AnimatedModel modelPath="/models/animated_robot.glb" isPlaying={isPlaying} />
        <OrbitControls />
      </Canvas>

      {/* 애니메이션 컨트롤 UI */}
      <AnimationControls
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
        onSpeedChange={setSpeed}
      />
    </div>
  );
};

export default ModelViewer;

---

🎯 5. App.jsx에서 ModelViewer 적용

📌 src/App.jsx

import ModelViewer from "./components/ModelViewer";

function App() {
  return (
    <div>
      <h1 style={{ textAlign: "center", marginTop: "20px" }}>3D 애니메이션 뷰어</h1>
      <ModelViewer />
    </div>
  );
}

export default App;

---

✅ 6. 최종 결과

✔ GLTF 모델에서 애니메이션을 불러와 재생
✔ 애니메이션 재생 / 정지 버튼 추가
✔ 속도 조절 기능 적용
✔ OrbitControls로 마우스로 3D 모델 조작 가능

🚀 이제 npm run dev로 실행하면 3D 캐릭터가 움직이는 것을 확인할 수 있습니다!

---

🔥 7. 다음 단계: 조명 & 그림자 적용하기

지금까지 우리는 애니메이션이 포함된 3D 모델을 로드하고, 재생 및 정지, 속도 조절 기능을 추가했습니다.
다음 글에서는 조명과 그림자를 추가하여 더욱 사실적인 3D 환경을 구축하는 방법을 다룹니다.

✅ 다음 편 예고:
"Three.js에서 조명과 그림자 적용하기 – 더 현실적인 3D 씬 만들기" 🚀