three.js实现建筑物纹理流动

在知乎写第一篇软文哈，略有点小慌，最近一直在做智慧城市，大多特效特效我已实现，以往看着牛逼的智慧城市感觉也就那样，第一篇文章来点干货吧，废话不多说本文主要实现建筑物纹理流动的特效。

参考特效来源于thing.js demo

效果：

我实现的效果：

四个重点：

一、如何只贴建筑的周围，顶部和底部不贴

原理：采用归一化的法向量，由于归一化之后顶部法向量为（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;

本文转自 https://zhuanlan.zhihu.com/p/198009027，如有侵权，请联系删除。