Salve a tutti,
stavo vedendo dei tutorial online sull'utilizzo di WebGL e Three.js.

Ho questo codice che dovrebbe applicare una texture ad un cubo:
codice:
// material
var material = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture("legno1.jpg")
});

// cube
var cube = new THREE.Mesh(new THREE.CubeGeometry(168, 168, 168), material);
cube.overdraw = true;
scene.add(cube);
Ma non viene applicata la texture (un'immagine 168x168) al cubo, che nella pagina web risulta nero (con chrome). Non capisco dove sia l'errore: il codice è preso da un tutorial, ho modificato soltanto il nome dell'immagine, che si trova sul desktop insieme alla pagina web.

Il codice completo è:
codice:
<script src="http://www.html5canvastutorials.com/libraries/Three.js">
</script>
<script>
    window.requestAnimFrame = (function(callback){
        return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
    })();
 
    function animate(lastTime, angularSpeed, three){
        // update
        var date = new Date();
        var time = date.getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        three.cube.rotation.y += angleChange;
        lastTime = time;
 
        // render
        three.renderer.render(three.scene, three.camera);
 
        // request new frame
        requestAnimFrame(function(){
            animate(lastTime, angularSpeed, three);
        });
    }
 
    window.onload = function(){
        var angularSpeed = 0.2;
        var lastTime = 0;
 
        // renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
 
        // camera
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 700;
 
        // scene
        var scene = new THREE.Scene();
 
        // material
        var material = new THREE.MeshLambertMaterial({
            map: THREE.ImageUtils.loadTexture("legno1.jpg")
        });
 
        // cube
        var cube = new THREE.Mesh(new THREE.CubeGeometry(168, 168, 168), material);
        cube.overdraw = true;
        scene.add(cube);
 
        // 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,
            cube: cube
        };
 
        /*
         * wait for texture image to load before
         * starting the animation
         */ 
        var textureImg = new Image("legno1.jpg");
        textureImg.onload = function(){
            animate(lastTime, angularSpeed, three, this);
        };
    };
</script>
Qualcuno mi sa aiutare? Ho cercato su internet alcune possibili soluzioni, ma non mi hanno risolto nulla (alcune non mi fanno neanche più visualizzare il cubo)..