Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

<model-viewer> 网络组件

向网站添加 3D 模型可能很棘手；<model-viewer> 就像编写 HTML 一样简单。

Joe Medley

向网站添加 3D 模型并非易事。3D 模型最好在查看器中显示，该查看器可在所有浏览器（包括智能手机、桌面设备，甚至新型头戴式显示器）上自适应运行。查看器应支持渐进增强，以提高性能和渲染质量。它应支持所有设备上的用例，从较旧、低功耗的智能手机到支持增强现实的新设备。它应与最新技术保持同步。它应该具有良好的性能和无障碍功能。不过，构建此类查看器需要专业的 3D 编程技能，对于想要托管自己的模型而不是使用第三方托管服务的 Web 开发者来说，这可能是一项挑战。

不过，借助 <model-viewer> Web 组件，您可以声明式地向网页添加 3D 模型，同时将模型托管在您自己的网站上。该组件的目标是让您无需了解底层技术和平台，即可向网站添加 3D 模型。该 Web 组件支持自适应设计，以及在某些设备上实现增强现实等用例。它包含无障碍、渲染质量和互动性方面的功能。

什么是 Web 组件？

Web 组件是一种使用标准 Web 平台功能构建的自定义 HTML 元素。Web 组件在所有意图和用途上的行为都与标准元素类似。它具有唯一的标记，可以具有属性和方法，并且可以触发和响应事件。简而言之，您无需了解任何特殊知识即可使用任何 Web 组件，更不用说 <model-viewer> 了。

本文介绍了 <model-viewer> 特有的功能。如果您有兴趣详细了解 Web 组件，webcomponents.org 是一个不错的起点。

`<model-viewer>` 的功能

以下示例演示了 <model-viewer> 的一些功能。

基本 3D 模型

嵌入 3D 模型就像以下标记一样简单。通过使用 glb 文件，此组件可在任何主流浏览器上运行。

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
  id="mv-shark"
   src="shark.glb"
  camera-controls
></model-viewer>

该代码呈现如下：

添加动态效果和互动

auto-rotate 和 camera-controls 属性提供运动和用户控制。这些并不是唯一可能的属性。如需查看属性的完整列表，请参阅相关文档。

<model-viewer src="shark.glb" auto-rotate camera-controls>

使用海报图片延迟加载

所有 3D 模型都需要时间加载，添加 poster 属性意味着在模型准备就绪之前，系统会显示一张图片。您可以使用编辑器生成与 3D 渲染效果完全相同的海报图片。

<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">

自适应设计

该组件可处理某些类型的自适应设计，并可针对移动设备和桌面设备进行缩放。它还可以管理页面上的多个实例，并使用 Intersection Observer 在模型不可见时节省电池电量和 GPU 周期。

使用前面介绍的编辑器创建海报图片，可让该单张图片与 3D 渲染效果相匹配，即使 <model-viewer> 的宽高比会根据不同的屏幕尺寸而变化。