Three.js 삽입 이미지

Question

PlaneGeometry 메쉬에 간단한 이미지를 첨부하려고하는데 작동하지 않는 것 같습니다.

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. 

이

이 테스트 플래그 -ALLOW 파일 액세스-부터 파일을 시작합니다 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

비행기의 회전을 변경하십시오.

시도해보십시오.

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