Processing
 

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

05/11/2011 04:04#1

Nano WANG

Member

Joined at: 9 months ago

Post: 2

Thank: 0

Thanked: 0

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?

05/11/2011 09:54Top#2

Mr.doob

Member

Joined at: 9 months ago

Post: 2

Thank: 0

Thanked: 0

11/04/2012 02:58Top#3

Joined at: 9 months ago

Post: 3

Thank: 0

Thanked: 0

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 
17/06/2013 10:08Top#4

Tim

Member

Joined at: 10 months ago

Post: 354

Thank: 0

Thanked: 0

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.

29/12/2014 04:49Top#5

Ice101781

Member

Joined at: 9 months ago

Post: 2

Thank: 0

Thanked: 0

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.

20/09/2016 09:30Top#6

Joined at: 4 months ago

Post: 1

Thank: 0

Thanked: 0

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

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

5 years ago - Reply: 5 - Views: 267

Prevent Google Chrome Log XMLHttpRequest

3 years ago - Reply: 5 - Views: 276

How can I include ChromeDriver in a JAR?

3 years ago - Reply: 3 - Views: 80

Chrome geolocation not working on any site

3 years ago - Reply: 1 - Views: 43

wrong borders' width in android browser

3 years ago - Reply: 4 - Views: 205

Uncaught SyntaxError: Unexpected token < On Chrome

3 years ago - Reply: 10 - Views: 462

Flashdata not getting cleared in Codeigniter

3 years ago - Reply: 5 - Views: 57

Illegal access Javascript error in Chrome

3 years ago - Reply: 1 - Views: 51

ng-repeat not updating in Chrome

3 years ago - Reply: 1 - Views: 81

Applying border to a checkbox in Chrome

4 years ago - Reply: 2 - Views: 118

open browser plugin using access vba

3 years ago - Reply: 1 - Views: 25

vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re