This is the 29th day of my participation in the August More Text Challenge

light

In the real world, everything we want to see needs to have a light source, otherwise it will be completely dark. Here is how to add light and shadow effects to the scene.

Let’s start with the creation of lighting

Create light

In the last section, we created a lighting effect as required by the case, and all lighting effects were created this way.

const light = new THREE.DirectionalLight(0xffffff); // Add a white parallel light
Copy the code

We also added a global light to the scene:

scene.add(new THREE.AmbientLight(0x222222));
Copy the code

Different types of illumination, through instantiation, can receive two values: illumination color and illumination intensity.

const light = new THREE.DirectionalLight(0xffffff.1.0); // Add a white parallel light
Copy the code

The second value is light intensity. The default value is 1.0, and we can adjust the light intensity according to project requirements.

We can also dynamically modify the color and intensity of the light:

const light = new THREE.DirectionalLight(0xffffff); // Add a white parallel light

light.color.set(0x000000); // Change the light color to black
light.intensity = 2.0; // Change the light intensity to twice the default value
Copy the code

AmbientLight Ambient global light

Ambient light illuminates all objects in the scene and is overlaid when calculating the color of the object.

const light = new THREE.AmbientLight( 0x404040 ); // Create a grey ambient light
scene.add( light );
Copy the code

Since ambient light works on all objects and all materials, it has no direction and cannot produce a shadow effect.

DirectionalLight parallel light

Parallel light is light emitted in a particular direction. It produces light in a parallel state, mainly to simulate the sun’s rays. Creating parallel light also accepts two values, color and light intensity:

const directionalLight = new THREE.DirectionalLight( 0xffffff.0.5 ); // Create a parallel light with a pure white color and half the default intensity
scene.add( directionalLight );
Copy the code

In addition to dynamically modifying the color and intensity of the light, parallel light can also determine the irradiation direction of parallel light by setting its position and target position (the concept of two points to determine a straight line) :

const directionalLight = new THREE.DirectionalLight( 0xffffff.0.5 ); 
directionalLight.color.set(0x000000);  // Change the lighting color to black
directionalLight.intensity = 1.0; // Change the light intensity to the default

directionalLight.position.set(10.10.10); // Set the position of the parallel light
directionalLight.target.set(0.0.0); // Set the orientation of the current parallel light
scene.add( directionalLight );
Copy the code

Add shadow effect

First, we need to set up the renderer to render the shadow effect:

renderer.shadowMap.enabled = true; / / the renderer
Copy the code

When instantiating a light, you need to set the light render shadow:

directionalLight = new THREE.DirectionalLight("#ffffff");
directionalLight.castShadow = true; // Set the parallel light projection projection

scene.add(directionalLight);
Copy the code

Finally, we need to set which models need to generate shadows and which models can receive shadows:

sphere.castShadow = true; // Turn on shadows
scene.add(sphere);

cube.castShadow = true; // Turn on shadows
scene.add(cube);

plane.receiveShadow = true; // Can receive shadows
scene.add(plane);
Copy the code

Above we set sphere and cube can produce shadow, the bottom plane can receive the shadow produced by ball and cube, can produce effect

Since setting up shadows is a very performance intensive task, we need to set the render range and density of shadows as appropriate as possible. Parallel light shadow is the implementation of the principle through orthogonal camera OrthographicCamera by examining the current model, namely directionalLight. Shadow. The camera is an orthogonal camera, as long as in the orthogonal camera can be projected within the scope of visual objects can be set projection. And we can set some camera attributes to achieve the shadow range:

directionalLight.shadow.camera.near = 20; // The closest distance to the shadow
directionalLight.shadow.camera.far = 100; // The maximum distance to create a shadow
directionalLight.shadow.camera.left = -50; // The leftmost position of the shadow distance position
directionalLight.shadow.camera.right = 50; / / most the right side
directionalLight.shadow.camera.top = 50; / / the top
directionalLight.shadow.camera.bottom = -50; / / at the bottom

// These two values determine the generated shadow density by default 512
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.mapSize.width = 1024;
Copy the code

PointLight point source

A point source is one that emits light in all directions from the position of a point, a simple example being an exposed bulb. Implementing a common point light source is simple:

const pointLight = new THREE.PointLight(0xff0000); // Create a white point light source
pointLight.position.set( 50.50.50 );
scene.add( pointLight );
Copy the code

The point light source supports four parameters, in addition to the first two colors and light intensity, the other two are the irradiation range and attenuation degree:

const pointLight = new THREE.PointLight(0xff0000.1.100.2); // Create a white point light source
pointLight.position.set( 50.50.50 );
scene.add( pointLight );
Copy the code

The third parameter is the irradiation range. If the object is more than this distance, it will not be affected by the point light. By default, all objects will be affected by the point light. If the parameter is set, the effect will be gradually reduced by the value of the fourth parameter, the degree of attenuation. The default value is 1. This parameter can be set to 2 if you want to simulate the effect in real life.

These attributes can also be modified dynamically:

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

The setup for a point-light shadow is basically the same as for a parallel light shadow, and since the point-light source is scattered, the shadow ends up in the area of influence of the point-light source. We can follow the shadow implementation of parallel light, but change the parallel light to a point light source:

pointLight = new THREE.PointLight("#ffffff");
pointLight.position.set(40.60.10);

// Tell parallel light to enable shadow casting
pointLight.castShadow = true;

scene.add(pointLight);
Copy the code

SpotLight

The effect of a spot light source is to emit light from a single point and then shine it along a cone, mimicking the effect of a flashlight, a bulb with a lampshade, etc. The easiest way to implement a spotlight is to directly set a color, and the default is to illuminate the light at the origin:

const spotLight = new THREE.SpotLight( 0xffffff ); // Create a white light
spotLight.position.set( 100.1000.100 );
scene.add( spotLight );
Copy the code

Spot light sources, like point light sources, can also set the light intensity and irradiation range

spotLight = new THREE.SpotLight( 0xffffff.2.0.100); // Set the light intensity to double the default, and the range to 100
Copy the code

Since the spotlight shines along the cone, we can set the Angle of the spotlight’s vertebral body to affect:

spotLight = new THREE.SpotLight( 0xffffff.2.0.100.Math.PI/4); // Set the cone of light to 90 degrees
Copy the code

Since the spotlight can only illuminate a certain area of the object, there will be a transition between the light and the light, we can set the fifth value to set the transition effect of the transition gradient:

spotLight = new THREE.SpotLight( 0xffffff.2.0.100.Math.PI/4.0.5); // Set the interface transition range to 0.5, default is 0, no transition, maximum is 1
Copy the code

We can also set the attenuation of the spot light by setting the sixth value, the same as the point light:

spotLight = new THREE.SpotLight( 0xffffff.2.0.100.Math.PI/4.0.5.2.0); // Set the attenuation to the physical effect value of 2.0

Copy the code

In the same way, we can dynamically modify related configuration items:

spotLight.color.set(0x000000); // Change the lighting color
spotLight.intensity = 0.5; // Modify the light intensity
spotLight.distance = 50; // Change the range of light exposure
spotLight.angle = Math.PI/3; // Change the radian of light
spotLight.penumbra = 1.0; // Modify interface transition
spotLight.decay = 1.0; // Modify the attenuation degree
Copy the code

We can also change the target of the spotlight to change the direction of the light:

spotLight.target.set(0.1.1); // Change the irradiation direction
Copy the code

Implement Spotlight shadow

The same as the parallel light and point light Settings, the spotlight Settings will also be able to generate shadows, and add the spotlight to the scene can be:

spotLight= new THREE.SpotLight("#ffffff");
spotLight.position.set(40.60.10);
// Tell parallel light to enable shadow casting
spotLight.castShadow = true;
scene.add(spotLight);
Copy the code

Breathing pherelight Outdoor light source

Finally, let’s talk about the outdoor light source. This light source is mainly to simulate the environmental light effect in the outdoors. For example, in the blue sky and green space, the green environmental light will be displayed under the model, while the color is blue under the influence of the blue sky. Instantiate an outdoor light source that supports three parameters: sky color, ground color, and light intensity.

// Add outdoor light source
const hemisphereLight = new THREE.HemisphereLight(0xffffbb.0x080820.1);
scene.add(hemisphereLight);
Copy the code

In the same way, we can modify the properties in real time by configuring them:

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

We can also change the render orientation by modifying the Position configuration:

hemisphereLight.position.set(0, -1.0); // Render from top down by default, i.e. sky on top, currently changed to render sky from bottom up
Copy the code