three.js 聚光灯阴影

上述效果第二张图并不理想待日后优化

官方文档

步骤

1. 渲染器开启阴影 设置阴影类型
2. 需要阴影的物体开启阴影 设置是否接受其他物体的阴影映在其身上
3. 设置一个接收阴影的物体 通常是地面
4. 灯光开启阴影，设置阴影参数–至关重要

代码示例

1. 渲染器开启阴影 设置阴影类型

const renderer = new THREE.WebGLRenderer(parameters);
//阴影开启
renderer.shadowMap.enabled = true;
//阴影类型
renderer.shadowMap.type = THREE.PCFShadowMap;
1
2
3
4
5

2. 需要阴影的物体开启阴影 设置是否接受其他物体的阴影映在其身上

const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshStandardMaterial({color:0x5511ff})
)
//显示阴影
mesh.castShadow = true;
//不接收其他物体投射的阴影 -- 默认false不用特意设置
mesh.receiveShadow = false;
1
2
3
4
5
6
7
8

3. 设置一个接收阴影的物体 通常是地面

const floor = gltf.scene.getObjectByName("floor") as THREE.Mesh;
//地面不产生阴影 -- 默认false
floor.castShadow = false;
//接收地面上的物体投射的阴影
floor.receiveShadow = true;
1
2
3
4
5

4. 灯光开启阴影，设置阴影参数–至关重要

const light = new THREE.SpotLight( 0xffffff );
light.castShadow = true;
light.shadow.mapSize.width = 2048; 
light.shadow.mapSize.height = 2048;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 500;
light.shadow.focus = 1;
light.shadow.bias = -0.00005;
1
2
3
4
5
6
7
8

灯光的位置通常需要调试
light.shadow.mapSize决定阴影的分辨率默认 512 越大开销越大
light.shadow.bias解决Three.js 阴影条纹问题