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

Question

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!

Answer 1

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

Answer 2

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

Answer 3

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'