지난 2월에는 웹페이지에 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> 태그를 사용하여 구성요소를 가져오는 것입니다.
YouTube는 지속적으로 기능을 개선하고 있습니다. 의도적으로 업그레이드하고 배포하기 전에 새 기능을 테스트하려면 특정 버전의 <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에서 환영합니다.