使用 <model-viewer> 的增强现实

<model-viewer> 网络组件可用于在网页上查看和与 3D 模型互动，并可无缝过渡到在网页上放置增强现实模型并与之互动。

在支持 ARCore 的 Android 设备上查看时，具有 ar 属性的 <model-viewer> 组件会显示一个按钮，如以下示例所示：

模型查看器屏幕截图

在支持 ARCore 的设备上点按此按钮将使用 Chrome 的 WebXR 功能或 Scene Viewer 应用显示模型，具体取决于 ar-modes 属性的值。

可以使用 Web 组件槽来自定义 AR 按钮的外观。如需查看示例，请参阅 <model-viewer> documentation。另请参阅 Scene Viewer，详细了解如何通过 Android 应用或浏览器在 AR 中显示交互式 3D 模型。

开始使用 <model-viewer>

以下步骤展示了如何在任何网页上开始使用 <model-viewer>。

添加 <model-viewer> 依赖项

来自 unpkg CDN

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

从 npm 开始

npm install @google/model-viewer

然后，使用首选捆绑器在 node_modules/model-viewer/dist/model-viewer.min.js 添加 <model-viewer>，

包含 <model-viewer> 标记

将 <model-viewer> 网络组件添加到 HTML 文档：

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

配置 <model-viewer> 代码

您可以通过更改 <model-viewer> 标记中的属性来配置模型显示界面。这些属性会显示镜头移动、模型动画和环境信息等选项。<model-viewer> 文档中列出了可以设置的所有属性。模型编辑器实用程序可以生成 <model-viewer> HTML 标记，并配置镜头位置和光照等属性。

模型编辑器屏幕截图

模型兼容性

<model-viewer> 支持 gltf 和 glb 文件格式的模型。如需查看支持的 glTF 扩展的列表，请参阅 three.js GLTFLoader documentation。

为了确保您的模型能正确显示，请在模型编辑器中检查您的模型。

浏览器和设备支持

所有常规浏览器都支持使用 <model-viewer> 在网页中显示 3D 模型。我们建议您使用 :focus-visible polyfill，以便在相应元素获得焦点时隐藏聚焦环。

AR 功能需要支持 ARCore 的设备并安装面向 AR 的 Google Play 服务。如需了解 webxr AR 模式，请参阅 WebXR 浏览器支持。 默认情况下，如果 WebXR 不受支持，系统会改用 Scene Viewer。

后续步骤