Three.js: क्रॉस-ओरिजिन छवि लोड पार ओरिजिन रिसोर्स शेयरिंग नीति से इनकार

Question

मेरे क्रोम संस्करण है 31.0.1650.57

मैं Three.js सीख रहा हूँ और https://github.com/jeromeetienne/threex.planets/

से एक ग्रह नमूना डाउनलोड किया लेकिन जब मैं earth.html चलाने

एक अजीब त्रुटि होता शीर्षक कहते हैं:

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 

मैं कोड के माध्यम से देखा और कुछ है कि से संबंधित हो सकती लगता है इस त्रुटि:

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

लेकिन मैं इसे ठीक करने के लिए, मैं अपेक्षाकृत जावास्क्रिप्ट के लिए नया हूँ पता नहीं है,

आशा किसी ने मुझे बाहर करने में मदद मिलेगी!

धन्यवाद एक टन!

Answer 1

मैंने इस समस्या को Node.js इंस्टॉल करके और इस HTML को खोलने के लिए स्थानीय सर्वर चलाकर इस समस्या को ठीक किया है!

Answer 2

क्या आप इसे स्थानीय फाइल सिस्टम पर चला रहे हैं (एचटीएमएल फाइल पर डबल-क्लिक करें) या आप इसे वेब सर्वर पर चला रहे हैं? यदि आप इसे किसी वेब सर्वर पर चलाते हैं तो आपको क्रॉस-मूल अनुमति समस्याओं से बचना चाहिए। (यह क्रोम जैसे ब्राउज़र की एक सुरक्षा सुविधा है।)

Answer 3

नीचे दिए गए अपने चित्र टैग में crossOrigin="anonymous" का उपयोग करें।

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

Answer 4

मैं पता है कि समस्या आप इन स्थानीय

Answer 5

की सेवा अपनी परियोजना या सर्वर वातावरण, ऊपर उत्तर की तरह NodeJS में अपने कोड चलाने के लिए या Appserv में Three.js उदाहरण चलाने की आवश्यकता है

इस तरह कुछ ऐसा करना चाहिए।

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'