1.1 简介

网页的 3D 模型，就像编写 HTML 一样简单。

Joe Medley
Joe Medley
GitHub
罗布·科赫曼
Rob Kochman
X

3D 模型比以往任何时候都更加贴合需求。零售商将店内购物体验带到客户的家中。各博物馆都在向网上的所有人提供自己文物的 3D 模型。遗憾的是，如果不深入了解 3D 技术或依靠在第三方网站上托管 3D 内容，就很难将 3D 模型添加到网站上以提供出色的用户体验。2019 年初推出的 <model-viewer> 网络组件旨在让在网络上发布 3D 模型就像编写几行 HTML 一样简单。从那时起，该团队一直致力于解决来自社区的反馈和请求。这项工作的高潮是今年早些时候发布的 <model-viewer> 版本 1.0。现在，我们宣布推出 <model-viewer> 1.1 版本。您可以在 GitHub 中阅读版本说明。

去年以来有哪些新功能？

版本 1.1 包含对 Web 上的增强现实 (AR) 功能的内置支持，改进了速度和保真度，并提供了一些用户经常要求的其他功能。

增强现实

在空白画布上查看 3D 模型固然很棒，但如果能在您的空间中查看 3D 模型则更棒。对于完全在浏览器中实现的 3D 和 AR Chrome，Android 使用 WebXR 支持增强现实。

<model-viewer> AR 功能演示。

准备就绪后，您可以通过向 <model-viewer> 标记添加 ar 属性来使用它。其他属性可让您自定义 WebXR AR 体验，如 modelviewer.dev 上的 WebXR 示例所示。以下代码示例展示了此功能可能如下所示。

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

它看起来很像此标题下显示的嵌入式视频。

相机控件

<model-viewer> 现在可完全控制视图的虚拟摄像头（查看器的视角）。其中包括相机目标、轨道（相对于模型的位置）和视野范围。您还可以启用自动屏幕旋转并设置用户互动限制（例如最大和最小视野范围）。

注解

您还可以使用 HTML 和 CSS 为模型添加注释。此功能通常用于将标签“附加”到模型的各个部分，使其在操作模型时随模型一起移动。注释可以自定义，包括它们的外观以及模型将其隐藏的程度。注释功能也适用于 AR。

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>
一套带有注释的太空服。
太空服，带有注释。

如需了解详情，请参阅注释文档页面。

编辑器

1.1 版引入了并托管一个 <model-viewer> “修改”工具，您可以使用该工具快速预览模型、尝试不同的 <model-viewer> 配置（例如曝光和阴影柔和度）、生成海报图片，以及以交互方式获取注释坐标。

渲染和性能改进

渲染保真度显著提高，尤其是在高动态范围 (HDR) 环境中。现在，当视口中只有一个 <model-viewer> 元素时，<model-viewer> 也会使用直接渲染路径，这有助于提高性能（特别是在 Firefox 上）。最后，动态缩放渲染分辨率 显著提高了帧速率以下示例展示了近期的一些改进。

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>
一个戴得住的头盔的 3D 模型。
良好佩戴的头盔的 3D 模型。

稳定性

随着 <model-viewer> 达到第一个主要版本，API 稳定性是一项优先事项，因此在版本 2.0 发布之前，将避免破坏性更改。

后续操作

<model-viewer> 1.0 版包含用户呼声最高的功能，但该团队尚未完成。我们将添加更多功能，以及性能、稳定性、文档和工具方面的改进。如果您有建议，请在 GitHub 中提交问题；我们随时欢迎 PR 团队。如需与他人保持联系，请在 Twitter 上关注<model-viewer>，并查看 Spectrum 上的社区聊天。