5

I have created some files in the "reality" format using Apple’s Reality Composer app for iOS. I had a difficult time figuring out how to implement it on the web. After looking at some webpages that include USDZ files on them, I finally put this into my site (links slightly changed):

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

This works just fine in iOS/iPadOS Safari, but not so much in other browsers such as macOS Safari, Firefox, etc. When you click on the link in these browsers, it wants to download the reality file. I want to write a script in JS that will add anchor tags only when the browser supports USDZ or reality files. Is there a good way of doing this?

Edit:

The InstaPot site is a good example. They have an anchor tag to a USDZ file on iOS/iPadOS Safari, but they don’t on macOS Safari or other third party browsers.

Andy Jazz
  • 49,178
  • 17
  • 136
  • 220
RyDev
  • 157
  • 2
  • 10

1 Answers1

0

As clearly stated on Quick Look Gallery page:

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.

First Approach

So, the simplest way to do what you want is to turn desktop version of website into mobile version. You can easily do it with a Responsive Switch tool. So all users who use Mac computers can online see a VR version of USDZ, not a downloaded file. But there's one unpleasant problem – these users cannot see a model in AR mode.

Second Approach

You need to write a JavaScript script managing rel="ar" attribute for USDZ file format. I really doubt that any other web browser (except Safari) can support reality file format. Reading this post you can find out what way to go to.

Community
  • 1
  • 1
Andy Jazz
  • 49,178
  • 17
  • 136
  • 220
  • Thanks for your answer; however, I am not quite sure what this is supposed to do. You are changing the image based on a media condition, whereas the link to the reality file is still there regardless. I am trying to either remove the link when the browser doesn't support reality files or place the link when the browser does. – RyDev Nov 25 '19 at 16:01
  • Your code works, but when you click on it in Firefox on macOS, it will try to download the reality file. I want to remove the link when the user's browser is going to try downloading the file instead of opening it in Apple's viewer. – RyDev Dec 06 '19 at 21:39
  • What's the behaviour in other browsers (Safari, Chrome, Opera)? – Andy Jazz Dec 07 '19 at 04:38
  • Every desktop browser including Safari Technology Preview downloads the file to the “Downloads” folder. – RyDev Dec 08 '19 at 19:49