웹사이트에 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>
문서를 참고하세요.
여기에는 지상에 투사된 스카이박스를 추가하고 애니메이션 텍스처 및 핫스팟을 만드는 기능이 포함됩니다.