javascript - 判断用户的浏览器是否支持 USDZ 或 Reality Composer 文件格式

Question

我使用 Apple 的 iOS Reality Composer 应用程序创建了一些“现实”格式的文件。我很难弄清楚如何在网络上实现它。在查看了一些包含 USDZ 文件的网页后，我终于将其放入我的站点(链接略有更改):

<a href="media/images/ar.reality" rel="ar">
  <img src="media/images/image.png" />
</a>

这在 iOS/iPadOS Safari 中运行良好，但在其他浏览器(如 macOS Safari、Firefox 等)中效果不佳。当您在这些浏览器中单击链接时，它会下载现实文件。我想用 JS 编写一个脚本，仅当浏览器支持 USDZ 或 reality 文件时才会添加 anchor 标记。有什么好的方法吗？

编辑:

InstaPot网站就是一个很好的例子。它们在 iOS/iPadOS Safari 上有一个 USDZ 文件的 anchor 标记，但在 macOS Safari 或其他第三方浏览器上没有。

Answer 1

正如 Quick Look Gallery 中明确指出的那样 页面:

Built-in iOS apps, such as Safari, Messages, Mail, News, and Notes, use Quick Look to display USDZ files of virtual objects in 3D or AR. You can embed Quick Look views in your apps and websites to let users see incredible detailed renderings, including reflections of real world surroundings in shiny virtual objects.

Tap any of the 3D models below on a device running iOS 12 or later to view the object and place it in AR. Or click a model on Mac to download the USDZ file.

第一种方法

所以，做你想做的最简单的方法就是把网站的桌面版变成移动版。您可以使用 Responsive Switch 轻松做到这一点 工具。所以所有使用 Mac 电脑的用户都可以在线看到 USDZ 的 VR 版本，而不是下载的文件。但有一个令人不快的问题——这些用户无法在 AR 模式下看到模型。

第二种方法

您需要编写 JavaScript 脚本来管理 USDZ 文件格式的 rel="ar" 属性。我真的怀疑任何其他网络浏览器(Safari 除外)都可以支持 reality 文件格式。 <强> Reading this post 您可以找到该走的路。