क्रोम, Three.js: क्रॉस-ओरिजिन छवि लोड

Question

मैं THREE.js उपयोग कर रहा हूँ और कर रहे हैं वाला निम्नलिखित

var materialWall = new materialClass({ color: 0xffffff, map: THREE.ImageUtils.loadTexture('images/a.png') }); 

यह क्रोम, आईई, एफएफ में ठीक से काम करता है जैसे एक सामग्री जोड़ने के लिए, जब तक 3 दिन पहले से इनकार किया , क्रोम को नवीनतम देव संस्करण (17) में अपडेट करने के बाद।

क्रोम 17 बस छवि सही ढंग से लोड नहीं करता है और शिकायत

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

कि के बाद से छवि एक ही डोमेन पर स्पष्ट रूप से है थोड़े अजीब है, तो कैसे पार मूल सामान आते हैं?

क्या यह क्रोम या THREE.js या मेरा कोड का एक बग है?

Answer 1

https://github.com/mrdoob/three.js/issues/687 तीन.जेएस 'गीटहब पर एक समस्या को संदर्भित करता है, जिसमें a link to a wiki page describing how to run locally सहित वर्कअराउंड की अच्छी सूची है।

THREE.ImageUtils.crossOrigin = ""; 

या, CORS हेडर जोड़ने इतना है कि वे विशेष रूप से अनुमति दी जाती है: वहाँ भी सूत्र में कुछ अन्य समाधान, अपनी स्क्रिप्ट में निम्नलिखित को जोड़ भी शामिल है।

^{ध्यान दें कि इनमें से अधिकतर जानकारी इस मुद्दे के पहले से मौजूद लिंक से जोड़ा गया था, जिसमें इस उत्तर के मूल लेखक में शामिल नहीं था।}

Answer 2

आप स्थानीय होस्ट और का उपयोग कर Three.js से क्रोम चला रहे हैं, तो आप शायद इस आदेश पंक्ति फ्लैग द्वारा क्रोम चलाने की आवश्यकता:

c:// ... /chrome.exe --allow-file-access-from-files 

Answer 3

आप हैं:

• नहीं चाहिए अपने सर्वर स्थापित करने के लिए, और
• अपने ब्राउज़र की सुरक्षा को डाउनग्रेड नहीं करना चाहती

1. एक बाहरी जावास्क्रिप्ट में
2. स्टोर यह Base64 पाठ में छवि कन्वर्ट फ़ाइल
3. यह लिंक अपनी परियोजना पेज
रहे हैं:तो मैं इस के चारों ओर एक रास्ता है जो केवल प्रयास का एक छोटा सा शामिल है बाहर काम किया
4. लोड यह आपके बनावट में

पूर्ण विवरण उन है कि रुचि रखते हैं के लिए http://tp69.wordpress.com/2013/06/17/cors-bypass/ में पाया जा सकता।

Answer 4

इस

कमांड लाइन \ टर्मिनल पर मेरे लिए काम किया:

./chrome.exe --disable-web-security 

* ध्यान दें कि आप आदेश में यह काम करने के लिए निष्पादित करने से पहले क्रोम के सभी उदाहरणों को बंद करना होगा। के लिए

Answer 5

बिल्कुल सही समाधान:

तीन।js: क्रॉस-ओरिजिन छवि लोड

से इनकार बस छवि यूआरएल के लिए टाइमस्टैम्प जोड़ें। मुझे इसके पीछे तर्क नहीं पता, लेकिन यह काम करता है।

उदाहरण:

var material = new THREE.MeshBasicMaterial({ 
    map: loader.load(url + "?v=" + (new Date()).toString(), function() { 
    animate(); 
    }) 
}); 

Answer 6

आप भी अपने रूट फ़ोल्डर से निम्न आदेश चलाकर अजगर का उपयोग कर एक सरल HTTP सर्वर चला सकते हैं।

python -m SimpleHTTPServer 8000