directionallight three js

I am fairly new to three.js. I put together a few things using r55 and wanted to add lights. I've been trying to add a DirectionalLight according to Mrdoob's documentation - no luck... The light that I try to add does not show up - added shadowCameraVisible for debugging but it just won't show up... Anybody any idea what could be wrong with my code??? I appreciate any input!!

function init() { container = document.createElement('div'); document.body.appendChild(container); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); //CUBE var material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); var geometry = new THREE.CubeGeometry(x, y, z); cube = new THREE.Mesh(geometry, material); cube.position.z = z / 2; scene.add(cube); //FLOOR //floor color: var floorMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc }); //floor size: var floorGeometry = new THREE.PlaneGeometry(20, 20, 1, 1); var floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.position.y = -0.5; floor.doubleSided = true; scene.add(floor); //LIGHTS var dLight = new THREE.DirectionalLight(0xffffff); dLight.position.set = (0, 0, 1); dLight.shadowCameraVisible = true; dLight.shadowCameraNear = 1; dLight.shadowCameraFar = 150; dLight.castshadow = true; scene.add(dLight); //CAMERA POSITION camera.position.z = 50; controls = new THREE.TrackballControls(camera); renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFShadowMap;
}

4 Answers

dLight.position.set = (0,0,1);

Whoops, that doesn't look right... after this runs, the light position will NOT be a 3D vector, which will generate NaN from any math done with the light position.

dLight.position.set(0,0,1);
// or
dLight.position = new THREE.Vector3(0,0,1);

You set the light by

light.position.set (0,0,1);

But I think your light is inside the geometry. Take a look at . It has a working directional light with shadow.

The point is, that the material of your object have to be MeshLambertMaterial or MeshPhongMaterial. Other materials can't reflect the light.

//CUBE var material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); OR var material = new THREE.MeshLambertMaterial({ color: 0xff0000 });

MeshPhongMaterial can be used for shiny, MeshLambertMaterial for non-shiny(Lambertian) surfaces.

you need to set this: floor.receiveShadow = true;