Three.js insérer l'image

J'essaie de joindre une simple image sur un PlaneGeometry Mesh, mais il semble ne pas fonctionner.

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

C'est mon fichier javascript avec une toile de 580x300

Je ne vois qu'un carré noir à chaque fois que je le lance. des idées? Merci!

ici est ma référence pour ceux qui en ont besoin:

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

source d'informationauteur AJ Naidas

  1. 11

    Après le téléchargement de la dernière balise à partir de github et de jouer avec des exemples, il est devenu clair que le De la SCRO est le seul à blâmer. Si j'ouvre le Chrome Développeur d'Outils et de regarder la console il y a de nombreux messages d'erreur: 

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

    Si vous utilisez google Chrome, le démarrer avec le drapeau-permettre l'accès de fichier de fichiers

    Testé avec 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);
};
  2. 0

    Modifier la rotation de l'Avion.

    de l'essayer.

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