⏰ 1分钟内在网页上展示3D模型

本文将简要介绍一个令人印象深刻的用于模型查看的 Web 组件——model-viewer。

模型查看器库使得显示和操作 3D 模型文件就像编写 HTML 标签一样简单。

就像编写 HTML 一样简单

代码：

<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>

<model-viewer 
  src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
  alt="A 3D model of an astronaut"
  auto-rotate
  camera-controls>
</model-viewer>

结果：

我们可以像在任何 3D 模型查看器中一样拖动和缩放，而这只需要一个 HTML 标签和 2 个脚本。

模型

您可以在这里.glb找到车型列表。

就是这样！

如果您想知道如何显示您的模型，则无需继续阅读；但如果您愿意，我将再多写一些关于该库的内容。

关于图书馆

model-viewer Web 组件由 Google 开发，并于 2019 年初推出。目前，他们正在发布版本1.1。

模型查看器的理念是让开发者能够为用户集成 3D 和 AR 技术，而无需掌握相关的技术知识。而“就像编写 HTML 一样简单”这句话，也证明他们在实现这一目标的道路上走得非常正确！

增强现实

没错，你没看错，它还可以用作增强现实模块。你可以在这里阅读更多相关信息（并找到代码示例）。

蜜蜂

除了显示模型之外，模型查看器还提供了强大的 API，例如加载、AR、场景和摄像机、注释、动画和场景图。

模型编辑器

他们还推出了一款模型编辑器，你可以在这里查看。

结论

网络技术日新月异，每天都在突破极限。昨天的不可能如今已成为现实，我们都应该感谢开源社区，他们免费提供这些技术供所有人使用，这真是帮了我们一个大忙。