Cross-origin image load denied with three.js in chrome
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
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.
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:
- Convert the image into Base64 text
- Store it in an external Javascript file
- Link it to your project page
- 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.