在知乎写第一篇软文哈，略有点小慌，最近一直在做智慧城市，大多特效特效我已实现，以往看着牛逼的智慧城市感觉也就那样，第一篇文章来点干货吧，废话不多说本文主要实现建筑物纹理流动的特效。
参考特效来源于thing.js demo
ThingJS演示
效果：
我实现的效果：
四个重点：
一、如何只贴建筑的周围，顶部和底部不贴
原理：采用归一化的法向量，由于归一化之后顶部法向量为（0.0，1.0，0.0），而底部法向量则为（0.0，-1.0，0.0）我们仅需要判断y值即可判断顶面或者底面，即：
vec3 tempNomal= normalize(fNormal);float power=step(0.95,abs(tempNomal.y));
在上面我们转换为求y的绝对值，通过绝对值来判断。
二、建筑流动的着色器：
1、顶点着色器
varying vec2 vUv;varying vec3 fNormal;varying vec3 vPosition;void main(){vUv = uv;fNormal=normal;vPosition=position;vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );gl_Position = projectionMatrix * mvPosition;}
2、片源着色器
uniform float time;varying vec2 vUv;uniform sampler2D colorTexture;uniform sampler2D colorTexture1;varying vec3 fNormal;varying vec3 vPosition;void main( void ) {vec2 position = vUv;vec3 tempNomal= normalize(fNormal);float power=step(0.95,abs(tempNomal.y));vec4 colorb=texture2D(colorTexture1,position.xy);vec4 colora = texture2D(colorTexture,vec2(vUv.x,fract(vUv.y-time))); if(power>0.95){gl_FragColor =colorb;}else{gl_FragColor =colorb+colorb*colora;} }
3、ShaderMaterial参数
let material = new ShaderMaterial({uniforms: this._uniforms,vertexShader: shader.vs ,fragmentShader: shader.fs,blending: AdditiveBlending,transparent:true,depthTest: false,side: DoubleSide,//polygonOffset:true});
4、uniform参数更改
this._uniforms.time.value += 0.01;
