Model-viewer: Failure to load object using <model-viewer src="https://<url>.sample.gltf">

Created on 22 Jul 2019  ·  5Comments  ·  Source: google/model-viewer

Hey guys, is it possible to use model viewer src* by calling the gltf file url directly? I'm currently having issue on rendering objects using android devices it says that "Couldn't load object, looks like there's something wrong with this object". However there is no issue when I tried setting the gltf file relative to my source code. Is there any other workaround rather than using the file/object relative to my code?

not model-viewer

Most helpful comment

Hi there cdata:

Same wrong behavior here, when trying to test AR mode over model-viewer on my own secure web server:

image

I put the Astronaut.glb file in the same folder that my index.html file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Web Model</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <style>
            body, html {
                height: 100%;
                margin: 0;
                padding: 0;
                width: 100%;
            }

            #model {
                background: #0f0;
                height: 100%;
                width: 100%;
            }
        </style>

        <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
        <script nomodule="" src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
    </head>

    <body>
        <model-viewer id="model" align-model="origin" alt="Astronaut" ar background-color="#455A64" camera-controls src="Astronaut.glb"></model-viewer>
    </body>
</html>

With this page code I get to the infamous "Couldn't load object, looks like there's something wrong with this object":

image

Debugging the web page by means of "Remote devices" tool on desktop Chrome I get:

model-viewer.js:57191 Uncaught (in promise) TypeError: fullscreen error
    at HTMLElement.[onARButtonContainerFallbackClick] (model-viewer.js:57191)
    at HTMLDivElement.ARModelViewerElement.<computed> (model-viewer.js:57058)

Any help with this?

Best regards.

All 5 comments

Couldn't load object, looks like there's something wrong with this object

This sounds like a Scene Viewer error. Scene Viewer is a native app that displays models, so technically it's not a <model-viewer> bug. If you can provide a reproducible test case, I would be happy to share it with the Scene Viewer team.

Hi there cdata:

Same wrong behavior here, when trying to test AR mode over model-viewer on my own secure web server:

image

I put the Astronaut.glb file in the same folder that my index.html file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Web Model</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <style>
            body, html {
                height: 100%;
                margin: 0;
                padding: 0;
                width: 100%;
            }

            #model {
                background: #0f0;
                height: 100%;
                width: 100%;
            }
        </style>

        <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
        <script nomodule="" src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
    </head>

    <body>
        <model-viewer id="model" align-model="origin" alt="Astronaut" ar background-color="#455A64" camera-controls src="Astronaut.glb"></model-viewer>
    </body>
</html>

With this page code I get to the infamous "Couldn't load object, looks like there's something wrong with this object":

image

Debugging the web page by means of "Remote devices" tool on desktop Chrome I get:

model-viewer.js:57191 Uncaught (in promise) TypeError: fullscreen error
    at HTMLElement.[onARButtonContainerFallbackClick] (model-viewer.js:57191)
    at HTMLDivElement.ARModelViewerElement.<computed> (model-viewer.js:57058)

Any help with this?

Best regards.

Any update on this? @vortice3D @cdata ? I am facing the same problem.

Sorry, it looks like this bug flew under our radar.

Reading the messages again, it still looks like a Scene Viewer error. "Failure to load object"/"No se pudo cargar el objeto" is not a <model-viewer> error.

If you are using the Astronaut.glb file from our project, then I would try re-downloading it, or perhaps experiment with serving it from a different origin.

@C-Aniruddh can you share a test case that fails for you?

@cdata Here's my test case.

I have placed my model in a directory with the following file structure. I am using the modelDecimated_AR.gltf.

├── demo-styles.css
├── modelDecimated_AR.gltf
├── modelDecimated.gltf
└── new.html

I am running a local server on the port 443 using the following code.

from http.server import HTTPServer, SimpleHTTPRequestHandler
import ssl

httpd = HTTPServer(('0.0.0.0', 443), SimpleHTTPRequestHandler)
httpd.socket = ssl.wrap_socket(httpd.socket, certfile='./certificate.crt', keyfile='./private.key', server_side=True)
httpd.serve_forever()

In order to get a verified SSL certificate, I am using one of my real domains, https://aniruddh.tech and pointing the https://models.aniruddh.tech to my local IP using A record. Everything till this works perfectly fine. However, as soon as I open the model in AR, I receive the following error.

model-viewer.js:57191 Uncaught (in promise) TypeError: fullscreen error
    at HTMLElement.[onARButtonContainerFallbackClick] (model-viewer.js:57191)
    at HTMLDivElement.ARModelViewerElement.<computed> (model-viewer.js:57058)

Note : If I run the same local server, and then map the 443 port to ngrok, everything works perfect. However, I would like to use larger models (30-50mb) on model-viewer and thus ngrok is not an option.

Was this page helpful?
0 / 5 - 0 ratings