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

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.

1

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;

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.