Upgraded to latest (r160) and my lighting has changed

[aNooby]

Not sure where to start debugging this but after moving from low r150s, I think r154, to the latest r160, I get the following changes in the scene. It’s much dimmer / darker now and I’m not sure why. I tried changing the lights position, Y axis and X axis, values to move the lights closer to my items but I can’t see any change to the scene lighting / item brightness at all when I change the values.

The scene/lighting code in my app did not change when I upgraded THREE. I’m currently testing the size of my items but that’s the only change I’ve made to the items in the scene as you can see in the screenshots. Anyone have any ideas?

Thanks!

    CreateLights()
    {

        var ambientLight = ModelLight.Ambient();
        this.Scene.add( ambientLight );

        var hemiLight = ModelLight.Hemisphere();
        this.Scene.add(hemiLight);

        var light = ModelLight.SpotLight({x: 50, y: 200, z: 0}, 0xffa95c);
        this.Scene.add( light );

        light = ModelLight.SpotLight({x: 100, y: 200, z: 0}, 0xffa95c);
        this.Scene.add( light );

        light = ModelLight.SpotLight({x: 200, y: 200, z: 0}, 0xffa95c);
        this.Scene.add( light );
    }

AFTER UPGRADE

BEFORE UPGRADE

[Harold]

This is probably why: Updates to Color Management in three.js r152

[aNooby]

Ok thanks. I looked through that thread and I guess I have more to learn about lighting. So there was a big change to color management but it’s not clear yet how to fix my scene…

What’s strange is that when I reposition the lights, I see abs no change in my scene at all. Which to me makes me think the lights aren’t even being rendered now for some reason. And maybe only the hemisphere light is affecting my scene now for reason…/?/

Guess I’ll start debugging and try to figure this out

[aNooby]

Ok I understand less than when I started this thread now… I turned off all lights in my scene and I can still see my items, just with no color for the cube items. The rectangular grid shows exactly the same with or without lights. I thought if I removed all lights from a scene, I should get pure black… no?

Before I tested the “remove all lighting”, I did this:

1. I removed SpotLights, no change. The items were the same dark/dim blue.
2. I removed AmbientLight, no change. The items were the same dark/dim blue.

So, then I removed all the lighting and this is what I see…

WITH NO LIGHTS IN THE SCENE

[donmccurdy]

Significant color management changes were made in r152→r152, and lighting changes in r154→r155. The migration guide gives more information about each release. If you’re moving from r154 then the guide you want is probably this one:

• Updates to lighting in three.js r155

Notably decay is different, and migrating would generally mean increasing intensity or decreasing decay. I suspect you’re seeing your ambient and hemisphere lights (which don’t decay) in the screenshot but mostly missing the spotlights (which do).

[aNooby]

Thanks, the link is definitely helping me understand more of what I need to do… Still kinda at square one though, I changed the code using the SpotLight example on the /examples site as a guide and I see no change, still, at all in my scene. Here’s the code and screenshot…

    CreateLights()
    {

        // var ambientLight = ModelLight.Ambient();
        // this.Scene.add( ambientLight );

        var hemiLight = ModelLight.Hemisphere();
        this.Scene.add(hemiLight);

        var light = new THREE.SpotLight( 0xffa95c, 10 );
        light.castShadow = true;
        light.angle = 0.3;
        light.penumbra = 0.2;
        light.decay = 2;
        light.distance = 50;
        this.Scene.add(light);

        // var light = ModelLight.SpotLight({x: 50, y: 200, z: 0}, 0xffa95c);
        // this.Scene.add( light );

        // light = ModelLight.SpotLight({x: 100, y: 200, z: 0}, 0xffa95c);
        // this.Scene.add( light );

        // light = ModelLight.SpotLight({x: 200, y: 200, z: 0}, 0xffa95c);
        // this.Scene.add( light );
    }

AFTER SPOTLIGHT CHANGE

[donmccurdy]

As a few suggestions (for debugging, not necessarily solutions) —

1. Try disabling/enabling the spotlights, or disabling/enabling all lights except the spotlights. Can you identify which light types you’re having trouble with?
2. Try setting .distance = 0, and then either .decay = 0 or .decay = 1. This greatly increases the spotlight’s range.
3. Try adding SpotLightHelper to visualize the spotlight’s cone and range.
4. Try adding lil-gui to test light parameters more easily

[aNooby]

Thanks! Yep, I’ve been reading/debugging… Lots of changes required to make my scene work again… But, that’s ok. So, I’ve been playing with values of a SpotLight and have it mostly sorted out now. Thanks for all the help!

Here are some screenshots of the position/target position that finally got my orientation / location of the light working the way I wanted. And, yep, Decay = 0 was key.

    var spotLight = new THREE.SpotLight( 0xffffff, 100 ); // 2nd param is intensity I think
        spotLight.position.set( 2.5, 50, 2.5 ); // I changed this at runtime in the Inspector....
        spotLight.angle = Math.PI / 6; // Take from the SpotLight example, changed in inspector
        spotLight.penumbra = 1; // Not sure about this...
        spotLight.decay = 0; // No decay, light travels infinitely I guess?
        spotLight.distance = 0; // Not sure about this...
        this.Scene.add(spotLight);

        this.SpotLightHelper = new THREE.SpotLightHelper(spotLight);
        this.Scene.add(this.SpotLightHelper);

CHANGE TARGET POSITION VALUE, otherwise it always points at origin of scene

CHANGE LIGHT POSITION

ZOOMED OUT

ZOOMED IN

[donmccurdy]

Glad to hear! Quick explanations on .decay and .distance —

.decay is the primary control for how a light decays or fades over distance. When set to decay=0 light does not lose strength, and distance is effectively infinite. When set to decay=1, light loses strength linearly with distance. When set to decay=2, light loses strength quadratically (physically correct). This is an exponent, so other numerical values are allowed.

.distance is an override, and will (regardless of any decay) stop the propagation of light beyond the given distance in world units. There’s some smoothing at the threshold so it doesn’t look too harsh. Think of this as a secondary control for performance or artistic reasons — keeping it at zero is generally fine.

[aNooby]

Thanks! Learning…