model-viewer: "Couldn't load Object" when using a src Firebase URL
Description
I’m using Firebase for my app, but setting up model-viewer to reference the storage is proving problematic.
When attempting to launch Scene Viewer on Android I get “Couldn’t load Object - Looks like there’s something wrong with this object.”
The model loads fine when the URL is relative or points to some other external source. When I include an ios-src, iOS correctly handles the Firebase urls and displays the model.
To simplify and to make sure it wasn’t my model, I uploaded the Astronaut and replicated a basic setup on glitch. A snippet like this should replicate the issue (spaces added to the URL so you don’t have to scroll horizontally):
<model-viewer src="https://firebasestorage.googleapis.com/v0/b
/<proj>.appspot.com/o/model%2FAstronaut.glb
?alt=media&token=<token>"
camera-controls ar
interaction-prompt="auto">
</model-viewer>
Live Demo
Browser Affected
- Chrome (tested on version 76.0.3809.132)
OS
- Android (tested on version 9)
Versions
- model-viewer: v0.6.0
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 41 (11 by maintainers)
A fix for this has been released as v0.7.2. Please ping this bug if you are still having problems and we will re-open to investigate!
Confirmed v0.7.2 working for me. Thanks!
Thank you. Let me know, too, if there’s any other information they need.
THANK YOU @ulbqb for that link. I don’t know why it’s buried in a closed issue. This solution should be much easier to find. Adding here to draw more attention to it.
If your models are hosted on Firebase StorageSOLUTION ⤵️
cloud.google.com/storage/docs/configuring-cors
I am trying to show few custom glb files into the android app using the SceneViewer. I am following the documentation specified in the documentation. Following is the code snipped.
val intentUri = Uri.parse("https://arvr.google.com/scene-viewer/1.2").buildUpon() .appendQueryParameter( "file", "https://......./example1.glb" ) .appendQueryParameter("mode", "ar_only") .build()I am seeing the following error message when I try to view it from SceneViewer. Am I doing anything wrong?
@holaworlds You can view it by setting the firebase storage bucket for cors. See this post for details: https://stackoverflow.com/questions/37760695/firebase-storage-and-access-control-allow-origin
For
.usdz, the file is ultimately loaded by a native app and may not be subject to CORS restrictions. For images, the browser is able to load images (via<img>or CSS styles) without CORS permissions.One of the cases where CORS permissions apply is when you load a file with
fetchorXMLHTTPRequest. This is the case when we load glTF and glB files. We do this because we want to render these 3D models inline in the browser, but the browser doesn’t have a “built-in” way to render them, so we need to read the contents of the file in order to render it ourselves. In most cases where JavaScript can read the response to a network request, CORS becomes an issue.So, sufficiently permissive CORS headers need to be set in the response for
<model-viewer>to work as intended.@cdata I am on version 0.8.1. Here is a file I recently uploaded: https://firebasestorage.googleapis.com/v0/b/yzed-88819.appspot.com/o/images%2FGLTF_DOWNSIZED_JUMPERJACKET_V5.gltf?alt=media&token=a5c77518-0b0d-4980-839c-c951c270f153
Hey, thanks for thorough description of the problem @ebrayton . This is a problem with Scene Viewer (the native app that
<model-viewer>launches on Android). I’ll forward the report to that team and let you know if they think it’s a problem on their side.