Lazy loaded image
Web
🎁ThreeJS — Shadow
字数 1113阅读时长≈ 3 分钟
2023-8-1
2023-8-3
type
status
date
slug
summary
tags
category
icon
password
Edited
Aug 3, 2023 08:18 AM
Created
Aug 2, 2023 01:42 AM
点光源PointLight、聚光源SpotLight、平行光DirectionalLight等都可以产生阴影，就像实际生活中的影子
环境光AmbientLight这种没有方向的光源，不会产生阴影

平行光DirectionalLight阴影步骤

平行光DirectionalLight阴影计算最少设置
  1. .castShadow设置产生阴影的模型对象
  1. .castShadow设置产生阴影的光源对象
  1. .receiveShadow设置接收阴影效果的模型
  1. .shadowMap.enabledWebGl渲染器允许阴影渲染
  1. .shadow.camera设置光源阴影渲染范围

.shadow.camera

.shadow.camera属性值是正投影相机OrthographicCamera，所以.shadow.camera属性的用法可以参考前面讲解过的正投影相机OrthographicCamera。
notion image
 
📌
CameraHelper可视化.shadow.camera
为了方便观察阴影渲染的范围，需要把平行光对应的阴影相机.shadow.camera可视化显示。

.mapSize和.radius

  • light.shadow.mapSize阴影贴图尺寸属性(提升边缘渲染效果)
      • 如果你的阴影边缘不够清晰，有模糊感、锯齿感，可以适当提升.mapSize属性值。
  • light.shadow.radius弱化模糊阴影边缘
      • 适当提升.shadow.radius,你可以感到阴影边缘与非阴影区域是渐变过渡，或者说阴影边缘逐渐弱化或模糊化，没有很明显的边界感。
 
 

Demo

模拟太阳光阴影（通过GUI）
注意：实际生活中所有物体都可以产生阴影，同时所有物体都可以接收其它物体的阴影，所以所有Mesh都批量设置.castShadow和.receiveShadow属性
最后，你可以自己通过GUI的方式去调节太阳光
内容差不多到这里就介绍完了 🎉🎉🎉
 

参考链接

  1. Three.js中文网 (webgl3d.cn)
上一篇
ThreeJS — Sprite & EffectComposer
下一篇
ThreeJS — 外部模型
评论
Loading...
目录