ORL
ORL

Reputation: 618

How to configure a point light in three.js

I followed the getting started tutorial for three.js but have gotten stuck pretty quickly trying to add a point light to the scene. No matter how I finagle my code the point light never lights up the cube.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 
            window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

camera.position.z = 55;

var light = new THREE.PointLight( 0xff0000, 1, 100, 2);
light.position.set(20,0,20);
light.castShadow = true;

scene.add(light);

var spheresize = 1;
var pointLightHelper = new THREE.PointLightHelper( light, spheresize );
scene.add( pointLightHelper );

var ambient = new THREE.AmbientLight( 0x303030);
scene.add(ambient);

var cube_geometry = new THREE.BoxGeometry(10,10,10);
var cube_material = new THREE.MeshLambertMaterial({color:0x00ff00});
var cube = new THREE.Mesh(cube_geometry, cube_material);
scene.add(cube);

animate();


function animate(){
    requestAnimationFrame( animate);

    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

In the above code I can see the light helper displayed, and the green cube is lit by the ambient light, but no light comes from the point light (see attached image). What have I missed? How do I get the point light to illuminate the cube as well? code result

Upvotes: 0

Views: 2410

Answers (1)

Matey
Matey

Reputation: 1210

The light is working OK but you need to change the color of the light or of the material.

Currently you're shining pure red light on a pure green material. The color of the material determines which color components (and in what amount) are reflected by the material. And since pure red light has no green component the light seems to miss the object completely.

This is counter-intuitive because in our physical world there is rarely a pure red light and a pure green material.

Upvotes: 5

Related Questions