SpotLightCameraHelper + dat.gui buggy?

Questions
,
1

In a test example I use this script to create a SpotLight and connect its shadow.camera params to dat.gui:

// SpotLight
{
    const spotLight = new THREE.SpotLight(0xffffff, 0.4, 10, Math.PI * 0.3)
    spotLight.castShadow = true
    spotLight.position.set(0,2,6)
    console.log("spotLight.shadow =", spotLight.shadow)
    spotLight.shadow.mapSize.width = 1024
    spotLight.shadow.mapSize.height = 1024
    spotLight.shadow.camera.fov = 20
    spotLight.shadow.camera.near = 1
    spotLight.shadow.camera.far = 6

    scene.add(spotLight)
    scene.add(spotLight.target)
    // shadow camera helper
    const spotLightCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera)
    spotLightCameraHelper.visible = true
    scene.add(spotLightCameraHelper)

    // Debug
    const guiSpotLightFolder = gui.addFolder('Spot Light')
    guiSpotLightFolder.open()
    guiSpotLightFolder.add(spotLight, 'visible')
    guiSpotLightFolder.add(spotLight, 'intensity', 0, 1, 0.001)
    guiSpotLightFolder.add(spotLight.position, 'x', -5, 5, 0.001)
    guiSpotLightFolder.add(spotLight.position, 'y', -5, 5, 0.001)
    guiSpotLightFolder.add(spotLight.position, 'z', -5, 10, 0.001)
    guiSpotLightFolder.add(spotLightCameraHelper, 'visible')

    const guiSpotLightShadowFolder = guiSpotLightFolder.addFolder('Spot Light Shadow: Camera')
    guiSpotLightShadowFolder.open()
    guiSpotLightShadowFolder.add(spotLight.shadow.camera, 'fov', 1, 100, 1)
        .onChange(
            () => {
                spotLight.shadow.camera.updateProjectionMatrix()
                spotLightCameraHelper.update()
            }
        )
    guiSpotLightShadowFolder.add(spotLight.shadow.camera, 'near', 0, 10, 0.1)
        .onChange(
            () => {
                spotLight.shadow.camera.updateProjectionMatrix()
                spotLightCameraHelper.update()
            }
        )
    guiSpotLightShadowFolder.add(spotLight.shadow.camera, 'far', 0, 15, 0.1)
        .onChange(
            () => {
                spotLight.shadow.camera.updateProjectionMatrix()
                spotLightCameraHelper.update()
            }
        )
}

A codesandbox is here:

And just in case the github repo is here:

(The example is build on lesson 15 of Bruon Simon’s “Three.js journey” course – I hope I am not breaking any copyright or licensing rules. If so, please let me know! Thank you!)

The problems I encounter are 2:

  1. The shadow casting is not “cut off” according to the “shadow.camera.far” settings. To be honest: I don’t know if it should, but it is the case with the DirectionalLight instance. Does the SpotLight behave differently in this aspect? Or could this be a bug?

  2. On updating fov, near or far, the SpotlightCameraHelper gets updated, too, but it somehow falls back to standard values and not the currently assigned ones. E.g. if I change the fov to a small value, the helper updates properly; but if I then change the far params, the helper updates that very far param, but for the other params (near, fov) it jumps back to some other values (I assume the standard ones, but I am not sure).
    I do not know if this is an error in my approach to updating the Light and its Helper – or if this could probably a bug.

Thank you for any and all ideas and recommendations! :slight_smile:

2

Yes, since if you set the distance property of the spot light, it is used prior to the far value of its shadow camera.

It is actually not intended that you update the shadow camera’s fov property. For spot lights, the fov is computed based on the light’s angle and the shadow’s camera focus.

3

@Mugen87 Thank you! And sorry for replying so late!