使用 Model-viewer 构建增强现实

今年 2 月,我们推出了 <model-viewer> 网络组件,可让您以声明方式将 3D 模型添加到网页中,同时在自己的网站上托管该模型。它不支持的一点是增强现实。也就是说,您不能在设备的相机画面上渲染组件的来源图片。

为此,我们已在 iOS 上添加了对 Magic Leap 和 Quick Look 的支持。现在,我们宣布在 Android 上支持 AR,并添加了 ar 属性。此属性基于名为 Scene Viewer 的新 ARCore 功能构建,后者是一款用于查看 3D 模型的外部应用。如需详细了解 Scene Viewer,请参阅通过 Android 浏览器在 AR 中查看 3D 模型

火星车

我们来看看如何使用 <model-viewer> 进行增强现实。

属性

您记得,网络组件不需要特殊知识即可使用。它的行为方式与标准 HTML 元素类似,具有唯一的标记以及属性和方法。使用 <script> 标记添加该元素后,请像使用任何其他 HTML 元素一样使用它。

<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>

这与我之前的文章中的内容大同小异。请注意我最后突出显示的内容那是新属性。

正在安装新版本

如果您已在使用 <model-viewer>,则可能完全按照文档中所示,使用 <script> 标记来导入组件。我们会不断改进。如果您希望在故意升级和部署之前测试新功能,则需要安装特定版本的 <model-viewer>。为此,请将版本号添加到文件网址中,如下所示。然后,关注版本页面了解最新动态。

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

<script nomodule
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>

总结

欢迎试用新版 <model-viewer>,并与我们分享您的想法。 欢迎访问 GitHub 提出问题和提供反馈。