📌 Three.js 3D 뷰어 사이트 배포 및 실제 활용 방법

📌 Three.js 3D 뷰어 사이트 배포 및 실제 활용 방법

이전까지의 글에서는 Three.js로 3D 모델을 불러오고, 애니메이션을 적용하고, 성능을 최적화하는 실전 구현 과정을 다뤘습니다.
이제 마지막 단계인 **"배포"**를 통해 실제 서비스로 활용할 수 있는 웹사이트를 만들어보겠습니다.
또한, 이 뷰어를 포트폴리오, 제품 프리뷰, 게임 아이템 뷰어 등 실전 프로젝트로 어떻게 활용할 수 있는지도 함께 소개합니다.

---

🚀 1. 배포 플랫폼 선택하기

Three.js 기반 사이트는 정적 웹사이트 형태이므로, Netlify, Vercel, GitHub Pages와 같은 플랫폼을 통해 손쉽게 배포할 수 있습니다.

플랫폼 장점

Vercel	Next.js에 최적화, 빠른 CI/CD, custom domain 지원
Netlify	React + Vite 프로젝트에 친화적, 쉬운 설정
GitHub Pages	무료 호스팅, 개인 프로젝트용에 적합

---

✅ 2. Vercel을 활용한 배포 (Vite + React 기준)

1️⃣ GitHub 저장소에 프로젝트 업로드

git init
git remote add origin https://github.com/yourname/threejs-viewer.git
git add .
git commit -m "init"
git push -u origin main

2️⃣ Vercel에서 배포 설정

반응형

1. https://vercel.com 접속
2. GitHub 계정 연동
3. threejs-viewer 저장소 선택
4. Framework 선택: React
5. Build Command: npm run build
6. Output Directory: dist
7. Deploy 버튼 클릭 🎉

---

✅ 3. 배포 시 주의사항

📦 모델 파일은 public/models에 위치시킬 것

GLTF 모델 파일(.glb)은 정적 파일이므로 반드시 public 폴더 하위에 있어야 합니다.

public/
 ┗ models/
    ┗ robot.glb

👉 배포 후 URL 경로: /models/robot.glb

---

⚠️ 브라우저 MIME 타입 문제

서버가 .glb, .gltf 파일을 application/octet-stream으로 제공해야 정상 작동합니다.
Vercel과 Netlify는 기본적으로 문제 없이 처리하지만, GitHub Pages에서는 404 또는 wrong MIME 오류가 발생할 수 있으므로 주의하세요.

---

🎯 4. 실제 활용 시나리오 예시

✅ 1) 3D 포트폴리오

• 자신의 3D 모델링 작업을 웹에서 인터랙티브하게 보여줌
• 예: 아바타, 환경 모델, 제품 디자인 등

✅ 2) 제품 뷰어 (e-commerce)

• 전자제품, 의류, 가구 등의 3D 뷰어
• 예: 고객이 마우스로 회전하여 제품 확인

✅ 3) 게임 아이템 뷰어

• 캐릭터, 무기, 탈것 등을 사전에 시각적으로 소개
• NFT 게임 및 P2E 환경에서도 활용 가능

✅ 4) 교육 콘텐츠 / 전시

• 공학, 해부학, 건축 분야의 교육 자료 3D 시각화
• 메타버스 전시회, 미술관 온라인 플랫폼

---

📈 5. 확장 아이디어

기능 설명

✅ 모델 업로드 기능	사용자가 직접 .glb 파일을 업로드
✅ 공유 기능	특정 모델에 대한 링크 복사 & 공유
✅ 캡처 기능	현재 뷰를 이미지로 저장 (canvas to image)
✅ 모바일 대응	반응형 디자인 + TouchControls

---

🔄 6. 정리 및 마무리

이 시리즈에서는 다음과 같은 흐름으로 Three.js 기반 3D 뷰어 웹사이트를 직접 개발했습니다:

1. 프로젝트 개요 및 활용 사례 소개
2. 개발 환경 구축 (React + Vite + Three.js)
3. GLTF 모델 불러오기
4. 애니메이션, 조명, 그림자 적용
5. 성능 최적화
6. 최종 배포 및 실전 활용

이제 여러분만의 3D 뷰어를 만들고, 실제 서비스에 적용할 준비가 끝났습니다.
👉 모델만 바꾸면 다양한 콘텐츠로 확장할 수 있으니 꼭 포트폴리오에 활용해보세요!

---

✅ 시리즈 마무리 한마디

3D 웹은 더 이상 특별한 기술이 아닙니다.
누구나 Three.js를 통해 자신의 콘텐츠를 입체적으로 보여줄 수 있어요.
여러분의 프로젝트에 3D 인터랙션을 더해보세요. 이 시리즈가 그 시작이 되기를 바랍니다 🙌

---