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;
