Obraz wkładki Three.js

Question

Próbuję dołączyć prosty obraz na siatce PlaneGeometry, ale wygląda na to, że nie działa.

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); 
    }; 

To mój pełny plik JavaScript z płótnie 580x300

widzę tylko czarny kwadrat ilekroć go uruchomić. jakieś pomysły? Dzięki!

tutaj jest mój odniesienia dla tych, którzy jej potrzebują:

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

Answer 1

Po pobraniu najnowszej tag z github i gry z przykładów Stało się jasne, że CORS jest jedynym winnym. Jeśli otworzyć Narzędzia Chrome developper i spojrzeć na konsoli istnieje wiele komunikatów o błędach:

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

Jeśli używasz Chrome, uruchom go z flagą -allow-file-access-from-plików

Testowany z Chrome 17.0.963.79.

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

Zmiana obrotu płaszczyzny.

Spróbuj tego.

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