When I add my own 3D models to the <model-viewer> tag in html for scene viewer the models do not load

I am trying to add my own 3D GLB models to the google scene viewer generic code. However when I replace the link to the chair model with a downloaded GLB model the model does not show up on the webpage.

I have used my own models that I downloaded. I also tried using the same chair from the generic code by downloading it. I looked at the inspector and while the placeholder is present, it seems that the space is empty and the alt text does not display either

This is the code I'm working with:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>3DModel</title>
    <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 src="chair.glb" auto-rotate camera-controls alt="cube" background-color="#455A64"></model-viewer>
</body>
</html>

All I have changed is the src from a link to the chair.glb to the location of the downloaded model (which is in the same folder as the index code)

How can I fix this?

Solution 1:

If you take a look at the console you'll probably spot an error like this:

model-viewer.js:36006 Access to XMLHttpRequest at 'file:///chair.glb' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

This means the browser locks access to the chair.glb file because it is served via the file:/// protocol.

To get around you can either upload the html and the .glb file to a 'real' webserver online or you run a simple webserver on your computer and preview the file there.

For quick results I'd recommend the Mongoose Webserver

Get a a binary for your platform at https://cesanta.com/binary.html and start it inside the folder where your html & glb files are. This will open a browser window where you can select the html file you want to to open.

Solution 2:

As far as I can help you is:

Specify the correct path of the model.
My model is stored in models folder which is inside shared-assets folder.(use "./chair.glb")
Try giving relative path.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>3DModel</title>
    <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 src="./shared-assets/models/cube.gltf" auto-rotate camera-controls alt="cube" background-color="#455A64"></model-viewer>
</body>
</html>

When I add my own 3D models to the <model-viewer> tag in html for scene viewer the models do not load

Solution 1:

Solution 2:

Related

Recent Posts