google/model-viewer

개요 웹과 AR에서 인터랙티브 3D 모델을 쉽게 표시할 수 있는 Google의 Web Component다. `<model-viewer>` 태그 하나로 GLTF/GLB 모델을 웹에 임베드하고, iOS/Android에서 AR 뷰어로 연결할 수 있다.

핵심 내용 HTML 커스텀 엘리먼트로 제공되어 `<model-viewer src="model.glb" ar></model-viewer>` 한 줄로 3D 뷰어를 구현한다. WebXR API와 iOS Quick Look을 활용해 모바일에서 AR로 전환된다. 360도 회전, 자동 회전, 환경 맵, 애니메이션 재생 등을 속성으로 제어할 수 있다.

기존 대비 차별점 Three.js로 직접 3D 뷰어를 구현하면 수백 줄의 코드가 필요하다. model-viewer는 Web Component로 캡슐화되어 프레임워크 없이 HTML만으로 프로덕션 수준의 3D/AR 뷰어를 구현할 수 있다.

활용 가능성 이커머스 상품 3D 뷰어, 가구/인테리어 AR 미리보기, 제품 카탈로그, 교육용 3D 모델 전시, 건축 모델 프리뷰 등 웹에서 3D/AR 경험이 필요한 모든 곳에 활용할 수 있다.

참고 자료 - 원본