[SOLVED] Google Model Viewer is not displaying output

Google Model Viewer is not displaying output

So, I used Google's Model Viewer for displaying GLB files. But it seems to be throwing these errors:

>Access to fetch at 'file:///C:/Users/User/Desktop/Untitled.glb' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

>Failed to load resource: net::ERR_FAILED

>model-viewer.js:50001 TypeError: Failed to fetch
    at co.load (model-viewer.js:36818:3)
    at Mh.load (model-viewer.js:44762:10)
    at model-viewer.js:49881:16
    at new Promise (<anonymous>)
    at model-viewer.js:49880:12
    at Jc.preload (model-viewer.js:49988:34)
    at Jc.load (model-viewer.js:50018:20)
    at n (model-viewer.js:51575:73)
    at new Promise (<anonymous>)
    at Bu.setSource (model-viewer.js:51572:26)
(anonymous) @ model-viewer.js:50001

My code >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</head>
<body>
    

<!-- Use it like any other HTML element -->
<model-viewer style = "width:1050px;height:1050px;" src="Untitled.glb"  camera-controls ></model-viewer>
</body>
</html>

And I got the code from this website Model Viewer

Solution

Simple way to solve it is by converting the glb file to a DataURI and then loading it like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</head>
<body>
    

<!-- Use it like any other HTML element -->
<model-viewer style = "width:1050px;height:1050px;" id = "glb" crossorigin="anonymous" camera-controls ></model-viewer>
<script>
    document.getElementById('glb').src= "/*--DATA URI HERE--*/"
</script>
</body>
</html>