vasturiano / react-globe.gl

React component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/react-globe.gl/example/world-population/
MIT License
904 stars 156 forks source link

Eliminate DirectionalLight Spot #151

Open MichaelBonnet opened 1 year ago

MichaelBonnet commented 1 year ago

In this example, the DirectionalLight in the scene casts an effective hemispheric shadow, which is good in my case. However, it also casts a very visible bright spot over the point it is shining. This occurs even at low intensity and low differential between DirectionalLight and AmbientLight. Is there a way to change how the light is "focused", per se, such that the focused spotlike-ish area either doesn't exist, or doesn't illuminate the center so intensely?

vasturiano commented 1 year ago

@MichaelBonnet you can access the existing lights via the scene() method . There is an ambient light and a directional light added by default. To access these:

const globeAmbientLight = globeRef.current.scene().getObjectByProperty('isAmbientLight', true);
const globeDirectionalLight = globeRef.current.scene().getObjectByProperty('isDirectionalLight', true);

At this point you can change the settings of either of these two lights. You can follow the ThreeJS docs for AmbientLight and DirectionalLight.

For your use case you can try playing with the directional light intensity, position (directly above the north pole by default) or where it's pointed at via the target (downwards at the globe by default).

In addition, you can add more lights to the scene, f.e. via scene().add(new THREE.SpotLight()).