如今，人们能够随身携带增强现实 (AR) 和虚拟实境 (VR) 的设备。我们在这些设备上彼此分享的内容越来越多地采用 3D 形式。在此 Codelab 中，您将学习如何使用名为 <model-viewer> 的网络组件将 3D 内容添加到您的网站或渐进式 Web 应用 (PWA)，就像添加 HTML 图片一样简单！
构建内容
包含能够显示 AR 全息图的交互式 3D 模型的网站
学习内容
- 如何在您的网站上安装
<model-viewer>网络组件 - 如何使用
<model-viewer>在标准网页布局中呈现 3D 模型 - 如何自定义
<model-viewer>以向演示文稿添加装饰
所需条件
- 网络浏览器。我们建议使用 Chrome，但任何新型浏览器（Firefox、Safari、Edge）均可使用。
- Node.js 和文本编辑器，或者访问 Glitch。
- 具备 HTML、CSS、JavaScript 和 Chrome 开发者工具方面的基础知识。
此 Codelab 重点介绍 <model-viewer> 和 3D 模型。对于不相关的概念，我们仅会略作介绍，但是会提供不相关的代码块供您复制和粘贴。
选项 1 - 干扰
您可以使用 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
运行服务器
从上面提取的模板目录（如果克隆了，请克隆克隆目录内）中，运行 serve 命令以启动网络服务器：
访问该地址（在上面的屏幕截图中，该地址为 http://localhost:5000，但在您的计算机上可能有所不同），以查看非常简单的起点：
我们首先要通过 Glitch Web 编辑器或您最喜欢的代码编辑器（如果您使用的是本地服务器）修改 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>我们只是添加了库，未更改内容 - 刷新页面后，看到的是同样的内容。如果打开 DevTools 控制台，您可能会看到一些关于缺少 WebXR API 的警告，但在 API 完全发布之前，这些警告始终都在预期中。
最大限度地提高兼容性
<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 的知识共享署名-非商业用途许可发布）。整个元素的来源现在应如下所示：
<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) 技术。其中一些模式难以触发或需要特殊代码，但 &model;viewer-g> 可以为您处理所有这些复杂任务！
ARCore 的场景查看器
在受支持的设备上，<model-viewer> 可以触发 ARCore's Scene Viewer。将 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 模型的 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"
当然，这些模型也可以用于其他内容，包括自适应网页。构建自适应网页不在本 Codelab 的讨论范围内，但如需了解详情，请参阅自适应网页设计基础知识。
我们在代码库中添加了一个示例页面。请参阅responsive.html（适用于桌面设备），在宽屏模式下查看：
同一网页，在窄视口（如移动设备）中：
您已经将一段 3D 内容嵌入网络！非常棒！
后续操作
还有许多配置选项可供选择。请参阅我们的在线文档或代码了解详情。
确定模型后，您可能需要考虑后续步骤：
- 某些模型可能非常大。在这些情况下，<model-viewer> 提供了多种方法来提供出色的体验。如需了解详情，请参阅延迟加载文档页面。
- 动画模型真的很有趣！请参阅我们的动画页面，详细了解如何启用（以及切换）在模型中定义的动画。
- 而这仍然存在于网络 - 模型可以嵌入您的网页，以补充您的内容！
我们的开发流程在 GitHub 上开放。我们乐意洗耳恭听！