3D建模

从零开始搭建开源智慧城市项目（四）

上一节实现了上升线效果，这一节继续修改上一节中的shader，添加颜色渐变效果和扩散扫光效果。

Aug 30, 2024 • 3 min read

3D模型在线预览提供多种低代码平台3D模型在线预览解决方案，实现了将多种3D模型格式无缝集成到低代码业务表单中。这意味着用户可以在不离开低代码平台的情况下，直接查看和操作3D模型，极大地提升了数据可视化的效果和用户交互体验。

思路

颜色渐变：让扩散扫光的效果中间亮，两边暗，来模拟光的效果，可通过sin函数模拟效果，把扫光半径计算到0-PI之间。他们的值变化如下图，0，PI最暗，PI/2最亮。

扩散扫光：这个思路也比较简单，设置一个原点，然后第一帧模型距离这个原点0-10单位长度的所有的点进行发光，第二帧距离10-20单位长度的点进行发光，以此类推。

传入的值和上一节相比没有变化，主函数部分关于上升线效果的也不进行介绍了，想要了解可以看上一篇文章。下面说一下添加的部分。

函数新添加了一个计算两点（平面点）距离的函数distanceTo，通过勾股定理计算两个点的距离。
vec2 position2D=vec2(vPosition.x,vPosition.y);是把从顶点着色器中的点的x,y坐标进行组合，重新生成了一个平面坐标。
float Len=distanceTo(position2D,vec2(0,0))是计算模型点平面坐标到原点的距离，然后把距离在height*30.0和height*30.0+130.0之间的点进行混色。其中height*30是原点距发光环内半径的距离，height*30+130是原点距发光环外半径的距离，130.0是发光环的内径。
float dIndex = sin((Len - height*30.0) / 130.0 * 3.14)是通过sin函数把距离在height*30.0到height*30.0+130.0之间的值进行计算，值从height*30.0到height*30.0+65.0到height*30.0+130.0分别是0.0——1.0——0.0，实现两边值小中间值大的效果。
distColor= mix(uFlowColor, distColor, 1.0-dIndex)是通过mix函数进行颜色混色，把uFlowColor和 distColor两个颜色通过1.0： 1.0-dIndex进行混色.实现最终效果。