Wrong position of Spotlight shadow in three.js r85

Description of the problem

In creating a shadow for one scene, the basic processes include creating an available light, a cast shadow object, a receive shadow object. The problem I met is in the light’s part.

I create a spotlight with specifying its target to be a cube, adding the shadow camera to one camerahelper and then rendering them, but results seem different in two different three.js versions. The grammar and APIs I obeyed is the newest document in three.js website, can be accessed here.

A code snippet in two different three.js version shows here (the same codes with just different three.js version included):

I also took some screenshots to show the differences between them:


The abnormal one (r85) with shadow doesn’t displayed in the right place, as well as the shadow camera fixed to vec(0,0,0). The shadow camera scope is emphasized with yellow lines in the picture.


The good (r84) one with shadow displayed in the right position, but the shadow camera still fixed to vec(0,0,0), which I think it’s not supposed to be that, since a good shadow camera should follow the position of its belonged light? (such as the following pic)


It seems r85 can’t display shadow in spotlight normally, but there is no problem in r84; on the other hand, these two versions both have a wrong shadow camera position in spotlight environment.

Three.js version
  • r85

I didn’t test all the browsers but I think it is apparently not the browser internal issues.

  • All of them
  • Chrome
  • Firefox
  • Internet Explorer (Not test)
  • [] All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Just follow the basic requirements of three.js’ runtime environment is enough to catch this problem.

Author: Fantashit

1 thought on “Wrong position of Spotlight shadow in three.js r85

  1. @jostschmithals @Mugen87 In the spotlight example,controls.update() is dispatching a change event and forcing a call to render(), hence there are two render() calls. The first one renders incorrectly; the second one correctly.

    The problem can be duplicated in the same example by removing the call to render() at the bottom of the file.

    // render();

    The problem can be mitigated by adding this line in the example init() function:

    spotLight.shadow.update( spotLight );

    Obviously, we don’t want users to have to do this:

    spotLight.shadow.mapSize.width = 1024;
    spotLight.shadow.mapSize.height = 1024;
    spotLight.shadow.camera.near = 20;
    spotLight.shadow.camera.far = 200;
    spotLight.shadow.update( spotLight );

    So perhaps the recent changes should be revisited to track this down further. That is as far as I will be able to pursue this for now.

Comments are closed.