웹사이트에 3D 모델 삽입 방법 (HTML 및 CSS만 사용)

카테고리

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

서브카테고리

웹 개발

대상자

웹 개발자 및 디자이너 (초보자 대상, 프레임워크 사용 없이 간단한 HTML/CSS 기반으로 3D 모델 삽입 방법 설명)

핵심 요약

• 웹 컴포넌트를 사용해 .glb 또는 .gltf 형식의 3D 모델을 HTML에 직접 삽입 가능
• src, shadow-intensity, camera-controls 등 필수 속성을 통해 모델 표시 및 제어 가능
• 모든 주요 현대 브라우저 지원, 단 AR 기능은 Safari 및 Mozilla 브라우저 제한 있음

섹션별 세부 요약

1. 3D 모델 준비

• Sketchfab 등에서 .glb 또는 .gltf 형식의 3D 모델 다운로드 권장
• .glb는 단일 파일, .gltf는 폴더 내 여러 파일 구성 (scene.gltf 파일 필수)
• 파일 경로 오류 주의 (예: src="shenron_dragon_ball/scene.gltf")

2. `` 설정

• Google의 model-viewer 웹 컴포넌트 사용 (Three.js 등 외부 라이브러리 필요 없음)
• HTML 파일에