<model-viewer> 웹 구성요소

웹사이트에 3D 모델을 추가하는 것은 쉽지 않을 수 있습니다. <model-viewer>는 HTML을 작성하는 것만큼이나 쉽습니다.

Joe Medley
Joe Medley

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