My Chrome version is 31.0.1650.57

I'm learning THREE.js and downloaded a planet sample from .planets/

But when I run the earth.html

a strange error happens as the title says:

THREE.WebGLRenderer 59 three.min.js:424
Cross-origin image load denied by Cross-Origin Resource Sharing policy. earth.html:1
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data. threex.planets.js:73
(anonymous function) threex.planets.js:73

I looked through the code and find something that might be related to this error:

THREEx.Planets.baseURL  = '../'
...
map: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthmap1k.jpg'),

But I don't know how to fix it, I'm relatively new to javascript,

hope someone would help me out!

Thanks a ton!

My Chrome version is 31.0.1650.57

I'm learning THREE.js and downloaded a planet sample from https://github.com/jeromeetienne/threex.planets/

But when I run the earth.html

a strange error happens as the title says:

THREE.WebGLRenderer 59 three.min.js:424
Cross-origin image load denied by Cross-Origin Resource Sharing policy. earth.html:1
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data. threex.planets.js:73
(anonymous function) threex.planets.js:73

I looked through the code and find something that might be related to this error:

THREEx.Planets.baseURL  = '../'
...
map: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthmap1k.jpg'),

But I don't know how to fix it, I'm relatively new to javascript,

hope someone would help me out!

Thanks a ton!

• javascript
• canvas
• three.js
• cross-domain
• cors

• 1 github.com/mrdoob/three.js/wiki/How-to-run-things-locally does this help? You need a local server to run texture loading examples locally... – GuyGood Commented Nov 24, 2013 at 14:30
• Yea I've fixed this by running a local server with Node.js, thanks a lot! – Wang Liang Commented Nov 28, 2013 at 18:52

5 Answers 5

Are you running this on a local filesystem (double-clicking the html file) or are you running it on a web server? If you run it on a web server you should avoid the cross-origin permission problems. (This is a security feature of browsers such as Chrome.)

I fixed this problem by installing Node.js and running a local server to open this html!

Something like this should fix it.

var imageObj = new Image()
imageObj.onload = function(){
 THREE.ImageUtils.loadTexture(imageObj)
 // or maybe load image into canvas?
}
imageObj.crossOrigin="anonymous"
imageObj.src = THREEx.Planets.baseURL+'images/earthmap1k.jpg'

Use crossOrigin="anonymous" in your image tag as below.

<img src="SOMETHING" crossOrigin="anonymous" />

I konw that problem is you need to run your project or the Three.js example in server environment,like the above answer run your code in nodejs or Appserv these local serve