웹사이트에 3D 모델을 추가하는 것은 까다로울 수 있습니다. <model-viewer>는 HTML을 작성하는 것만큼이나 쉽습니다
웹사이트에 3D 모델을 추가하는 것은 까다롭습니다. 3D 모델은 스마트폰, 데스크톱 또는 새로운 머리 장착용 디스플레이를 비롯한 모든 브라우저에서 반응할 수 있는 뷰어에 이상적으로 표시됩니다. 뷰어는 성능 및 렌더링 품질의 점진적인 개선을 지원해야 합니다. 구형 저전력 스마트폰부터 증강 현실을 지원하는 최신 기기까지 모든 기기의 사용 사례를 지원해야 합니다. 최신 기술을 최신 상태로 유지해야 합니다. 성능이 우수하고 액세스 가능해야 합니다. 그러나 이러한 뷰어를 빌드하려면 전문적인 3D 프로그래밍 기술이 필요하며, 서드 파티 호스팅 서비스를 사용하는 대신 자체 모델을 호스팅하려는 웹 개발자에게는 어려울 수 있습니다.
하지만 <model-viewer> 웹 구성요소를 사용하면 3D 모델을 웹페이지에 선언적으로 추가하면서 자체 사이트에서 모델을 호스팅할 수 있습니다.
구성요소의 목표는 기반 기술과 플랫폼을 이해하지 않고도 3D 모델을 웹사이트에 추가할 수 있도록 하는 것입니다.
웹 구성요소는 반응형 디자인을 지원하며 일부 기기에서는 증강 현실과 같은 사용 사례를 지원합니다.
여기에는 접근성, 렌더링 품질, 상호작용을 위한 기능이 포함됩니다.
웹 구성요소란 무엇인가요?
웹 구성요소는 표준 웹 플랫폼 기능으로 빌드된 맞춤 HTML 요소입니다. 웹 구성요소는 표준 요소처럼 모든 인텐트와 목적을 위해 동작합니다. 또한 고유 태그가 있고, 속성과 메서드를 가질 수 있으며, 이벤트를 실행하고 응답할 수 있습니다. 즉, 웹 구성요소를 사용하기 위해 특별한 지식이 필요하지 않으며 <model-viewer>에 관한 정보가 훨씬 적습니다.
이 도움말에서는 <model-viewer>에만 해당하는 기능을 설명합니다.
웹 구성요소에 대해 자세히 알아보려면 webcomponents.org를 살펴보는 것이 좋습니다.
<model-viewer> 앱이 어떤 작업을 수행할 수 있나요?
다음 예는 <model-viewer>의 일부 기능을 보여줍니다.
기본 3D 모델
3D 모델 삽입은 다음 마크업만큼 간단합니다. 이 구성요소는 glb 파일을 사용하여 모든 주요 브라우저에서 작동합니다.
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
id="mv-shark"
src="shark.glb"
camera-controls
></model-viewer>
이 코드는 다음과 같이 렌더링됩니다.
모션 및 상호작용 추가
auto-rotate 및 camera-controls 속성은 모션과 사용자 제어를 제공합니다. 이것 외에도 가능한 속성이 있습니다. 전체 속성 목록은 문서를 참고하세요.
<model-viewer src="shark.glb" auto-rotate camera-controls>
포스터 이미지로 로드 지연
모든 3D 모델을 로드하는 데 시간이 걸리므로 poster 속성을 추가하면 모델을 사용할 준비가 될 때까지 이미지가 표시됩니다.
3D 렌더와 동일하게 보이는 포스터 이미지는 편집기를 사용하여 생성할 수 있습니다.
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
반응형 디자인
이 구성요소는 모바일과 데스크톱에 맞게 확장되는 일부 유형의 반응형 디자인을 처리합니다. 또한 페이지에서 여러 인스턴스를 관리할 수 있으며, Intersection Observer를 사용하여 모델이 표시되지 않는 경우 배터리 전력 및 GPU 사이클을 보존합니다.
앞에서 설명한 편집기를 사용하여 포스터 이미지를 만들면 <model-viewer>의 가로세로 비율이 다양한 화면 크기에 반응하더라도 단일 이미지를 3D 렌더링과 일치시킬 수 있습니다.
기타 특징
고급 기능의 데모는 <model-viewer> 문서를 참조하세요.
여기에는 지면에 투영된 스카이박스를 추가하고 애니메이션 텍스처 및 핫스팟을 만드는 기능이 포함됩니다.