如今，許多人身上都攜帶支援擴增實境 (AR) 和虛擬實境 (VR) 的裝置。我們越來越常透過這些裝置分享 3D 內容。在本程式碼研究室中，您將瞭解如何使用名為 <model-viewer> 的網頁元件，輕鬆地將 3D 內容新增至網站或漸進式網頁應用程式 (PWA)，就像使用 HTML 新增圖片一樣簡單！
建構目標
含有互動式 3D 模型，可顯示 AR 全像投影的網站
課程內容
- 如何在網站上安裝
<model-viewer>網頁元件 - 如何使用
<model-viewer>在標準網頁版面配置中呈現 3D 模型 - 如何自訂
<model-viewer>，讓簡報更生動有趣
軟硬體需求
- 網路瀏覽器。建議使用 Chrome，但任何新式瀏覽器 (Firefox、Safari、Edge) 都可以。
- Node.js 和文字編輯器，或 Glitch 的存取權。
- 具備 HTML、CSS、JavaScript 和 Chrome 開發人員工具的基本知識。
本程式碼研究室著重於 <model-viewer> 和 3D 模型。我們不會對與本主題無關的概念和程式碼多做介紹，但會事先準備好這些程式碼區塊，屆時您只要複製及貼上即可。
選項 1 - Glitch
您可以使用 Glitch 等線上程式碼編輯工具代管專案，並查看變更。
如要開始使用 Glitch，請點選下列按鈕：
從現在開始，您可以使用 Glitch 上的程式碼編輯器修改檔案，準備就緒後，即可使用「Show Live」按鈕開始放送應用程式。現在試試看，您應該會看到下列頁面：
選項 2 - 本機伺服器
本機伺服器可讓您使用偏好的程式碼編輯器。
安裝伺服器
我們需要提供本機網頁的方法。簡單的方法是透過 Node.js 和 serve (簡單的靜態內容伺服器)。
如需在作業系統上安裝 Node.js 的操作說明，請參閱 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>我們只是新增了程式庫，內容並未變更。重新整理頁面後，您會看到相同的內容。開啟開發人員工具控制台時，您可能會看到一些有關缺少 WebXR API 的警告，但這些警告是預期會出現的，直到該 API 正式發布為止。
盡量提高相容性
<model-viewer> 預設支援許多現代瀏覽器。不過，如要擴大網頁支援的瀏覽器數量，可以加入其他 polyfill。
完整建議組合如下。這些做法有助於在所有現代瀏覽器上提供優質體驗。詳情請參閱 <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 模型。在本範例中，我們使用的是 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 的 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 屬性可指定 3D 模型額外的 USDZ 版本 (iOS 必須使用這個版本)。提供這項屬性後，支援的 iOS 裝置就會在模型上顯示標準的 AR 快速查看圖示。如要進一步瞭解 USDZ，請參閱 Apple 的開發人員說明文件。
在 Magic Leap 裝置上，magic-leap 屬性會啟用 AR 支援功能。請注意，您也必須加入 prismatic.js 程式庫 (選用 Polyfill 中已包含這個程式庫，但已註解)，且 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 內容嵌入網頁！做得好！
後續步驟
確認模型後，建議您考慮採取下列步驟：
- 有些模型可能相當龐大，在這些情況下，<model-viewer> 提供多種方法，仍可提供絕佳體驗。如要瞭解詳情，請參閱延遲載入說明文件頁面。
- 動畫模型非常有趣！如要進一步瞭解如何啟用 (及切換) 模型中定義的動畫，請參閱「動畫」頁面。
- 這還是網頁，模型可以嵌入網頁，補充內容！
我們的開發程序已在 GitHub 上公開。歡迎與我們分享你的意見與想法！