Three.js: Sci di origine carico immagine negata dalla politica di condivisione delle risorse Cross-Origin

Question

versione

mio Chrome è 31.0.1650.57

sto imparando Three.js e scaricato un campione pianeta da https://github.com/jeromeetienne/threex.planets/

Ma quando ho eseguito l'earth.html

un errore di strano accade come dice il titolo:

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 

ho guardato attraverso il codice e trovare qualcosa che potrebbe essere legato alla questo errore:

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

Ma io non so come risolvere il problema, io sono relativamente nuovo per javascript,

speranza che qualcuno mi avrebbe aiutato fuori!

Grazie mille!

Answer 1

Ho risolto questo problema installando Node.js e facendo girare un server locale per aprire questo html!

Answer 2

Si sta eseguendo su un file system locale (facendo doppio clic sul file html) o lo si sta eseguendo su un server Web? Se lo si esegue su un server Web, è necessario evitare i problemi di autorizzazione di origine incrociata. (Questa è una funzione di sicurezza di browser come Chrome.)

Answer 3

Utilizzare crossOrigin="anonymous" nel tag immagine come di seguito.

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

Answer 4

I konw che il problema è che è necessario per eseguire il progetto o l'esempio Three.js in ambiente server, come la risposta di cui sopra eseguire il codice in nodejs o AppServ servire questi locali

Answer 5

Qualcosa come questo dovrebbe risolverlo.

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'