此页面由 Cloud Translation API 翻译。

<model-viewer> 网络组件

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

Joe Medley

向网站添加 3D 模型并非易事。理想情况下，3D 模型显示在支持所有浏览器（包括智能手机、桌面设备，甚至是新的头戴式显示屏）上的查看器中。此查看器应支持渐进式增强，以提升性能和渲染质量。它应该支持所有设备的用例，从低功耗的旧款智能手机到支持增强现实的新设备，不一而足。它应该与当前技术保持同步。它应该性能出色并且易于访问。不过，构建此类查看器需要具备特殊的 3D 编程技能，对于希望托管自己的模型而不是使用第三方托管服务的 Web 开发者来说，这可能并非易事。

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

什么是网络组件？

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

本文将介绍 <model-viewer> 特有的功能。如果您有兴趣详细了解网络组件，不妨从 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 周期。

即使 <model-viewer> 的宽高比适应不同的屏幕尺寸，使用上述编辑器创建海报图片也可让单张图片与 3D 渲染相匹配。