SpotLight shadow issue

Questions
,
1

I don’t really know if i’m doing something wrong, but something weird happens when i try to display the SpotLight shadow camera helper.

 var ambienLight = new THREE.AmbientLight(0xffffff);
 scene.add(ambienLight);
 var SpotLight = new THREE.SpotLight(0xffffff,1);

 SpotLight.position.set(0,15,35);
 SpotLight.angle = Math.PI/8;
 SpotLight.distance = 15;
 SpotLight.penumbra = 0.05;
 SpotLight.distance = 50;
 SpotLight.decay = 0;

 SpotLight.castShadow = true;
 //SpotLight.shadow.update(SpotLight);
 SpotLight.shadow.mapSize.width = 1024;
 SpotLight.shadow.mapSize.height = 1024;
 SpotLight.shadow.camera.near = 0.5;
 SpotLight.shadow.camera.far = 50;   
 scene.add(SpotLight);   
    
 SpotLightHelper  = new THREE.SpotLightHelper(SpotLight);
 scene.add(SpotLightHelper);
 cameraHelper = new THREE.CameraHelper(SpotLight.shadow.camera);
 scene.add(cameraHelper)

and and gives me this result:
image

The camera for the shadows is way off no clue why. Also this are my update and render methods.

function update(){    
    render();    
    requestAnimationFrame(update);    
}
function render(){ 
    SpotLightHelper.update();
    cameraHelper.update();   
    renderer.render(scene,camera);
}

I saw a post with this issue or a similar issue i guess, and i try to put those methods in the render, but didn’t work.

Full Code

Sorry if the code looks messy i was working on a tetris kinda game

2

There is a typo in your code:

renderer.shadowMap.enable = true;

should be

renderer.shadowMap.enabled = true;

If shadows are not active, the transformation matrices of the shadow cameras are not updated. That’s the reason why you see the camera helper at the origin.

Updated fiddle: https://jsfiddle.net/2L4psnwx/

3

Damn i didn’t see that, thank you so much.