오늘날에는 증강 현실 (AR)과 가상 현실 (VR)을 지원하는 기기를 주머니에 넣고 다니는 것이 일반적입니다. 이러한 기기에서 서로 공유하는 콘텐츠가 3D인 경우가 점점 많아지고 있습니다. 이 코드 랩에서는 <model-viewer>라는 웹 구성요소를 사용하여 웹사이트나 프로그레시브 웹 앱 (PWA)에 3D 콘텐츠를 추가하는 방법을 알아봅니다. HTML로 이미지를 추가하는 것만큼 쉽습니다.
빌드할 항목
AR 홀로그램을 표시할 수 있는 대화형 3D 모델이 포함된 웹사이트
학습할 내용
- 웹사이트에
<model-viewer>웹 구성요소를 설치하는 방법 <model-viewer>를 사용하여 표준 웹 레이아웃에 3D 모델을 표시하는 방법<model-viewer>를 맞춤설정하여 프레젠테이션에 개성 더하기
필요한 항목
- 웹브라우저 Chrome을 권장하지만 최신 브라우저 (Firefox, Safari, Edge)도 작동합니다.
- Node.js 및 텍스트 편집기 또는 Glitch 액세스 권한
- HTML, CSS, JavaScript, Chrome DevTools에 관한 기본 지식
이 Codelab에서는 <model-viewer> 및 3D 모델에 중점을 둡니다. 따라서 이와 관련 없는 개념과 코드 블록은 그냥 넘어가겠습니다. 단, 필요할 때 복사해서 붙여넣을 수 있도록 다른 설명 없이 제공만 해드리겠습니다.
옵션 1 - 글리치
Glitch와 같은 온라인 코드 편집 도구를 사용하여 프로젝트를 호스팅하고 변경사항을 확인할 수 있습니다.
Glitch에서 시작하려면 다음 버튼을 클릭하세요.
여기에서 Glitch의 코드 편집기를 사용하여 파일을 수정하고 준비가 되면 'Show Live' 버튼을 사용하여 애플리케이션을 제공할 수 있습니다. 지금 시도하면 다음 페이지가 표시됩니다.
옵션 2 - 로컬 서버
로컬 서버를 사용하면 원하는 코드 편집기를 사용할 수 있습니다.
서버 설치
로컬 웹페이지를 제공하는 방법이 필요합니다. 간단한 방법은 Node.js와 간단한 정적 콘텐츠 서버인 serve를 사용하는 것입니다.
운영체제에 설치하는 방법은 Node.js 웹사이트를 참고하세요. Node.js가 설치되면 다음 명령어를 실행하여 serve를 설치합니다.
npm install -g serve
코드 다운로드
시작 템플릿과 모든 샘플 애셋을 다운로드할 수 있습니다. 다음 링크를 클릭하고 콘텐츠를 프로젝트를 포함할 디렉터리에 압축 해제합니다.
또는 git을 사용하여 저장소를 클론합니다.
git clone https://github.com/googlecodelabs/model-viewer-codelab.git
서버 실행
위에서 추출한 템플릿 디렉터리 (또는 git을 사용한 경우 클론된 디렉터리 내부)에서 serve 명령어를 실행하여 웹 서버를 시작합니다.
해당 주소 (위 스크린샷에서는 http://localhost:5000이지만 컴퓨터에 따라 다를 수 있음)를 방문하여 매우 간단한 시작점을 확인합니다.
Glitch 웹 편집기를 사용하거나 로컬 서버를 사용하는 경우 즐겨 사용하는 코드 편집기를 통해 index.html 파일을 수정하는 것으로 시작합니다.
<model-viewer> 라이브러리 추가하기
<model-viewer>를 사용하려면 JavaScript 파일 세트를 포함해야 합니다.
다음 섹션에서는 <model-viewer> 라이브러리를 페이지에 추가합니다. <body> 끝에 다음 코드를 붙여넣습니다.
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>콘텐츠를 변경하지 않고 라이브러리만 추가했습니다. 페이지를 새로고침하면 동일한 콘텐츠가 표시됩니다. DevTools 콘솔을 열면 누락된 WebXR API에 관한 경고가 표시될 수 있지만, 이 API가 완전히 출시될 때까지는 예상되는 동작입니다.
호환성 극대화
<model-viewer>는 기본적으로 다양한 최신 브라우저를 지원합니다. 하지만 페이지에서 지원할 수 있는 브라우저 수를 늘리려면 추가 폴리필을 포함하면 됩니다.
전체 권장사항은 아래를 참고하세요. 이를 통해 모든 최신 브라우저에서 우수한 환경을 지원할 수 있습니다. 자세한 내용은 <model-viewer> 폴리필 문서를 참고하세요.
다음 코드를 <head>에 붙여넣습니다.
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->
<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>--><model-viewer> 추가
이제 페이지에 실제 <model-viewer> 태그를 추가하여 3D를 표시해 보겠습니다. 기존 <p> 요소를 다음 코드로 바꿉니다.
<model-viewer src="third_party/Astronaut/Astronaut.glb"
alt="A 3D model of an astronaut">
</model-viewer>여기에서는 두 가지 속성만 언급하면 됩니다.
src속성은 3D 모델을 로드할 위치를 지정합니다. 이 예에서는 CC-BY 라이선스에 따라 제공되는 Poly의 Astronaut 모델을 사용했습니다.alt속성에는 접근성을 위한 모델의 대체 텍스트 설명이 포함됩니다.
이 두 속성은 img 태그의 속성과 매우 유사합니다.
새로고침하면 우주비행사가 표시됩니다.
좋은 소식입니다. 웹에 3D 모델이 있습니다.
다음 단계에서는 더 많은 상호작용과 동작을 실험하고, 요소의 모양을 변경하고, AR을 살짝 살펴봅니다.
모델에 약간의 상호작용을 추가해 보겠습니다. 기본적으로 모델이 회전하여 모델이 상호작용 가능함을 사용자에게 힌트로 알려주고 (또한 모델을 보여주기 위해) 사용자가 마우스나 터치를 통해 직접 모델을 이동할 수 있도록 컨트롤을 사용 설정합니다.
이렇게 하려면 <model-viewer> 요소에 auto-rotate 및 camera-controls 속성을 추가하면 됩니다.
<model-viewer src="third_party/Astronaut/Astronaut.glb"
auto-rotate camera-controls
alt="A 3D model of an astronaut">
</model-viewer>페이지를 새로고침하면 우주인이 천천히 회전합니다. 마우스를 클릭하고 이동하거나 터치 지원 기기에서 손가락을 드래그하여 모델을 드래그하면 모델이 회전합니다.
이러한 기능을 결합하면 사용자에게 정적 이미지 이상의 콘텐츠라는 힌트를 제공하고 상호작용성을 부여하여 참여도를 높일 수 있습니다 (모델의 뒷면을 볼 수 있음).
이제 모션이 있으므로 외형을 조정하여 모델을 정말 매력적으로 만들어 보겠습니다.
모델 업데이트
이러한 변경사항 중 일부 (특히 조명 변경사항)는 특정 모델에서 가장 잘 표시됩니다. 먼저 src 속성을 새 모델인 third_party/DamagedHelmet/DamagedHelmet.gltf (Sketchfab에서 크리에이티브 커먼즈 저작자 표시-비상업적 라이선스로 출시됨)을 가리키도록 업데이트합니다. 이제 전체 요소의 소스가 다음과 같이 표시됩니다.
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
auto-rotate camera-controls
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>이 모델은 곧 적용될 변경사항을 보여줍니다.
배경 색상 변경
먼저 배경색을 변경하여 모델이 페이지에서 눈에 띄도록 합니다. <model-viewer> 태그에 다음 속성을 추가합니다.
background-color="#70BCD1"
환경 맵 설정
환경 맵은 모델에서 반영되는 둘러싸는 장면을 제공하고 조명 구성을 지정하는 데 사용됩니다. 기본 조명은 우수하며 ARCore의 Scene Viewer 조명과 호환되지만, 맞춤 환경이 있거나 달성하려는 결과에 맞는 조명이 필요할 수도 있습니다. 환경-이미지 속성을 지정해 보겠습니다 (studio_small_07_1k.hdr은 hdrihaven.com에서 가져옴).
environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"
그림자 추가하기
객체에 그림자를 드리우면 장면의 깊이가 더해집니다. 다음 속성을 <model-viewer> 요소에 추가하면 그림자가 표시됩니다.
shadow-intensity="1"
조명 강도 변경하기
모델이 약간 어둡습니다. 세부정보를 더 잘 볼 수 있도록 조명을 약간 밝혀 보겠습니다. 기본 무대 조명과 추가한 환경 맵의 조명은 모두 독립적으로 조정할 수 있습니다. 다음을 추가하세요.
stage-light-intensity="3" environment-intensity="2"각 변경사항은 매우 작았지만 이제 모델이 훨씬 나아 보입니다.
다음으로 몇 가지 대체 표시 모드를 살펴보겠습니다.
증강 현실 (AR)을 사용할 수 있는 기기가 점점 더 많아지고 있습니다. 이러한 모드 중 일부는 트리거하기 어렵거나 특수 코드가 필요하지만 <model-viewer>가 이 모든 복잡성을 처리할 수 있습니다.
ARCore의 Scene Viewer
지원되는 기기에서 <model-viewer>는 ARCore의 Scene Viewer를 트리거할 수 있습니다. <model-viewer> 요소에 ar 속성을 추가합니다. 이렇게 하면 됩니다.
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
ar
auto-rotate camera-controls
background-color="#70BCD1"
shadow-intensity="1"
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>이제 최신 ARCore가 설치된 지원 기기에서 이를 보면 아래 그림과 같이 아이콘이 추가로 표시됩니다. 이 버튼을 클릭하면 장면 탐색기에서 모델이 열립니다.
기타 기기 - iOS 빠른 보기, Magic Leap, WebXR
다른 많은 기기는 좀 더 많은 작업이 필요합니다.
iOS에서 ios-src 속성을 사용하면 iOS에 필요한 3D 모델의 추가 USDZ 버전을 지정할 수 있습니다. 이 속성이 제공되면 지원되는 iOS 기기의 모델에 표준 AR 빠른 보기 아이콘이 표시됩니다. USDZ에 관한 자세한 내용은 Apple의 개발자 문서를 참고하세요.
Magic Leap 기기에서 magic-leap 속성은 AR 지원을 사용 설정합니다. prismatic.js 라이브러리도 포함해야 합니다(선택적 폴리필에 포함되어 있지만 주석 처리됨). 3D 모델은 .gltf가 아닌 .glb 파일이어야 합니다.
<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>카메라의 초기 각도와 위치를 제어할 수 있습니다. 이 컨트롤을 사용하면 사용자에게 헬멧의 더 나은 기본 뷰를 표시할 수 있습니다. <model-viewer> 태그에 다음 스니펫을 추가합니다.
camera-orbit="-20deg 75deg 2m"
물론 이러한 모델은 반응형 페이지를 비롯한 다른 콘텐츠와 함께 사용할 수 있습니다. 반응형 웹페이지를 빌드하는 것은 이 Codelab의 범위를 벗어나지만 반응형 웹 디자인 기본사항에서 자세히 알아보세요.
저장소에 샘플 페이지가 포함되어 있습니다. responsive.html를 데스크톱과 같은 와이드스크린으로 확인해 보세요.
좁은 뷰포트 (예: 휴대기기)의 동일한 페이지:
웹에 3D 콘텐츠를 삽입했습니다. 훌륭합니다.
다음 단계
더 많은 구성 옵션이 있습니다. 자세한 내용은 온라인 문서 또는 코드를 참고하세요.
모델을 식별한 후 고려할 수 있는 몇 가지 다음 단계는 다음과 같습니다.
- 일부 모델은 상당히 클 수 있습니다. 이러한 경우 <model-viewer>는 여전히 우수한 환경을 제공하는 여러 방법을 제공합니다. 자세한 내용은 지연 로드 문서 페이지를 참고하세요.
- 애니메이션 모델은 정말 재미있을 수 있습니다. 모델에 정의된 애니메이션을 사용 설정하고 애니메이션 간에 전환하는 방법에 관한 자세한 내용은 애니메이션 페이지를 참고하세요.
- 이 모델은 웹페이지에 삽입하여 콘텐츠를 보완할 수 있습니다.
개발 프로세스는 GitHub에서 공개됩니다. 여러분의 의견을 기다립니다.