THREE.js – How to load objects?

I just started learning THREE.js. While I’m able to make cubes and spheres just fine, whenever I try to load an .obj, it keeps throwing random errors. I’m completely confused.

// instantiate a loader
const loader = new OBJLoader();

// load a resource
loader.load(
    // resource URL
    'models/boat_large.obj',
    // called when resource is loaded
    function ( object ) {

        scene.add( object );

    },
    // called when loading is in progresses
    function ( xhr ) {

        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

    },
    // called when loading has errors
    function ( error ) {

        console.log( 'An error happened' );

    }
);

I get the error:
OBJLoader is not defined

I add <script type="module" src="loaders/OBJLoader.js"></script> to my html, I get the error:

Access to script at 'file:///C:/Users/Syzygy/Desktop/hello/www/loaders/OBJLoader.js' 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.

I’ve followed all the tutorials I can find, I’m not making any progress

47 thoughts on “THREE.js – How to load objects?”

Leave a Comment