3D 모델을 HTML과 CSS만으로 웹사이트에 통합하는 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 개발자: HTML/CSS 기반 3D 모델 통합에 관심 있는 중급 이상 개발자
- 난이도: 중급(프레임워크 없이 HTML/CSS만 사용)
핵심 요약
model-viewer
는 Three.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 기능은 모든 브라우저에서 안정적