지난 2월 Google에서는 3D 모델을 웹페이지에 선언적으로 추가하면서 자체 사이트에서 모델을 호스팅할 수 있는 <model-viewer> 웹 구성요소를 도입했습니다. 증강 현실은 지원하지 않았습니다. 즉, 기기의 카메라 피드 위에 구성요소의 소스 이미지를 렌더링할 수 없습니다.
이를 위해 iOS에 Magic Leap 및 Quick Look 지원을 추가했습니다. 이제 ar 속성을 추가하여 Android에서 AR을 지원한다는 소식을 알려드립니다. 이 속성은 3D 모델을 볼 수 있는 외부 앱인 Scene Viewer라는 새로운 ARCore 기능을 기반으로 합니다. Scene Viewer에 관한 자세한 내용은 Android 브라우저에서 AR로 3D 모델 보기를 참고하세요.
<model-viewer>로 증강 현실을 실행하는 방법을 알아보겠습니다.
속성
아시다시피 웹 구성 요소는 사용하는 데 특별한 지식이 필요하지 않습니다. 표준 HTML 요소처럼 동작하며 고유한 태그와 속성, 메서드를 가집니다. <script> 태그를 사용하여 설치한 후 다른 HTML 요소와 마찬가지로 사용합니다.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
이전 기사에서와 거의 동일하게 보입니다. 맨 마지막에 강조 표시한 것을 보세요. 바로 새로운 속성입니다.
새 버전 설치 중
이미 <model-viewer>를 사용 중인 경우 문서에 설명된 대로 <script> 태그를 사용하여 구성요소를 가져오고 있을 것입니다.
Google에서는 이를 지속적으로 개선하기 위해 노력하고 있습니다. 의도적으로 업그레이드하고 배포하기 전에 새로운 기능을 테스트하려면 특정 버전의 <model-viewer>를 설치해야 합니다. 이렇게 하려면 아래와 같이 파일 URL에 버전 번호를 추가합니다. 그런 다음 출시 페이지에서 업데이트를 확인하세요.
<script type="module"
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>
<script nomodule
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>
결론
<model-viewer>의 새 버전을 사용해 보고 의견을 알려 주세요.
문제와 의견은 GitHub에서 보내주세요.