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

のキャンバスと私の完全なjavascriptのファイルです。何か案は？ありがとう！ここ

は、それを必要とする人のための私のリファレンスです：githubのから最新のタグをダウンロードし、それがCORSを非難するものであることが明らかになった例で遊んで後

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

Answer 1

。私はクローム開発者に対しツールを開き、コンソールを見ると、多くのエラーメッセージがあります

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

あなたがChromeを使用している場合は、フラグ-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);