現今，人們常會在口袋中納入可擴增實境 (AR) 和虛擬實境 (VR) 的裝置。越來越多人透過這些裝置分享 3D 內容。在本程式碼研究室中，您將瞭解如何使用 <model-viewer> 的網頁元件，在網站或漸進式網頁應用程式 (PWA) 中添加 3D 內容，就像使用 HTML 來新增圖片一樣簡單！
建構目標
網站包含互動式 3D 模型，可以顯示 AR 全形圖
您將會瞭解的內容
- 如何在網站中安裝
<model-viewer>網頁元件 - 如何使用
<model-viewer>在標準網頁版面配置中呈現 3D 模型 - 如何自訂
<model-viewer>，為簡報增添趣味
軟硬體需求
- 網路瀏覽器。建議您使用 Chrome，但所有新式瀏覽器 (Firefox、Safari、Edge) 皆可使用。
- Node.js 和文字編輯器，或 Glitch 的存取權。
- HTML、CSS、JavaScript 和 Chrome DevTools 的基本知識。
本程式碼研究室著重於 <model-viewer> 和 3D 模型。內含不相關的概念和程式碼區塊會重疊在外，可供您直接複製並貼上。
選項 1 - Glitch
您可以使用 Glitch 等線上程式碼編輯工具來代管專案並查看變更。
如要開始使用 Glitch，請按一下下列按鈕：
您可以在這裡使用 Glitch 的程式碼編輯器來修改檔案，準備好之後，請透過 [顯示即時內容] 按鈕開始提供應用程式。現在就試試這項功能吧！您應該會看到以下網頁：
選項 2 - 本機伺服器
本機伺服器可讓您使用自己偏好的程式碼編輯器。
安裝伺服器
我們需要一個方法來提供本地網頁。最簡單的方法是透過 Node.js 和 serve 這個簡單的靜態內容伺服器。
請參閱 Node.js 網站，瞭解如何在作業系統上安裝這個程式。安裝 Node.js 之後，請執行下列指令來安裝服務：
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> 程式庫
我們必須加入一組 JavaScript 檔案，才能使用 <model-viewer>。
下節將「ltlt;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 會在正式發布之前提供。
將相容性調整到最大
立即可用的 <lt;model-viewer> 支援多種新式瀏覽器。不過，如果您想要擴充網頁支援的瀏覽器數量，可以加入額外的 polyfill。
以下是我們完整的建議組合。讓所有新式瀏覽器都能提供絕佳的使用體驗。詳情請參閱 <model-viewer> polyfills 說明文件。
將下列程式碼貼到「<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 模型的位置。在本範例中，我們使用 Poly 的 Astronaut 模型，該模型已根據 CC-BY 授權提供。alt屬性包含用於無障礙功能的替代文字說明。
您可能會注意到，這兩個屬性都有大量的 img 標記平行平行。
重新載入時會顯示太空人：
太好了！網路上有一個 3D 模型！
在以下步驟中，我們會進行額外的互動和動作，改變元素的外貌，然後將音調進入 AR。
讓我們為模型增添一些互動性。在預設狀態下，模型會旋轉，讓使用者知道模型是互動的 (而且可以顯示該模型)，然後啟用控制項，讓使用者能夠透過滑鼠或觸控操作自行移動模型。
方法很簡單，只要將 auto-rotate 和 camera-controls 屬性加進 <model-viewer> 元素即可。
<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 的「創用 CC 姓名標示 - 非商業授權」所發布)。現在整個元素的來源應如下所示：
<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 的場景觀測器的照明相容)，但有時您可能會擁有自訂環境，或需要針對您嘗試達到的成果提供專屬的照明。就指定環境圖片屬性 (studio_small_07_1k.hdr 來源為 hdrihaven.com)。
environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"
加上陰影
讓物體投放陰影，使場景的深度增加。將下列屬性新增至我們的 <model-viewer> 元素時，會投射陰影：
shadow-intensity="1"
變更光線強度
這個模型有點暗；我們來點亮燈，讓您可以看到更多細節。預設的中心區域照明和新增的 Environ 地圖的點陣圖可以個別調整。新增：
stage-light-intensity="3" environment-intensity="2"這些變動雖然非常小，但模型現在看起來也比較好！
接著，我們來看看一些替代的顯示模式。
越來越多裝置支援擴增實境 (AR)。有些模式難以觸發或需要特殊的程式碼，但 [lt;model-viewer> 可處理所有複雜性！
ARCore's 場景切換檢視者
在支援的裝置上，<lt;model-viewer>可以觸發 ARCore's 場景切換檢視器。將 ar 屬性新增至您的 <model-viewer> 元素 - 沒錯，這就大功告成了！
<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 且支援的裝置上查看此內容，就會看到一個額外的圖示 (如下圖所示)。只要按一下即可在 Scene Explorer 中開啟模型！
其他裝置 - iOS Quick Look、Magic Leap、WebXR
還有許多裝置需要處理更多工作。
在 iOS 裝置上，指定 ios-src 屬性後，可以再指定其他 3D 模型 (iOS 需要此版本)。提供這個屬性後，在支援的 iOS 裝置上，模型上會顯示標準 AR 「快速查看」圖示。如要進一步瞭解 USDZ，請參閱 Apple 的開發人員說明文件。
在 Magic Leap 裝置上，magic-leap 屬性會啟用 AR 支援功能。請注意，您也必須加入 prismatic.js 程式庫 (這是在選擇性的 polyfills 中已加註但已加註)，而且 3D 模型必須是 .glb 檔案 (而非 .gltf)。
<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>您可以控制攝影機的初始角度和位置。這個控制項可讓使用者看到更優質的頭盔預設檢視。將下列程式碼片段加進您的 <model-viewer> 代碼：
camera-orbit="-20deg 75deg 2m"
當然，這類模式可搭配其他內容使用，包括在回應式網頁上。建立回應式網頁並不在此程式碼研究室所涵蓋的範圍，但您可參閱回應式網頁設計基本須知，進一步瞭解相關資訊。
我們已在存放區中加入範例網頁。在寬螢幕模式 (例如桌面) 上查看「responsive.html」：
位於縮小檢視區 (例如行動裝置) 中的相同網頁：
您已經將一段 3D 內容嵌入網路！做得好！
後續步驟
識別出您的模型後，建議您思考以下幾個後續步驟：
- 某些型號可能相當龐大。在這些情況下，<lt;model-viewer> 提供多種方法以繼續提供絕佳的體驗。如需詳細資訊，請參閱延遲載入說明文件頁面。
- 動畫模型可能很有趣！請參閱動畫頁面，進一步瞭解如何啟用及切換模型中定義的動畫。
- 而且網路世界仍然存在，模型可以嵌入網頁來補充內容！
我們的開發程序已在 GitHub 上開放。我們迫不及待想聽聽呢！