11. Light sources and shadows

SpotLight

A spot light source can be thought of as a light source that gradually diverges along a specific direction, and the illumination range forms a cone in three-dimensional space.

// 聚光源
// 0xffffff:光源颜色
// 1.0：光照强度intensity
const spotLight = new THREE.SpotLight(0xffffff,1.0);
scene.add(spotLight);//光源添加到场景中

Spot light source divergence angle.angle

The divergence angle of the spotlight can be set through the attribute .angle, and the two attributes .target can be used to achieve this. 

// 设置聚光光源发散角度
spotLight.angle = Math.PI / 6;//光锥角度的二分之一

Directional light shadow calculation

Point light source PointLight, condensed light source SpotLight, directional light source DirectionalLight, etc. can all produce shadows, just like shadows in real life.

Directional Light DirectionalLight Shadow Steps

1. .castShadow sets the model object that produces shadows
2. .castShadow sets the light source object that produces shadows
3. .receiveShadow sets the model that receives the shadow effect
4. .shadowMap.enabledWebGl renderer allows shadow rendering
5. .shadow.camera sets the light source shadow rendering range

1.Model shadow casting.castShadow

// 设置产生投影的网格模型
mesh.castShadow = true;

2. Light source shadow casting properties.castShadow

// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 平行光设置产生阴影的光源对象,开启光源阴影的计算功能
directionalLight.castShadow = true;

3. Model shadow receiving attribute.receiveShadow

// 设置接收阴影的投影面
planeMesh.receiveShadow = true;

4.shadowMap.enabled allows the renderer to render shadows

// 设置渲染器，允许光源阴影渲染
renderer.shadowMap.enabled = true; 

5. shadow.camera sets the shadow rendering range

// 设置三维场景计算阴影的范围
directionalLight.shadow.camera.left = -50;
directionalLight.shadow.camera.right = 50;
directionalLight.shadow.camera.top = 200;
directionalLight.shadow.camera.bottom = -100;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 600;

Visualize shadow range

// 可视化平行光阴影对应的正投影相机对象
const cameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(cameraHelper);

Shadow range.mapSize and .radius

• light.shadow.mapSize shadow map size attribute (improves edge rendering effect)
• light.shadow.radius weakens blurred shadow edges

light.shadow.mapSize shadow map size property

You can compare the light source shadow generated by threejs to the color map.map learned earlier. The shadow is projected onto other objects. It can be understood that the shadow is mapped to the Mesh like a map.

You can try to set .mapSize to a smaller value (the size is generally 2 to the nth power) to check the shadow rendering quality.

directionalLight.shadow.mapSize.set(128,128)

Shadow radius.shadow.radius property

By increasing .shadow.radius appropriately, you can feel that the shadow edge and the non-shadow area are gradually transitioning, or that the shadow edge gradually weakens or blurs, without a clear sense of boundary.

directionalLight.shadow.radius = 3;