时间戳

首页 > 解决方案 > 判断用户的浏览器是否支持 USDZ 或 Reality Composer 文件格式

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

问题描述

我使用 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 或现实文件时才会添加锚标记。有没有这样做的好方法？

编辑：

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

标签： javascriptaugmented-realityarkitreality-composerarquicklook

解决方案

正如快速查看图库页面上明确指出的那样：

Built-in iOS apps，例如 Safari、Messages、Mail、News 和 Notes，使用 Quick Look 以 3D 或 AR 显示虚拟对象的 USDZ 文件。您可以在您的应用程序和网站中嵌入“快速查看”视图，让用户看到令人难以置信的详细渲染，包括闪亮的虚拟对象中真实世界环境的反射。

Tap any of the 3D models在运行 iOS 12 或更高版本的设备上查看对象并将其放置在 AR 中。Or click a model on Mac 下载 USDZ 文件。

第一种方法

因此，做您想做的最简单的方法是将桌面版网站转换为移动版。您可以使用响应式开关工具轻松完成此操作。所以所有使用 Mac 电脑的用户都可以在线看到 USDZ 的 VR 版本，而不是下载的文件。但是有一个令人不快的问题——这些用户在 AR 模式下看不到模型。

第二种方法

您需要为 USDZ 文件格式编写一个JavaScript脚本管理属性。rel="ar"我真的怀疑任何其他网络浏览器（Safari 除外）都可以支持reality文件格式。阅读这篇文章，您可以找到要走的路。

推荐阅读