I'm working on a school project that allows users to open a .USDZ file (using Quick Look) on the webpage while using Apple Vision Pro to put the object in their physical envirnment, the project is deployed on Vercel. I'm testing the page with my apple vision pro, when I click open the .USDZ file, I'm seeing a triangle with an exclamation mark while it's trying to load, but it won't load. Does anybody know how to troubleshoot this issue?
MacyLau
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
From
Utah
Post
Replies
Boosts
Views
Activity
I'm working on a school project to build a webpage for Vision Pro users. I'm using Xcode to build this webpage because it has .reality files. This webpage only works on Safari because I took a spatial image with my Vision Pro, and it's .heic file type.
I put the .png version below the .heic file that is supposed to have the spatial effect. I deployed this project on Vercel, please use Safari to check out the link: https://spatial-design-project.vercel.app
There's another issue in this project, I downloaded the Cosmonaut .reality file on Apple Quick Look Gallery to test on my webpage. However, when I open it on Vision Pro, the file won't load, it says "Failed to load layers". Does it have something to do with the server for serving this file type? Should I use an actual web hosting company for this website?
Here is my GitHub repo
<div class="hero">
<div class="hero-text">
<h1>La Sal Peak</h1>
<p>The Do-It-All Enduro Bike</p>
</div>
</div>
<div class="hero2">
<div class="hero-text">
<h1>La Sal Peak</h1>
<p>The Do-It-All Enduro Bike</p>
</div>
</div>
.hero {
position: relative;
display: flex;
align-items: flex-end;
justify-content: flex-start;
height: 100vh;
background: url("assets/heroImage.heic") no-repeat center center/cover;
color: white;
}
.hero2 {
position: relative;
display: flex;
align-items: flex-end;
justify-content: flex-start;
height: 100vh;
background: url("assets/hero.png") no-repeat center center/cover;
color: white;
}