3D 모델을 HTML/CSS로 웹에 통합하는 방법 - model-viewer 사용
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

3D 모델을 HTML과 CSS만으로 웹사이트에 통합하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 웹 개발자: HTML/CSS 기반 3D 모델 통합에 관심 있는 중급 이상 개발자

- 난이도: 중급(프레임워크 없이 HTML/CSS만 사용)

핵심 요약

  • model-viewerThree.js 없이도 .glb/.gltf 포맷의 3D 모델을 웹에 직접 임베딩할 수 있는 웹 컴포넌트
  • .gltf 포맷은 scene.gltf 파일과 관련된 추가 파일을 모두 유지해야 정상 작동
  • 서버 설정 필수: 로컬 파일 시스템에서 직접 열면 작동하지 않음 → Live Server 확장 프로그램 사용 권장

섹션별 세부 요약

1. 3D 모델 다운로드 및 준비

  • Sketchfab 등 플랫폼에서 .glb 또는 .gltf 포맷의 3D 모델 다운로드
  • .gltf 포맷은 scene.gltf 파일과 관련된 다른 파일을 모두 포함한 폴더로 다운로드
  • .gltf 사용 시 scene.gltf 파일과 관련된 파일을 삭제하지 말 것

2. `model-viewer` 컴포넌트 사용

  • Google의 model-viewer는 HTML 태그로 3D 모델을 렌더링 가능
  • 태그 사용 시 src 속성으로 모델 파일 경로 지정

- .glb 파일: src="modelo.glb"

- .gltf 파일: src="modelo/scene.gltf"

  • shadow-intensity 속성으로 모델의 그림자 강도 조절 가능

3. `model-viewer` 스타일링 및 기능 확장

  • CSS로 model-viewer전체 화면 너비/높이 적용 가능:

```css

model-viewer {

width: 100vw;

height: 100vh;

}

```

  • camera-controls 속성으로 사용자가 모델을 회전/줌 가능

4. 브라우저 호환성 및 제한사항

  • 모든 주요 브라우저에서 지원(Chrome, Firefox, Edge 등)
  • AR 기능은 Safari 및 Mozilla 브라우저에서 제한적 지원

결론

  • model-viewer를 사용해 3D 모델을 통합할 때 파일 경로 설정서버 환경 구성에 주의
  • Live Server 확장 프로그램을 사용해 로컬 서버를 띄우고 테스트
  • .gltf 포맷 사용 시 모든 관련 파일을 유지해야 정상 작동
  • AR 기능은 일부 브라우저에서 제한적 지원 → 기본 3D 기능은 모든 브라우저에서 안정적