0

I am just learning THREE.js, and have a gltf file that I want to load into a file.

Here is my html file:

<html>
    <head>
        <title>Liftoff!!</title>
        <style>
            body { margin: 0; }
            canvas { display: block; }
        </style>
    </head>
    <body>
        <script type="module">
            import { GLTFLoader } from 'file:///Users/name/Desktop/three.js-practice/node_modules/three/examples/jsm/loaders/GLTFLoader.js';
            import * as THREE from "file:///Users/name/Desktop/three.js-practice/node_modules/three/build/three.js"
            
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            
            var loader = new GLTFLoader.GLTFLoader();

            loader.load( 'gltf.html', function (gltf) {
                scene.add( gltf.scene )
            }, undefined, function ( error ) {
                console.error( error )
            } )
        </script>
    </body>
</html>

I am opening my file in google chrome, and when I open it, it doesn't work, and the JavaScript console returns this error:

"gltf.html:1 Access to script at 'file:///Users/isaac/Desktop/three.js-practice/node_modules/three/examples/jsm/loaders/GLTFLoader.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

GLTFLoader.js:1 Failed to load resource: net::ERR_FAILED

gltf.html:1 Access to script at 'file:///Users/isaac/Desktop/three.js-practice/node_modules/three/build/three.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

three.js:1 Failed to load resource: net::ERR_FAILED"

I have tried to do this in localhost, but that also doesn't work.

Awesome Name
  • 117
  • 1
  • 8
  • 1
    Does this answer your question? ["Cross origin requests are only supported for HTTP." error when loading a local file](https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local) – M - Aug 15 '20 at 00:26
  • The Three.js documentation offers solutions to this in [How to run things locally](https://threejs.org/docs/#manual/en/introduction/How-to-run-things-locally) – M - Aug 15 '20 at 00:27
  • The localhost doesn't work, im not sure why. I dont really want to change the security, because I don't know how to do that and I am worried that it could hurt my privacy. – Awesome Name Aug 15 '20 at 17:07

0 Answers0