Three. JS learning - light and shadow (understanding)

Reference resources ：Threejs Light and shadow - You know (zhihu.com)

stay ThreeJs in , The color of the object is also obtained by light superposition ,bling-Phong The same model applies here ,ThreeJs Light is also encapsulated into an object .

Catalog

6 Kind of light

1 The ambient light AmbientLight

2 Point source PointLight

3 Spotlights SpotLight

4 Directional light DirectionalLight

5 Hemispherical light HemisphereLight

6 Plane light RectAreaLight

shadow

1 Renderers Renderer Turn on shadow calculation

2 The light source Light Support shadows and turn on lighting shadows

3  Specify objects to cast shadows

4 Specifies that the object accepts shadows

---

6 Kind of light

1 The ambient light AmbientLight

// The ambient light - Constant term 
// There is no need to set the position , There is no need to set the light intensity 
AmbientLight(color);

// Code definition 
var light  = new THREE.AmbientLight(0xffffff);
scene.add(light);

2 Point source PointLight

// Code definition 
//() The inner four parameters represent :
//1  Color 
//2  The light intensity （ Range [0,1])
//3  Illumination distance （ The default is 0, infinity ）
//4  The light intensity decreases gradually with the direction of illumination , The default is 1 
var light = new THREE.PointLight(0xffffff, 1, 0, 1);
light.position.set(1,1,1);
scene.add(light);

3 Spotlights SpotLight

Spotlight is one of the most commonly used light sources , It is a light source with conical effect , Like a flashlight .

// Spotlights 

// The parameters represent ：
//1 color- The color of the light source , Default white 
//2 intensity- The light intensity , The default is 1, Range [0,1]
//3 distance- Illumination distance , The default is the light source distance 
//4 angle- angle , Unit radian , Default  Math.PI/3
//5 penumbra- The light and shadow attenuation percentage of the irradiation surface   The default is 0  Value [0,1]
//6 decay- Light attenuation index   When =2 The wrestling effect is the same as that of the real world , The default is 1
SpotLight(color, intensity, distance, angle, penumbra, decay);

// Code implementation 
var spotlight = new THREE.SpotLight(0xffffff);// establish 
scene.add(light);// Add to scene 

// Set properties separately 
spotlight.angle = Math.PI/2;
//or
this.spotlight.angle = Math.PI/2;

// Other attributes 

// Location -position
// Direct definition xyz or  use .position.set(...) Define coordinates  or  use  new.THREE.Vector3(...) Definition 
spotlight.position.x = 1;
spotlight.position.y = 2;
spotlight.position.z = 3;

spotlight.position.set(1, 2, 3);

spotlight.position = new THREE.Vector3(1, 2, 3);

// Whether or not visible -visible
spotlight.visible = true
this.spotlight.visible = this.lightProperties.visible// Dynamically modify whether the spotlight is visible 

// The goal is -target
// And camera similar , Determine the direction of light , It usually points to an object in the scene 
var geom = new THREE.BoxGeometry(4, 4, 4); // Create an object 
var material = new THREE.MeshLamberMaterial({
    color: 0xff0000}) // Create a material 
var cube = new THREE.Mesh(geom, material); // Create mesh objects 
spotlight.target = cube; // The spotlight object is cube

In fact, there are many other attributes , For example, setting shadows , I won't go into details here , For other attributes, please refer to the following article ：

three.js Spotlights SpotLight Use , Adjust the spotlight color 、 Location 、 angle 、 Strength 、 distance 、 Attenuation index 、 Direction 、 visibility 、 Whether to generate shadow attribute (vue Use in three.js09)_ A match lit blog

4 Directional light DirectionalLight

Directional light is a directional light , From the position position Start , Irradiate towards the target , Does not decay with distance ; The direction of the target here is similar to that of the spotlight , The target direction can be ：1- An object in the scene （ Need location information ）, It can also point to a point .

// Directional light 
DirectionalLight(color, intnesity);

// Code definition 
var light = new THREE.DirectionalLight(0xffffff, 0.8);
light.position.set(0,0,0);
scene.add(light);

// Target direction -target
//target Default is the origin , For customized target direction , It needs to be added to the scene to take effect 
scene.add(light.target);

5 Hemispherical light HemisphereLight

Hemispherical light above the scene , It can well simulate the outdoor lighting effect of the real environment ; Can hemispherical light （ Basic lighting ）+ Directional light （ The sun shines ） To simulate outdoor lighting .

// Hemispherical light 
// The parameters represent ：
//1 skyColor Sky Color , The default is white 
//2 groundColor  Ground color , Default is black 
//3  The light intensity   Default 1
.HemisphereLight(skyColor, groundColor, intensity)

6 Plane light RectAreaLight

A plane light source emits light evenly from a rectangular plane , Simulate bright windows or strip transparent objects . The biggest feature of plane light is that it does not support shadows , The materials it supports are also very limited , Only support MeshStandardMaterial and MeshPhysicalMeterial Two materials .

Besides ,Three.js At present, plane light is not supported , Need to add lib library ——RectAreaLightUniformsLib（ Some people also say not to add lib Libraries can also run ）

RectAreaLight(color, intensity, width, height)
// Code instance 

// Create a parameter , If the value is not transferred, it is the default value 
var width = 10;//  Illumination width , Default 10
var height = 10; //  Illumination height , Default 10
var intensity = 1;
//  Create a flat light 
var rectlight = new THREE.RectAreaLight(0xffffff, intensity, width, height);
// Location 
rectlight.position.set(5, 5, 0);
// Focus center 
rectlight.lookAt(0, 0, 0);
scene.add(rectlight);
// Someone actually found that without this description, it can be implemented , I won't go into that 
rectLightHelper = new THREE.RectAreaLightHelper(rectlight);
scene.add(rectLightHelper);

For more information about plane light, please refer to ： In depth understanding of three.js Medium plane light source RectAreaLight_ Yanlai's blog  

shadow

Above 6 Among the light sources , The lighting that supports shadows is ： Point source 、 Spotlights and directional lights .

ThreeJs Due to the large consumption of rendering shadows , Therefore, shadows are not displayed by default , In order to achieve shadow effect rendering , You need to complete the following settings ：

1 Renderers Renderer Turn on shadow calculation

renderer.shadowMap.enabled = true;

2 The light source Light Support shadows and turn on lighting shadows

// Only point light 、 Spotlights 、 Directional light （ Parallel light ） Support shadow 
light.castShadow = true;

3  Specify objects to cast shadows

// Specify on 
.castShadow = true;

// The code for 

// Follow the example of spotlight ：
const geom = new THREE.BoxGeometry(4, 4, 4); // Create an object 
const material = new THREE.MeshLamberMaterial({
    color: 0xff0000}); // Create a material 
const cube = new THREE.Mesh(geom, material); // Create mesh objects 
cube.castShadow = true; // Turn on rendering shadows , The default value is false

4 Specifies that the object accepts shadows

With shadow casting objects, it's not over yet , Objects that also need to accept shadows , For example, add a plane to draw shadows .

.receiveShadow = true;

// Code instance 

// Create a plane to accept shadows 
const plane = new THREE.PlaneGeometry(300, 300); //  Generate planar geometry 
const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
const planeMesh = new THREE.Mesh(plane, planeMaterial); //  Generate planar mesh 
planeMesh.receiveShadow = true; //  Set the plane mesh as the projection surface that accepts shadows 

That's all for shadow , The light source will be supplemented later 、 Shadow related content .