I'm encountering an issue where I can't add light using the keydown event in a three.js scene.
Here's the function that I am using:
function putLight(){
light = new THREE.SpotLight( 0xffffff );
light.position.set( 10, 80, 20 );
light.target.position.set( 0, 0, 0 );
light.castShadow = true;
light.shadowCameraNear = 20;
light.shadowCameraFar = 50;
light.shadowCameraFov = 40;
light.shadowMapBias = 0.1;
light.shadowMapDarkness = 0.7;
light.shadowMapWidth = 2*512;
light.shadowMapHeight = 2*512;
scene.add( light );
}
The function works perfectly when included in my init function:
function init(){
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
scene = new THREE.Scene();
geometry = new THREE.PlaneGeometry( 300, 300, 50, 50 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
material = new THREE.MeshLambertMaterial( { color: 0xdddddd } );
mesh = new THREE.Mesh( geometry, material );
mesh.position.copy(groundBody.position);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);
}
It also executes correctly if placed outside any function in the main script:
initCannon();
init();
loadModel();
putLight();
render();
However, there seems to be a problem when trying to call it within the keydown event listener:
window.addEventListener("keydown",function(e){
switch( e.keyCode ) {
case 76:
putLight();
break;
}
});
Any ideas on how to resolve this issue?
Appreciate any suggestions!