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

问题:

Trying to add material in THREE.js like this

var materialWall = new materialClass( { color: 0xffffff, map: THREE.ImageUtils.loadTexture( 'images/a.png' ) } );

It works fine in Chrome, IE, FF, until 3 days ago, after Chrome updated itself to the latest dev version 17.

Chrome 17 just doesn't load the image and complains the following

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

That's insane since the image is clearly in the same domain, so is this an issue of chrome or THREE.js or something else?

回答1:

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.}

回答2:

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

回答3:

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.

回答4:

You can also run a simple HTTP server using python by running the following command from your root folder.

python -m SimpleHTTPServer 8000

回答5:

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.

回答6:

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.

回答7:

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();
  })
});