“This is the 19th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The sample code USES three. Js – r73 version: cdnjs.cloudflare.com/ajax/libs/t…

So far we’ve talked about base light, ambient light, parallel light, point light, and we’ll talk about one more light source, SpotLight, and other light sources, and we’ll talk about them when we need them.

The spotlight

Spotlight: This is a light source that emits light from a cone and concentrates light on the object being illuminated. To use this light source, you need to specify the direction of light emission and the vertex Angle of the cone, α. An example spotlight is shown below:

• Spotlight features:
  • One of the most commonly used light sources (especially if you want to use shadows)
  • It is a light source with a conical effect
  • The light produced by this source has direction and Angle
• The constructor

THREE.SpotLight = function ( color, intensity, distance, angle, exponent, decay ) 
Copy the code

• Color: color of the light source
• Intensity: The intensity of the light source. The default value is 1.0. If it is 0.5, the intensity is half, meaning that the color is lighter. Just like the point source before.
• Distance: The intensity of the ray, the distance required to decay from the maximum to zero. The default is 0, indicating that the light does not decay. If it is not 0, indicating the Distance from the position of the light source to the Distance, the light is linearly decaying. The intensity of the light source is 0 when the Distance from the light source is Distance.
• Angle: The Angle at which the spot is colored, in radians, and the direction of the light source.
• Exponent: In a model of a light source, a parameter that decays more rapidly than it increases.
• Decay: The rate at which the intensity of a light decays with distance from the light source. A value of 2 is closer to real-world effects.

In actual combat

• We create a spotlight and control the corresponding properties through the GUI

let param;
let light;
let lightPos
function initLight() {
    var ParamObj = function () {
        this.x = 0;
        this.y = 0;
        this.z = 700;
        this.intensity = 1; // Light intensity
        this.distance = 0; // Light intensity
        this.angle = 45; // Light Angle
        this.exponent = 10; // Decay speed
        this.decay = 1; // Attenuation strength
    }
    param = new ParamObj();
    var gui = new dat.GUI();
    gui.add(param, "x", -10000.10000).name('Position of point light source X')
    gui.add(param, "y", -10000.10000).name('Position of point light source Y')
    gui.add(param, "z", -2000.2000).name('Position of point light source Z')
    gui.add(param, "intensity".0.1).name('Light intensity')
    gui.add(param, "distance".0.1).name('Light intensity')
    gui.add(param, "angle".0.360).name('Light Angle')
    gui.add(param, "exponent".0.100).name('Decay rate')
    gui.add(param, "decay".0.1).name('Attenuation strength')
    // Point light is defined as red
    light = new THREE.SpotLight(0xFF0000, param.intensity, param.distance, param.angle, param.exponent, param.decay);
    light.position.set(param.x, param.y, param.z)
    light.castShadow = true
    scene.add(light)
}

function changeLightPos() {
    light.position.set(param.x, param.y, param.z);
    light.intensity = param.intensity
    light.distance = param.distance
    light.angle = param.angle
    light.exponent = param.exponent
    light.decay = param.decay
}
Copy the code

When we modify the corresponding parameters, we can see the change of light. The shadow effect has not been simulated yet, so I don’t know what is wrong. Codepen sample code

conclusion

In this section, we mainly talk about the following contents:

• Spotlight Introduction
• Actual use of spotlights