Search code examples
javascriptthree.jstextures

Three js texture loading. Access to image from origin 'null' has been blocked by CORS policy


I'm trying to load a texture but i keep getting this error no matter what i do:

Access to Image at '<file-path>/IMG/1.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Here's the code i'm using to load the image:

var loader = new THREE.TextureLoader();
loader.crossOrigin = "";
var url = "IMG/1.jpg";
var materials = [
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
    new THREE.MeshLambertMaterial({
        map: loader.load(url)
    }),
];

Solution

  • I fixed it by using a different browser than google chrome.

    The reason why i couldn't use a local server was because this was a school assignment. The people that were going to grade it weren't going to run a local server to make it work. They'd just open it, see it doesn't work and subtract points.