<model-viewer> 网络组件

向网站添加 3D 模型可能很棘手;&lt;model-viewer&gt; 的使用就像编写 HTML 一样简单。

Joe Medley
Joe Medley

向网站添加 3D 模型是一项棘手的工作。理想情况下,3D 模型会显示在可在所有浏览器(包括智能手机、桌面设备或新的头戴式显示器)上响应式的查看器中。查看器应支持渐进增强,以提升性能和渲染质量。它应支持在所有设备上使用,从功率较低的旧款智能手机到支持增强现实的新型设备。应及时了解当前技术。它应该兼具性能和可访问性。但是,构建这种查看器需要特殊的 3D 编程技能,对于想要托管自己的模型而不是使用第三方托管服务的 Web 开发者来说,这可能是一项挑战。

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

Web 组件是一种使用标准 Web 平台功能构建的自定义 HTML 元素。在所有方面和用途上,Web 组件的行为都与标准元素一样。它具有唯一的标记,可以有属性和方法,并且可以触发和响应事件。简而言之,您无需了解任何特殊知识即可使用任何 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-rotatecamera-controls 属性提供动作和用户控制。这些并不是可能的唯一属性。如需查看属性的完整列表,请参阅文档。

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

使用海报图片延迟加载

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

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

自适应设计

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

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

多张代表反应能力的太空服图片。
多张太空服图片,表示自适应功能。

更多功能

如需查看更多高级功能的演示,请浏览 <model-viewer> 文档。这些功能包括添加地面投影 Skybox、创建动画纹理热点