Whenever I dynamically add a new spot at runtime, it seems like nothing is happening. The light only becomes visible on the objects when I change their material.
Even after adding MyMaterial.needsUpdate = true;, which is supposed to be the default setting, there is still no noticeable change.
To test this issue, I created a simple plane object using PlaneGeometry and MeshPhongMaterial. Upon pressing the "L" key, I add a SpotLight but still see no effect. However, by then pressing the "M" key to assign a new material to the plane, the spot light finally becomes visible.
Clearly, there is something missing from my implementation, but I can't seem to figure out what it is...
I am working with three.js r69.
WebGLRenderer Setup:
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xffffff, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;
The Plane Object:
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
planeMaterial.side = THREE.DoubleSide;
planeMaterial.needsUpdate = true;
plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.set(Math.PI / 2.0, 0, 0);
plane.receiveShadow = true;
plane.castShadow = true;
scene.add(plane);
Key Actions (with THREEx.KeyboardState.js):
function updateKey() {
// Add light
if (keyboard.pressed("L")) {
var spotLight = new THREE.SpotLight(0xffffff, 1.0, 0.0);
spotLight.position.set(0, 15, 0);
spotLight.angle = 1.39;
spotLight.intensity = 0.5;
var lightTarget = new THREE.Object3D();
lightTarget.position.set(10,0,0);
scene.add(lightTarget);
spotLight.target = lightTarget;
spotLight.castShadow = true;
spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;
spotLight.shadowCameraNear = 0.1;
spotLight.shadowCameraFar = 50;
spotLight.shadowCameraFov = 160;
spotLight.shadowCameraVisible = true;
scene.add(spotLight);
}
// Change Material
if (keyboard.pressed("M")) {
var mat = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
mat.side = THREE.DoubleSide;
plane.material = mat;
}
}