ThreeJs-06详解灯光与阴影

一.gsap动画库

1.1 基本使用和原理

首先直接npm安装然后导入

比如让一个物体，x轴时间为5s

GIF

旋转同理

image-20241128214756914

动画的速度曲线，可以在官网的文档找到

image-20241128215002275

1.2 控制动画属性与方法

当然这里面也有一些方法，动画完成，动画开始等

image-20241128215200803

一些属性

image-20241128215321286

GIF

也可实现停止动画随时，给到一个变量

image-20241128215435858

双击暂停以及恢复

image-20241128215547134

二.灯光与阴影详解

添加环境光

这种光一般是用来增亮，他没有阴影效果

image-20241128215713865

GIF

平行光：类似于太阳

默认在这个位置朝着原点打光

image-20241128215940076

image-20241128220146024

image-20241128220120320

image-20241128220133926

也可以改变平行光的照射点

image-20241128220257997

image-20241128220312060

创建阴影四部曲

image-20241128220442295

image-20241128220504137

谁产生阴影

image-20241128220531950

image-20241128220543681

image-20241128220550572

注意：物体可以投射阴影，也可以接受阴影，不只是要在平面上接受

image-20241128220636819

2.1 直线光与阴影详细设置

移动球体z轴前后，出了一定范围会被剪切掉

image-20241128225842782

平行光是有范围的

image-20241128225911266

打印这个灯光，可以看到其范围

image-20241128230152414

far是后面，near是前面

image-20241128230143933

image-20241128230224691

现在就比刚才更远一点，到了10的边缘才被截取

image-20241128230246682

此时这个阴影是有锯齿感的

image-20241128230406432

默认是512

image-20241128230425752

image-20241128230437585

2.2 聚光灯

target就是聚光灯打向什么地方

image-20241202222227398

image-20241202222257316

设置好角度之后

image-20241202222452216

image-20241202222441442

如果想设置边缘的光慢慢衰减

image-20241202222603605

image-20241202222556576

衰减的快慢设置

GIF

2.3点光源

聚光灯是往一个地方发散，点光源是四面八方

image-20241202223924686

image-20241202223934578

点光源也可以设置距离和衰减情况

image-20241202224159648

image-20241202224151140

三.透明度纹理和阴影

加入给一个物体贴上一个透明度纹理，黑色就是全透明，白色就是不透明

image-20241202224758219

此时透明度有了，但是阴影还是正常的

image-20241202224839208

image-20241202224905647

加上alphatest即可，此时表示大于0.5就是透明，小于0.5就是不透明

image-20241202225016165

image-20241202225037314

此时新的问题贴上贴图后会有条纹的现象

这是由于灯光和阴影形成的一个问题

解决方法

设置灯光阴影的bias

image-20241202225211278

偏移量，让阴影便宜一点点

GIF

四.大场景动态级联阴影设置

添加一个相机辅助器把灯光加入进来

image-20241202225536814

可以看到物体在相机范围内有阴影超过就没有阴影

GIF

那如果实在一个很大的场景，比如把相机的阴影场景改的很大

image-20241202225741339

会发现阴影出现了锯齿状

image-20241202225813878

image-20241202225753220

那么此时的解决思路就是，分模块分远近来展示阴影

也就是级联阴影

类似于这样，近处的细节就比较细，远处稍微模糊点，因为距离远了也看不太清了

image-20241202230154511

导入

image-20241202230235699

需要的参数，这些都是可以直接复制threejs上面这一个图的官方例子

image-20241202230325297

然后创建级联阴影实例

maxfar表示阴影最大到多远，cascades多少个等级，mode是模式，parent当前级联阴影的父级，mapsize级联阴影的大小，lightdirection灯光的位置

image-20241202230427224

然后把所有需要设置阴影的材质都设置为级联阴影

image-20241202230644039

然后需要一直更新渲染

image-20241202231032394

此时灯管也不再需要投射阴影了交给级联来投射

image-20241202231311960

GIF

如果想设置灯光方向

image-20241202231438017

加上软阴影实现一个更柔滑的效果

image-20241202231509943

image-20241202231517749

前面对于灯光阴影的设置也可以不要了

image-20241202231536114

posted @ 2024-12-10 23:25  Heymar-10  阅读(188)  评论(2)  编辑  收藏  举报