文章目录

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


three.js 聚光灯阴影_代码示例


three.js 聚光灯阴影_three.js_02

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

​​官方文档​​

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

代码示例

1. 渲染器开启阴影 设置阴影类型
const renderer = new THREE.WebGLRenderer(parameters);
//阴影开启
renderer.shadowMap.enabled = true;
//阴影类型
renderer.shadowMap.type = THREE.PCFShadowMap;
2. 需要阴影的物体开启阴影 设置是否接受其他物体的阴影映在其身上
const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshStandardMaterial({color:0x5511ff})
)
//显示阴影
mesh.castShadow = true;
//不接收其他物体投射的阴影 -- 默认false不用特意设置
mesh.receiveShadow = false;
3. 设置一个接收阴影的物体 通常是地面
const floor = gltf.scene.getObjectByName("floor") as THREE.Mesh;
//地面不产生阴影 -- 默认false
floor.castShadow = false;
//接收地面上的物体投射的阴影
floor.receiveShadow = true;
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;

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

three.js 聚光灯阴影_three.js_03