📌 Three.js에서 GLTFLoader를 활용하여 3D 모델 불러오기

📌 Three.js에서 GLTFLoader를 활용하여 3D 모델 불러오기

이전 글에서는 Three.js + React 개발 환경을 구축하고, 기본 3D 씬을 렌더링하는 방법을 배웠습니다.
이번 글에서는 GLTFLoader를 사용하여 3D 모델을 불러오고, Three.js 씬에 배치하는 방법을 다룹니다.

---

🚀 1. GLTFLoader란?

Three.js에서 .glb 및 .gltf 형식의 3D 모델을 로드하려면 GLTFLoader를 사용해야 합니다.

✅ GLTF vs GLB 차이점

파일 형식 설명

.glb	바이너리 포맷 (용량이 작고 최적화됨)
.gltf	JSON 포맷 (텍스트 기반, 사람이 읽기 쉬움)

📌 Three.js에서는 .glb 파일을 더 추천합니다.

• 압축률이 높고, 로딩 속도가 빠르며, 네트워크 사용량이 적습니다.
• WebGL에서 최적화되어 빠르게 렌더링됩니다.

---

🛠 2. 프로젝트에 3D 모델 추가하기

✅ 1) @react-three/drei 설치 (GLTFLoader 포함)

GLTF 모델을 쉽게 불러오기 위해 @react-three/drei 라이브러리를 사용합니다.

npm install @react-three/drei

🔹 이 라이브러리는 Three.js를 React에서 쉽게 사용할 수 있도록 다양한 유틸리티를 제공합니다.

---

✅ 2) 3D 모델 다운로드 및 프로젝트에 추가

반응형

1. 무료 3D 모델 다운로드 사이트
   • Sketchfab
   • Poly Haven
   • CGTrader
2. 모델 파일 저장 경로
   프로젝트 내 public/models 폴더에 3D 모델을 추가합니다.

📌 예시 파일 구조:

📂 public/models/
 ┣ 📜 chair.glb
 ┣ 📜 robot.glb
 ┗ 📜 car.glb

---

🏗 3. GLTFLoader를 사용하여 3D 모델 불러오기

📌 src/components/ModelViewer.jsx

import { useRef } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, useGLTF } from "@react-three/drei";

const Model = ({ modelPath }) => {
  const { scene } = useGLTF(modelPath);
  return <primitive object={scene} scale={1.5} />;
};

const ModelViewer = () => {
  return (
    <Canvas camera={{ position: [0, 2, 5], fov: 50 }}>
      {/* 조명 설정 */}
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} intensity={1} />

      {/* 3D 모델 로드 */}
      <Model modelPath="/models/chair.glb" />

      {/* 카메라 컨트롤 */}
      <OrbitControls />
    </Canvas>
  );
};

export default ModelViewer;

---

🎯 4. 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;

✅ 이제 npm run dev로 실행하면 3D 모델이 Three.js 씬에 로드됩니다!

---

🚀 5. 3D 모델 로딩 최적화하기

✅ 1) 모델 크기 조정

<primitive> 태그에서 scale 값을 조정하여 크기를 변경할 수 있습니다.

<primitive object={scene} scale={2} />

---

✅ 2) 여러 모델 선택 기능 추가

사용자가 다양한 모델을 선택하여 로드할 수 있도록 UI를 개선해봅니다.

📌 src/components/ModelGallery.jsx (모델 선택 버튼 추가)

import { useState } from "react";
import ModelViewer from "./ModelViewer";

const models = [
  { name: "Chair", path: "/models/chair.glb" },
  { name: "Car", path: "/models/car.glb" },
  { name: "Robot", path: "/models/robot.glb" }
];

const ModelGallery = () => {
  const [selectedModel, setSelectedModel] = useState(models[0].path);

  return (
    <div>
      {/* 모델 선택 버튼 */}
      <div style={{ textAlign: "center", marginBottom: "10px" }}>
        {models.map((model) => (
          <button
            key={model.name}
            onClick={() => setSelectedModel(model.path)}
            style={{
              margin: "5px",
              padding: "10px",
              border: "1px solid gray",
              borderRadius: "5px",
              cursor: "pointer"
            }}
          >
            {model.name}
          </button>
        ))}
      </div>

      {/* 선택된 모델을 ModelViewer에 전달 */}
      <ModelViewer modelPath={selectedModel} />
    </div>
  );
};

export default ModelGallery;

📌 src/components/ModelViewer.jsx (동적으로 모델 변경)

import { useGLTF } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

const Model = ({ modelPath }) => {
  const { scene } = useGLTF(modelPath);
  return <primitive object={scene} scale={1.5} />;
};

const ModelViewer = ({ modelPath }) => {
  return (
    <Canvas camera={{ position: [0, 2, 5], fov: 50 }}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} intensity={1} />
      <Model modelPath={modelPath} />
      <OrbitControls />
    </Canvas>
  );
};

export default ModelViewer;

📌 App.jsx에서 ModelGallery 사용

import ModelGallery from "./components/ModelGallery";

function App() {
  return (
    <div>
      <h1 style={{ textAlign: "center", marginTop: "20px" }}>3D 모델 뷰어</h1>
      <ModelGallery />
    </div>
  );
}

export default App;

---

✅ 6. 완성된 기능

✔ GLTFLoader를 활용하여 3D 모델 불러오기
✔ Canvas를 활용한 Three.js 씬 렌더링
✔ 여러 개의 3D 모델을 선택하여 표시 가능
✔ OrbitControls로 마우스 조작 기능 추가

---

🔥 7. 다음 단계: 3D 모델에 애니메이션 적용하기

지금까지 우리는 GLTFLoader를 활용하여 3D 모델을 로드하고, Three.js 씬에 배치하는 방법을 배웠습니다.
다음 글에서는 애니메이션이 포함된 GLTF 모델을 불러와서 재생하는 방법을 다루겠습니다.

✅ 다음 편 예고:
"Three.js에서 3D 모델 애니메이션 불러오기 & 제어하기" 🚀