Graphical Development (V) Lighting of 032-Three.js - PointLight point source, SpotLight spotlight source, SpotLight shading, Hemisphere Light outdoor light source

PointLight Point Light Source

A point light source emits light from a point to all directions. A simple example is a bare bulb.
It's easy to implement one of the most common point light sources:

var pointLight = new THREE.PointLight(0xff0000); //Create a white point light source
pointLight.position.set( 50, 50, 50 );
scene.add( pointLight );

Point light supports four parameter configurations, two of which are the range and attenuation, in addition to the first two colors and the intensity of light:

var pointLight = new THREE.PointLight(0xff0000, 1, 100, 2); //Create a white point light source
pointLight.position.set( 50, 50, 50 );
scene.add( pointLight );

The third parameter, the illumination range, will not be affected by the point light source if the object is more than this distance from the point light source. By default, all objects will be affected by the point light source. If the parameter is set, the effect will be slowly reduced by the value of attenuation according to the fourth parameter. The default is 1, which can be set to 2 if the effect in reality needs to be simulated.

These properties can also be dynamically modified:

pointLight.color.set(0x000000); //Modify lighting color
pointLight.intensity = 0.5; //Modify the intensity of light
pointLight.distance = 50; //Modify the range of light exposure
pointLight.decay = 1.0; //Modify attenuation

The shading effect of point light source is basically the same as that of parallel light source, and since the point light source is scattered, the shading effect will end within the influence range of point light source. We can do this by following the shading process of parallel light, only modifying the parallel light to point light source:

pointLight = new THREE.PointLight("#ffffff");
pointLight.position.set(40, 60, 10);

//Tell parallel light that shadow projection needs to be turned on
pointLight.castShadow = true;

scene.add(pointLight);

SpotLight Spotlight Source

The effect of a spotlight source is also to emit light from a point and then illuminate it along a cone, mimicking flashlights, bulbs with lampshades, and so on.
The easiest way to achieve a spotlight is to simply set a color, which illuminates the origin by default:

var spotLight = new THREE.SpotLight( 0xffffff ); //Create a white light
spotLight.position.set( 100, 1000, 100 );
scene.add( spotLight );

Spotlight sources, like point sources, can also set the intensity and range of light

spotLight = new THREE.SpotLight( 0xffffff, 2.0, 100); //Set the light intensity to twice the default, with a range of 100

Since the spotlight is illuminated along a cone, we can set the angle of this vertebral body of the spotlight to influence:

spotLight = new THREE.SpotLight( 0xffffff, 2.0, 100, Math.PI/4); //Set the illumination cone of light to a range of 90 degrees

Since the spotlight can only illuminate objects in certain areas, there will be intersections of light and places where it cannot be illuminated, we can set the transition effect of intersecting gradients by configuring a fifth value:

spotLight = new THREE.SpotLight( 0xffffff, 2.0, 100, Math.PI/4, 0.5); //Set the junction transition range to 0.5, default to 0, no transition, maximum value to 1

We can also set the attenuation of the spotlight by setting the sixth value, just like a point light source:

spotLight = new THREE.SpotLight( 0xffffff, 2.0, 100, Math.PI/4, 0.5, 2.0); // Set the attenuation to a value of 2.0 for physical effects

Similarly, we can dynamically modify related configuration items:

spotLight.color.set(0x000000); //Modify lighting color
spotLight.intensity = 0.5; //Modify the intensity of light
spotLight.distance = 50; //Modify the range of light exposure
spotLight.angle = Math.PI/3; //Modifying the Radius of Light
spotLight.penumbra = 1.0; //Modify Boundary Transition
spotLight.decay = 1.0; //Modify attenuation

We can also modify the target of the spotlight to modify the direction of light exposure:

spotLight.target.set(0, 1, 1); //Modify the direction of the illumination

Implement Spotlight Shadow

Just like the setting of parallel light and point light source, the setting of spotlight turns on the shadows that can be generated and adds the spotlight to the scene:

spotLight= new THREE.SpotLight("#ffffff");
spotLight.position.set(40, 60, 10);
//Tell parallel light that shadow projection needs to be turned on
spotLight.castShadow = true;
scene.add(spotLight);

Hemisphere Light Outdoor Light Source

Finally, let's talk about the outdoor light source, which is mainly used to simulate the outdoor environmental light effect, such as the outdoor green space in the blue sky, the model will show the green ambient light below, while the upper part will be affected by the blue sky and the color will be blue.
Instantiated outdoor light sources support three parameters: the color of the sky, the color of the ground, and the intensity of light.

//Add outdoor light source
var hemisphereLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
scene.add(hemisphereLight);

Similarly, we can modify the properties in real time by configuring them:

hemisphereLight.color.set(0xffffff); //Change sky color to white
hemisphereLight.groundColor.set(0x000000); //Change ground color to black

We can also modify the position configuration to modify the direction of rendering:

hemisphereLight.position.set(0, -1, 0); //Default top-down rendering, which means the sky is above, is currently modified to render the sky color from bottom to top