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

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

上一节实现了添加建筑物线框，模型外墙和道路地面材质添加。这一节准备通过简单的shader实现上升线效果。

ShaderMaterial的组成

实现主要通关Three内自定义材质(ShaderMaterial)来实现,首先来实现一个最简单的ShaderMaterial来看一下这个材质的组成。

顶点着色器（vertexShader ）：首先来介绍一下顶点着色器，顶点着色器是用来处理顶点数据的，本例子中的顶点着色器主要代码就一句：

先来说一下每个变量的意思

• position：模型点位数据。
• modelViewMatrix：视图矩阵，等于camera.matrixWorldInverse * object.matrixWorld，就是模型矩阵和相机矩阵（视图矩阵）的乘积。
• projectionMatrix：投影矩阵，等于camera.projectionMatrix。
• gl_Position：矩阵变换后模型点位投影到屏幕上的位置，该值与position的关系如下图。

经过上述的矩阵变化，模型就会投影到裁剪坐标系然后经过一系列计算，显示到屏幕上。

片段着色器 （fragmentShader ）：片段着色器是片元的颜色,本例子中的顶点着色器如下：

gl_FragColor是每个片段的颜色，这里统一设置成白色 vec4(1.0，1.0，1.0，1.0)。 然后把这个材质赋给模型。

这里的显示效果：

所有的建筑模型显示白色。

上升线效果实现

这个效果的实现需要四个值：线上升到的高度height、上升线的颜色uFlowColor、建筑模型的颜色uCityColor、模型点位的高度值z（这个顶点着色器里面有，需要从顶点着色器传到片段着色器中），然后把这些值通过uniforms传入到着色器里面去。着色器代码如下：

render添加如下代码：

首先说一下render中的代码，render是在每一次渲染中都会执行，在每一帧渲染时把height值逐渐增加，当height大于100的时候重置。

接下来是shader材质的定义，这里我们在uniforms中把需要的上升线的高度height,上升线的颜色uFlowColor，建筑模型的颜色uCityColor进行了传入，然后在vertexShader中把fragmentShader需要的点位属vPosition性通过varying变量实现了两个着色器直接的共用，这样上升效果需要的变量就都齐全了。

在片段着色器中首先定义模型的基本颜色distColor，然后定义流动颜色的位置float topY = vPosition.z +5.0;vPosition.z 是当前点位的z值加上一个宽度就是模型需要着色的部位。下一步进行筛选，筛选点位高度在 vPosition.z-height和 vPosition.z+0.5-height之间的值进行着色。把这一块的颜色设置成上升片段的颜色（uFlowColor）.显示效果如下图：