CODEWITHSUNDEEP
3daugmented-realitydropboxgltfmodel-viewer
nicksp
nicksp

Reputation: 11

<model-viewer> can't load glTF model hosted on google drive / dropbox

I'm trying to load a glTF model on a website using model-viewer. The model is hosted on google drive and dropbox, but neither of the links load the model. The loading bar appears and then blank. But the model loads fine on the glTF online previewer tool. Does anyone know what may be the issue? Here's the example:

    <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>
<model-viewer src="https://www.dropbox.com/s/2c6vj30g9rl4olh/out.gltf"></model-viewer>

Upvotes: 1

Views: 1030

Answers (1)

emackey
emackey

Reputation: 12418

You can't just host web page embedded assets on DropBox like that, because of something called Cross-Origin Resource Sharing. The assets must be on the same web server that your page is on (and your page itself must be on a server, not just in a local file). Or your asset can live on an external server that has been configured to enable CORS.

If you look in the developer tools web console of your browser, you'll see error messages related to CORS when this is misconfigured or not configured.

Upvotes: 1

Related Questions