ThreeJs-12使用着色器加工材质

一.three框架材质原理与应用

其实three里面所有的材质不管是基础还是点等等之类最终都会编译为shader然后执行,所以如果拿到一个材质我想对某个地方小改一下,那么也是可以用shader来进行修改的

image-20241228172314925

这里用基础材质创建一个平面

image-20241228173407666

通过材质的这个回调就可以拿到他的shader并且里面也有顶点着色器和片段着色器

image-20241228173729164

image-20241228173737369

当然这里面这些定义都不是目前学的,因为这是three自己封装的,要看其源码都可以在这个目录下面找到

像commen就是封装了一些可以快速使用的变量函数等

image-20241228174051337

还比如这个导入就是对position做出了一个封装,可以快速修改位置通过transformed变量

image-20241228174248517

当然如果我们要修改一些参数

因为glsl是字符串,所以需要通过字符串的方法来修改

比如偏移位置

image-20241228174719387

image-20241228174726468

动起来

image-20241228175328680

GIF

二.修改物理光照材质制作人物被打效果

先把模型加载进来

image-20241228181005889

image-20241228181014266

继续加载纹理和法相纹理

image-20241228181406442

image-20241228181414568

修改被打效果,核心就是脸扭曲变形

比如让连续旋转180度,PI就是3.14就是180度,注意旋转角度是x轴和z轴同时转

image-20241228183022563

image-20241228183031723

当然要捏造被打的形象,扭曲应该围绕着y轴为角度

image-20241228183141961

image-20241228183149772

开启阴影后发现阴影有点问题

image-20241228192835134

这时候需要调整法相的旋转角度跟刚才保持一致

注意几个问题:法相在前,此时还没有transformed用原始的position

还有就是法相的位置是objectNormal

第三个就是法相前面已经声明了angle这些后面不用在声明直接用

image-20241228193413906

image-20241228193346518

image-20241228193551800

这个问题解决后但是投射到后面的还是不对

image-20241228193612738

对于3D物体有一个方法

image-20241228193759085

首先需要设置一个自定义深度材质

image-20241228194210279

有了这个材质后,跟刚才的材质一样也要去设置旋转角度,只是没有了法相的设置

image-20241228194350942

image-20241228194358175

最后添加来回被打的效果,加上时间器

注意来回要加sin函数

image-20241228195516669

GIF

posted @   Heymar-10  阅读(179)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
点击右上角即可分享
微信分享提示