AR，VR和HTML中3D的模型

Safari Technology Preview 161 引入的新HTML元素和属性 <model></model> 及其相关属性，引发了广泛关注。本文将深入探讨 <model></model> 元素的演变历程、功能以及未来发展方向。

最初，<model></model> 元素的构想源于提升 Safari 与 iOS AR Quick Look 功能集成的体验需求。AR Quick Look 允许用户通过手机摄像头将 3D 产品模型叠加到现实环境中，例如一些商店已采用的虚拟试用功能。

从 WebKit 的解释器中可以了解到，<model></model> 元素的最初提案来自 Immersive Web 委员会。该委员会致力于将虚拟现实 (VR) 和增强现实 (AR) 技术融入 Web。提案指出，HTML 虽然支持多种媒体类型，但缺乏直接显示 3D 内容的声明式方法。嵌入 3D 内容通常需要借助脚本操作 <canvas></canvas> 元素，较为繁琐。<model></model> 元素旨在像其他视觉媒体一样方便地嵌入交互式 3D 模型。模型可以由 3D 建模工具创建或动态生成，但由服务器作为独立资源提供。

一个基本的例子如下，其使用方式类似于 <video></video> 或 <audio></audio> 元素：

<model style="width: 400px; height: 300px"></model>

<model></model> 元素支持的文件类型，例如 .usdz 或 .glb，有待进一步明确。

目前，<model></model> 元素的草案提案尚未完全制定完成，但已概述了其未来可能的发展方向，包括：向文档中添加模型、启用交互性、支持多种格式、提供备用内容以及确保可访问性等。提案中也列出了许多待解决的问题。一些拟议的属性，例如 autoplay、controls、loop、muted 和 poster，使其更类似于 <video></video> 元素。

早在 2018 年，Keith Clark 就曾发布过一篇博客文章，其中他原型设计了一个名为 <x-model></x-model> 的自定义元素，用于加载和渲染三维模型。2020 年，Joe Medley 又分享了 <model-viewer></model-viewer> 组件，并为其创建了主页。

目前，<model></model> 元素的标准化仍在进行中。Apple 通过 Safari TP 161 的发布表示支持，这与 Apple 对 AR 技术的重视相符。Google 也参与其中，但主要集中在 Web Components 方面。Apple 和 Google 对 Web 上 AR 技术的愿景可能存在差异，这可能会导致一些冲突。

总而言之，<model></model> 元素的出现为 Web 上 3D 模型的展示和交互提供了新的可能性，但其发展仍处于早期阶段，未来发展值得期待。 值得注意的是，Safari Technology Preview 162 版本已发布，它支持 CSS 嵌套和 CSS 相对颜色语法。

以上是AR，VR和HTML中3D的模型的详细内容。更多信息请关注PHP中文网其他相关文章！