Three.js 进阶(灯光阴影关系和设置、平行光、阴影相机) ...

本篇主要学习内容 :

• 灯光与阴影
  
• 聚光灯
  
• 点光源
  
• 平行光
  
• 阴影相机和阴影盘算
  
• 投射阴影接受阴影
  

点赞 + 关注 + 收藏 = 学会了
1.灯光与阴影

   1、材质要满意能够对光有反应

2、设置渲染器开启阴影盘算 renderer.shadowMap.enabled=true

3、设置光照投射阴影 directionalLight.castShadow = true

4、设置物体投射阴影 sphere.castShadow = true

5、设置物体接受阴影 plane.receiveShadow = true

  常见光源如下，入门时学习环境光和点光源:

2.聚光灯

SpotLight聚光源可以认为是一个沿着特定方向逐渐发散的光源，照射范围在三维空间中构成一个圆锥体。

1. const spotLight = new THREE.SpotLight('#ffffff', 0.5)
2. spotLight.position.set(5, 5, 5)
3. spotLight.castShadow = true
4. spotLight.intensity = 2
5. // 设置阴影模糊度
6. spotLight.shadow.radius = 20
7. // 设置阴影贴图的分辨率
8. spotLight.shadow.mapSize.set(4096, 4096) //1024倍数
9. spotLight.target = sphere
10. spotLight.angle = Math.PI / 6
11. // 从光源发出光最大距离的衰减程度
12. spotLight.distance = 0
13. // 半影衰减百分比0-1
14. spotLight.penumbra = 0
15. // 沿着光照距离的衰减程度
16. spotLight.decay = 0

复制代码

3. 点光源

PointLight可以类比为一个发光点，就像生存中一个灯泡以灯泡为中央向附近发射光线。

1. const pointLight = new THREE.PointLight('red', 0.5)
2. pointLight.position.set(2, 2, 2)
3. pointLight.castShadow = true
4. // 设置阴影模糊度
5. pointLight.shadow.radius = 20
6. // 设置阴影贴图的分辨率
7. pointLight.shadow.mapSize.set(4096, 4096) //1024倍数
8. // 从光源发出光最大距离的衰减程度
9. pointLight.distance = 0
10. // 半影衰减百分比0-1
11. pointLight.penumbra = 0
12. // 沿着光照距离的衰减程度
13. pointLight.decay = 0

复制代码

4. 平行光

DirectionalLight沿特定方向发射，自界说光源位置

1. const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
2. directionalLight.position.set(5, 5, 5)
3. directionalLight.castShadow = true
4. // 设置阴影模糊度
5. directionalLight.shadow.radius = 20
6. // 设置阴影贴图的分辨率
7. directionalLight.shadow.mapSize.set(2048, 2048) //1024倍数
8. // 设置平行光头摄像机属性
9. directionalLight.shadow.camera.near = 0.5 //近平面距离
10. directionalLight.shadow.camera.far = 500 //远平面距离
11. directionalLight.shadow.camera.top = 5 //Y轴正方向上的边界
12. directionalLight.shadow.camera.bottom = -5 //Y轴下方向上的边界
13. directionalLight.shadow.camera.left = -5 //X轴负方向上的边界
14. directionalLight.shadow.camera.right = 5 //X轴正方向上的边界

复制代码

5.阴影相机

5.1）设置相机.shadow.camera长方体范围

根据3D场景渲染范围，去设置.shadow.camera长方体尺寸参数，一样平常比你要渲染的范围稍微大一些即可，过小阴影不显示或显示不完整，过大许多大概阴影偏模糊，你可以比较下面两个参数的阴影渲染差别。

1. directionalLight.shadow.camera.left = -50*10;
2. directionalLight.shadow.camera.right = 50*10;

复制代码

1. directionalLight.shadow.camera.left = -50*100;
2. directionalLight.shadow.camera.right = 50*100;

复制代码

5.2） 调节光源位置

光源位置影响平行光阴影相机.shadow.camera的位置，所以要根据渲染范围调整光源的位置。
你可以比较测试两个不同的光源位置，对应阴影渲染效果。

1. directionalLight.position.set(100, 60, 50);

复制代码

1. directionalLight.position.set(100*2, 60*2, 50*2);

复制代码

5.3） 确定阴影盘算范围

实在平行光阴影范围的设置，你可以类比以前正投影机位置、长方体可视化空间的设置。

• 1.先大概确定下3D场景中需要阴影盘算范围，不消正确，有一个数量级就行，比如几百、几千。
  
• 2..shadow.camera的.left、.right、.top、.bottom、.near、.far属性界说的长方体空间
  
• 3..shadow.camera的位置(光源位置影响.shadow.camera的位置)
  

需要阴影范围数量级：z方向尺寸1000左右，xy方向100左右。

1. for (let i = -3; i < 4; i++) {
2.     const mesh2 = mesh.clone();
3.     // 设置产生投影的网格模型
4.     mesh2.castShadow = true;
5.     mesh2.position.z = 100 * i;
6.     group.add(mesh2);
7. }

复制代码

5.4） 根据尺寸数量级设置阴影渲染范围

比如光线是从斜上方照射下来，模型y方向高度100左右，这时候y可以设置为100左右，xz也可以根据渲染范围先给个大概尺寸。

1. directionalLight.position.set(100, 100, 100);
2. // 平行光默认从.position指向坐标原点

复制代码

光线方向，你可以改变xz坐标来调整

1. directionalLight.position.set(-100, 100, -100);

复制代码

渲染范围可以都先给个几百量级的值，不消精准，先设置，在微调。

1. // 设置三维场景计算阴影的范围
2. directionalLight.shadow.camera.left = -100;
3. directionalLight.shadow.camera.right = 100;
4. directionalLight.shadow.camera.top = 100;
5. directionalLight.shadow.camera.bottom = -100;
6. directionalLight.shadow.camera.near = 0.5;
7. directionalLight.shadow.camera.far = 100;

复制代码

6. 投射阴影接受阴影

6.1）开启场景阴影贴图

1. renderer.shadowMap.enabled = true
2. document.body.appendChild(renderer.domElement)

复制代码

6.2）设置光照投射阴影

1. const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
2. directionalLight.position.set(5, 5, 5)
3. directionalLight.castShadow = true

复制代码

6.3）接受投射阴影

1. // 定义一个球  几何体 材质  缺一不可！！！！
2. let sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
3. let material = new THREE.MeshStandardMaterial()
4. let sphere = new THREE.Mesh(sphereGeometry, material)
5. //投射阴影
6. sphere.castShadow = true
7. console.log(sphere, 'sphere')
8. scene.add(sphere)

复制代码

  感谢：b站up主：老陈打码 以及 threejs中文网 教学及参考文档
到此threejs进阶学习结束，道阻且长，行则将至。与诸君共勉。 ⭐️

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。