지난 2월 Google은 <model-viewer> 웹 구성요소를 도입했습니다.
이를 통해 웹페이지에 선언적으로 3D 모델을 추가하는 동시에
모델을 직접 빌드해 보시기 바랍니다. 하지만 증강 현실은 지원하지 않았습니다. 그 것이
기기의 소스 이미지 위에 구성요소의 소스 이미지를
카메라 피드에 표시되지 않습니다.
이를 위해 iOS에 Magic Leap과 Quick Look 지원 기능을 추가했습니다. 진행 중
ar
속성의 값을 제공합니다. 이 속성은 Scene Viewer라는 새로운 ARCore 기능을 기반으로 구축되어 있습니다.
3D 모델을 보기 위한 외부 앱 Scene Viewer에 대해 자세히 알아보려면
Android 브라우저에서 AR로 3D 모델 보기를 확인하세요.
<model-viewer>로 증강 현실을 구현하는 방법을 알아보겠습니다.
속성
아시다시피 웹 구성 요소는 사용하기 위해 특별한 지식이 필요하지 않습니다. 그것은
은(는) 표준 HTML 요소처럼 동작하며, 고유한 태그와 속성을 가지고 있습니다.
메서드를 제공합니다. 후(After)
<script> 태그로 설치
다른 HTML 요소처럼 사용할 수 있습니다.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
이것은 이전 기사에서 확인한 것과 거의 같습니다. 주목할 점 끝부분에 강조 표시해 두었습니다. 이것이 새 속성입니다.
새 버전 설치 중
이미 <model-viewer>를 사용하고 있다면 구성요소를 가져오려고 할 수 있습니다.
<script> 태그를 정확하게 사용하여
문서에 표시된 대로 작성할 수 있습니다.
기능을 지속적으로 개선하고 있습니다. 새 기능이 출시되기 전에
의도적으로 업그레이드 및 배포하는 경우
(총 <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>의 새 버전을 사용해 보시고 의견을 알려주세요.
문제와 의견은
환영합니다.