如今，人们经常会随身携带支持增强现实 (AR) 和虚拟现实 (VR) 的设备。我们通过这些设备相互分享的内容也越来越趋向于 3D。在此 Codelab 中，您将学习如何使用名为 <model-viewer> 的 Web 组件，像使用 HTML 添加图片一样轻松地向网站或渐进式 Web 应用 (PWA) 添加 3D 内容！
构建内容
包含互动式 3D 模型且能够显示 AR 全息图的网站
学习内容
- 如何在网站上安装
<model-viewer>Web 组件 - 如何使用
<model-viewer>在标准网页布局中呈现 3D 模型 - 如何自定义
<model-viewer>以使演示更精彩
所需条件
- 网络浏览器。我们建议使用 Chrome，但任何现代浏览器（Firefox、Safari、Edge）都可以。
- Node.js 和文本编辑器，或 Glitch 的访问权限。
- 具备 HTML、CSS、JavaScript 和 Chrome 开发者工具方面的基础知识。
本 Codelab 主要介绍 <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 命令以启动 Web 服务器：
访问该地址（在上面的屏幕截图中，该地址为 http://localhost:5000，但在您的机器上可能有所不同），您会看到一个非常简单的起点：
我们将首先通过 Glitch 网页编辑器或您惯用的代码编辑器（如果您使用的是本地服务器）修改 index.html 文件。
添加 <model-viewer> 库
我们需要包含一组 JavaScript 文件才能使用 <model-viewer>。
以下部分会将 <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 提供的宇航员模型，该模型已根据 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 上以知识共享署名-非商业用途许可发布）。整个元素的来源现在应如下所示：
<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 的场景查看器的光照效果兼容），但有时您可能需要自定义环境，或者需要特定的光照效果才能实现所需的结果。我们来指定 environment-image 属性（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 的场景查看器。将 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 的设备上查看此内容，会看到一个额外的图标（如下图所示）。点击该按钮即可在场景探索器中打开模型！
其他设备 - iOS 快速查看、Magic Leap、WebXR
许多其他设备需要进行更多操作。
在 iOS 上，ios-src 属性允许指定 3D 模型的其他 USDZ 版本（这是 iOS 所必需的）。如果提供此属性，则标准 AR 快速查看图标将显示在支持的 iOS 设备上的模型上。如需详细了解 USDZ，请参阅 Apple 的开发者文档。
在 Magic Leap 设备上，magic-leap 属性将启用 AR 支持。请注意，您还必须包含 prismatic.js 库（可选填充中包含此库，但已注释掉），并且 3D 模型必须是 .glb 文件（而不是 .gltf 文件）。
<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 上公开。我们期待收到您的宝贵意见！