AR、VR 和 HTML 中的 3D 模型

藏在某处 Safari 技术预览版 161 发行说明 是关于支持新的 HTML 元素和属性的看似无害的行：

增加了对 <model src> 和荣誉 <source type> 属性 （)

每当我看到提到一些我不认识的元素时，我的脑子就会直奔 哼！ 对我来说是新的，但对其他人来说可能是旧闻. 这是糟糕的姿势，我知道，因为它很容易成为：

• 嗯，看起来像是一些专有实验。
• 哇，一个真正的新事物！

事实是，这三个都差不多。

这是一个不断发展的概念

就像，我发现的第一个有点官方的东西 <model> 不在 W3C 规范中，但在 WebKit 的解释器仓库. 自述文件中的所有内容都是 2021 年的一个巨大注释，“The <model> 元素已经转移到沉浸式网络 CG 中。” 我正要跳过去，但我的眼睛抓住了 HistoryAndEvolution.md 文件，其中有一个很好的早期上下文的概要 <model> 概念：

 <model> element 诞生于迈出下一步并改善 Safari 与 iOS 集成体验的愿望 AR快速浏览 功能。

我不得不查看 Apple 的 AR Quick Look 启动页面。 您知道某些商店的新功能，您可以在家中使用手机摄像头转换产品的 3D 渲染图吗？ 这就是我们正在谈论的东西，而且 Apple 链接了大都会艺术博物馆的一个很好的案例研究.

据我从这个有限的上下文中理解：

• 放一个 <model> 文档中的元素。
• 添加外部源文件，例如 <model src="assets/example.usdz">.

最初的提案来自沉浸式网络委员会组

这就是团队 让虚拟现实 (VR) 和增强现实 (AR) 成为网络的一部分。 Apple 链接了他们的回购协议，所以我跳了下去 直接向解释器. 这不是规范或任何东西，而是原始提案。 一个更好的元素定义！

HTML 允许通过元素显示许多媒体类型，例如 <img>, <picture>或 <video>, 但它没有提供直接显示 3D 内容的声明方式。 在页面中嵌入 3D 内容相对麻烦并且依赖于编写脚本 <canvas> 元素。 我们认为是时候让 3D 模型与其他已经支持的媒体类型处于同等地位了。

[...]

HTML <model> element 旨在让网站像嵌入任何其他视觉媒体一样方便地嵌入交互式 3D 模型。 模型预计由 3D 创作工具创建或动态生成，但作为独立资源由服务器提供。

基本示例将其组合在一起。 真的感觉像 <video> or <picture> 元素：

<model style="width: 400px; height: 300px"> <source src="assets/example.usdz" type="model/vnd.usdz+zip"> <source src="assets/example.glb" type="model/gltf-binary">
</model>

.usdz? .glb？ 不是我办公桌上经常出现的文件类型。 我想我需要复习一下那些和任何其他文件类型 <model> 可能会支持。 同样，所有这些都只是最初的提议。

提案草案还没有完成

但这确实 提供一个漂亮的大纲 事情可能发生的地方：

• 将模型添加到文档
• 启用交互性
• 支持多种格式
• 提供后备内容
• 使其易于访问

有很多事情要弄清楚。 大多数内容都是需要解决的记录问题。 然而，它确实更能说明 <model> 喜欢使它感觉均匀的建议属性 更多 喜欢 <video> 如 autoplay, controls, loop, muted, poster等等。

它可以追溯到更远

我发现最早提到的 3D 建模是 Keith Clark 的 2018 年帖子 他在其中制作了一个名为的自定义元素的原型 <x-model>. 他将其描述为“提供对 DOM 和 CSSOM 访问的占位符”，其中加载和渲染是在 three.js所.

基思的想法之后是 <model-viewer> Joe Medley 在 2020 年分享的组件 （以及随后的 更新 到它）。 甚至还有一个 它的主页 拖着 Neil Armstrong 在太空中四处游荡很有趣。

这可能只是一个实验？

我的意思是，规范草案尚未充实。 由于 Safari TP 161 的发布，Apple 似乎愿意参与其中。 这完全有道理 苹果对 AR 有多看好 作为一个整体。 (苹果眼镜， 任何人？）

Google 似乎已经踏入了大门，尽管是在 Web Components 方面。 很容易看出苹果和谷歌对网络增强现实的需求之间可能存在利益冲突。

---

这些都是我试图理解一切的笔记。 它肯定比我到目前为止所知道的要少得多。 我相信更聪明的人可以系更整洁的蝴蝶结 <model> 在评论中。 😉

当我们谈论 Safari 技术预览时， 162 前几天刚刚发布 它使 CSS嵌套 和 CSS 相对颜色语法.

• SEO 支持的内容和 PR 分发。 今天得到放大。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
• Sumber: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/