ThreeJS — Shadow
category
Web
date
Aug 1, 2023
icon
slug
three-shadow
status
Published
summary
实现物体的阴影效果
tags
ThreeJS
type
Post
点光源PointLight、聚光源SpotLight、平行光DirectionalLight等都可以产生阴影，就像实际生活中的影子环境光AmbientLight这种没有方向的光源，不会产生阴影
平行光DirectionalLight阴影步骤
平行光
DirectionalLight阴影计算最少设置.castShadow设置产生阴影的模型对象
.castShadow设置产生阴影的光源对象
.receiveShadow设置接收阴影效果的模型
.shadowMap.enabledWebGl渲染器允许阴影渲染
.shadow.camera设置光源阴影渲染范围
.shadow.camera
.shadow.camera属性值是正投影相机OrthographicCamera，所以.shadow.camera属性的用法可以参考前面讲解过的正投影相机OrthographicCamera。CameraHelper可视化.shadow.camera为了方便观察阴影渲染的范围，需要把平行光对应的阴影相机
.shadow.camera可视化显示。.mapSize和.radius
light.shadow.mapSize阴影贴图尺寸属性(提升边缘渲染效果)
如果你的阴影边缘不够清晰，有模糊感、锯齿感，可以适当提升
.mapSize属性值。light.shadow.radius弱化模糊阴影边缘
适当提升
.shadow.radius,你可以感到阴影边缘与非阴影区域是渐变过渡，或者说阴影边缘逐渐弱化或模糊化，没有很明显的边界感。Demo
模拟太阳光阴影（通过GUI）
注意：实际生活中所有物体都可以产生阴影，同时所有物体都可以接收其它物体的阴影，所以所有Mesh都批量设置
.castShadow和.receiveShadow属性最后，你可以自己通过GUI的方式去调节太阳光
内容差不多到这里就介绍完了 🎉🎉🎉