javascript - Cross-origin image load denied on a local image with THREE.js on Chrome

Question

I'm using THREE.js and I get this error in the developer console:

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

when I open my script with Chrome. The code looks like this:

var particle_system_material = new THREE.ParticleSystemMaterial({
    color: 0xffffff,
    map: THREE.ImageUtils.loadTexture("images/circle.png"),
});

So as you can guess, the:

map: THREE.ImageUtils.loadTexture("images/circle.png");

is the problem. With Firefox it works very well.

I've read the tips in the following links : Chrome, three.js: Cross-origin image load denied, https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally, https://www.google.fr/search?q=Access-Control-Allow-Origin

I also realized the commands given:

Start Chrome executable with a command line flag:

chrome --allow-file-access-from-files

nothing works and I'm going crazy. It is just an image on my hard drive with HTML and JS files, no server, no "origin".

Answer 1

Are you running a local server, or are you just opening the html file?

Most likely, running a localhost server will fix this issue. Mamp / Wamp are super easy to use.

If that doesn't work, you can do something drastic like chrome --disable-web-security