Cross-origin image load denied with three.js in chrome

Question

Trying to add material in THREE.js like this

var materialWall = new materialClass( { color: 0xffffff, map: THREE.ImageUtils.loadTexture( \'image         


        

Answer 1

If you are running Chrome from localhost and using Three.js, you probably need to run Chrome with this command line flag:

c:// ... /chrome.exe --allow-file-access-from-files

Answer 2

Perfect solution for:

THREE.js: Cross-origin image load denied

Just add timestamp to the image url. I don't know the logic behind it, but it works.

Example:

var material = new THREE.MeshBasicMaterial({
  map: loader.load(url + "?v=" + (new Date()).toString(), function() {
    animate();
  })
});

Answer 3

1) Chrome shortcut -> Properties -> Shortcut tab -> target and add --allow-file-access-from-files in target at last. (kill all the chrome tasks before doing this.)

OR

2) Download Mongoose web server software. Put it in your working directory, and run it. It will open in the browser http://localhost:PORT where it will serve all your files.

OR

3) You can also use NodeJS server in your application.

Answer 4

this worked for me at the command line\terminal:

./chrome.exe --disable-web-security

*note that you must close all instances of chrome before executing the command for it to work.

Answer 5

https://github.com/mrdoob/three.js/issues/687 refers to an issue on three.js' GitHub, which has good list of workarounds, including a link to a wiki page describing how to run locally. There are also some other workarounds in the thread, including adding the following to your scripts:

THREE.ImageUtils.crossOrigin = "";

Or, adding CORS headers so that they are specifically allowed.

^{Note that most of this information was added from the already existing link to the issue, which the original author of this answer did not include.}

Answer 6

If you:

• don't want to set up your own server, and
• don't want to downgrade your browser's security

then I worked out a way around this which involves only a little bit of effort:

1. Convert the image into Base64 text
2. Store it in an external Javascript file
3. Link it to your project page
4. Load it into your texture

Full details can be found at http://tp69.wordpress.com/2013/06/17/cors-bypass/ for those that are interested.