Why does my three.js lighting not work?

I can’t figure out what’s wrong in this fiddle (http://jsfiddle.net/resistdesign/s6npL/), based on the docs and some examples and such, the lights should be working.

var camera, scene, renderer, geometry, material, mesh, light1;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.SmoothShading } );

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    scene.add( new THREE.AmbientLight( 0x000000 ) );

    light1 = new THREE.PointLight( 0xff0040, 2, 50 );
    scene.add( light1 );

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    var time = Date.now() * 0.0005;

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    light1.position.x = Math.sin( time * 0.7 ) * 30;
    light1.position.y = Math.cos( time * 0.5 ) * 40;
    light1.position.z = Math.cos( time * 0.3 ) * 30;

    renderer.render(scene, camera);

}

Answer

I seems that you have misinterpreted the meaning of the arguments of PointLight(). The third argument is the distance where the intensity of the light is actually zero. So add these lines in init():

light1 = new THREE.PointLight( 0xff0040, 1, 5000 );
light1.position.set( 500, 500, 500 );

Also remove the update of the light1.position from the render() routine until you make sure it does what you think.

Leave a Reply

Your email address will not be published. Required fields are marked *