तीन.जेएस सम्मिलित करें छवि

Question

मैं एक प्लेन जीमेट्री मेष पर एक साधारण छवि संलग्न करने की कोशिश कर रहा हूं लेकिन यह काम नहीं कर रहा है।

window.onload = function(){ 


     var renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 

     // camera 
     var camera = new THREE.PerspectiveCamera(95, window.innerWidth/window.innerHeight, 1, 1000); 
     camera.position.y = -250; 
     camera.position.z = 400; 
     camera.rotation.x = 45 * (Math.PI/180); 

     // scene 
     var scene = new THREE.Scene(); 

     var img = new THREE.MeshLambertMaterial({ 
      map:THREE.ImageUtils.loadTexture('img/front.jpg') 
     }); 
     // plane 
     var plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200),img); 
     plane.overdraw = true; 
     scene.add(plane); 
     // add subtle ambient lighting 
     var ambientLight = new THREE.AmbientLight(0x555555); 
     scene.add(ambientLight); 

     // add directional light source 
     var directionalLight = new THREE.DirectionalLight(0xffffff); 
     directionalLight.position.set(1, 1, 1).normalize(); 
     scene.add(directionalLight); 

     // create wrapper object that contains three.js objects 
     var three = { 
      renderer: renderer, 
      camera: camera, 
      scene: scene, 
      plane: plane 
     }; 
     renderer.render(scene,camera); 
    }; 

इस 580x300

की एक कैनवास जब भी मैं इसे चलाने मैं केवल एक काला वर्ग को देखने के साथ अपना पूरा जावास्क्रिप्ट फ़ाइल है। कोई विचार? धन्यवाद!

यहाँ ज़रूरतमंद लोगों के लिए मेरे संदर्भ है:

http://www.html5canvastutorials.com/webgl/html5-canvas-webgl-texture-with-three-js/

Answer 1

GitHub से नवीनतम टैग को डाउनलोड करने और उदाहरण यह स्पष्ट हो गया है कि CORS इसके लिए जिम्मेदार है के साथ खेलने के बाद। अगर मैं क्रोम developper उपकरण खोलने के लिए और कंसोल पर देखने के कई त्रुटि संदेश देखते हैं:

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

आप Chrome का उपयोग कर रहे हैं, इसके साथ झंडा -Allow-फाइल एक्सेस-से-फ़ाइलें

परीक्षण शुरू क्रोम 17.0.963.7 9 के साथ।

window.onload = function(){ 

    var renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

    // camera 
    var camera = new THREE.PerspectiveCamera(95, window.innerWidth/window.innerHeight, 1, 1000); 
    camera.position.y = -250; 
    camera.position.z = 400; 
    camera.rotation.x = 45 * (Math.PI/180); 

    // scene 
    var scene = new THREE.Scene(); 
    scene.add(camera); //ADDED 

    var img = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial 
     map:THREE.ImageUtils.loadTexture('img/front.jpg') 
    }); 
    img.map.needsUpdate = true; //ADDED 

    // plane 
    var plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200),img); 
    plane.overdraw = true; 
    scene.add(plane); 

    // add subtle ambient lighting 
    var ambientLight = new THREE.AmbientLight(0x555555); 
    scene.add(ambientLight); 

    // add directional light source 
    var directionalLight = new THREE.DirectionalLight(0xffffff); 
    directionalLight.position.set(1, 1, 1).normalize(); 
    scene.add(directionalLight); 

    // create wrapper object that contains three.js objects 
    var three = { 
     renderer: renderer, 
     camera: camera, 
     scene: scene, 
     plane: plane 
    }; 
    renderer.render(scene,camera); 
}; 

Answer 2

विमान के घूर्णन को बदलें।

इसे आजमाएं।

Plane.rotation.x = (-Math.PI/2); 
Plane.rotation.z = (-Math.PI/2);