数码吧

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，如有侵权，请联系删除。