js实现线路流动_three.js实现建筑物纹理流动

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

参考特效来源于thing.js demoThingJS演示​www.thingjs.com

效果：

我实现的效果：

四个重点：

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

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