用three.js实现炫酷的城市扫光效果

最近由于工作需要实现一些比较炫酷的3d城市扫光效果，现在分享给大家思路和方法
先看效果图：具体怎么实现的那？
首先像扫光这种效果是3D比较基本的效果，我们可以使用后处理、模版、材质三种方式来实现，鉴于后处理和模版这两块用three.js构建起来如果大家不熟悉会非常困难（但是维护起来确非常简单，如果实现了MRT，用后处理的方式性能也是最好的），因此本篇主要讲述如何用材质的方式来实现扫光效果。
用材质实现也有两种思路：
第一种，我们可以回忆下点光源是如何实现的，就是在片元着色器判断该点光源到每一个片元的距离，对吧？按照这种思路，我们如果实现圆环形扫光就可以直接在片元判断该片元是否在这个环形区域内就搞定了，如果是片形扫光我们可以判断该片元是否在该包围盒内对吧。
下面看下片形扫光着色器代码
vertexShader：

varying vec4 v_position;
#include <common>
#include <logdepthbuf_pars_vertex>//这个是为了支持logDepth
#ifdef USE_RELATIVE
uniform mat4 relativeModelMatrix;
#endif

        void main() {
   

        vec4 pos = vec4(position, 1.0);

        gl_Position = projectionMatrix * modelViewMatrix * pos;
        #include <logdepthbuf_vertex>

       #ifdef USE_RELATIVE
        v_position = relativeModelMatrix * pos;
        #else
         v_position = pos;
        #endif

      }

fragmentShader：

      uniform vec3 color;
      uniform vec3 maxPos;
      uniform vec3 minPos;
      varyin