Nano WANG Nano WANG - 3 months ago 27
Javascript Question

Chrome, THREE.js: Cross-origin image load denied

I'm using THREE.js and adding an material like this

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

It works correctly in Chrome, IE, FF, until 3 days ago, after I update Chrome to the latest dev version (17).

Chrome 17 just cannot load the image correctly:

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

I'm wondering why, since the image is clearly in the same domain, how come the CROSS-ORIGIN stuff then?

is this a bug of chrome or THREE.js or my code?

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