Three.js insertar imagen

Question

Estoy intentando adjuntar una imagen simple en una Malla PlaneGeometry pero parece que no funciona.

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

Este es mi archivo javascript completa con un lienzo de 580x300

sólo veo un cuadrado negro cuando lo ejecuto. ¿algunas ideas? ¡Gracias!

aquí es mi referencia para aquellos que lo necesitan:

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

Answer 1

Después de descargar la última etiqueta de GitHub y jugando con los ejemplos se hizo evidente que la CORS es el culpable. Si abro las herramientas de Chrome Développer y miro a la consola hay muchos mensajes de error:

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

Si está utilizando Chrome, iniciarlo con la bandera -Permitir-file-access-from-archivos

Probado con 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

Cambie la rotación del plano.

prueba esto.

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