1.画点建筑模型

添加光照，开启阴影

//开启renderer阴影
  this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

 //设置环境光
  const light = new THREE.AmbientLight(0xffffff, 0.6); // soft white light
this.scene.add(light);

 //夜晚天空蓝色，假设成蓝色的平行光
  const dirLight = new THREE.DirectionalLight(0x0000ff, 3);
   dirLight.position.set(50, 50, 50);
  this.scene.add(dirLight);   

平行光设置阴影

//开启阴影
 dirLight.castShadow = true;
 //阴影相机范围
dirLight.shadow.camera.top = 100;
dirLight.shadow.camera.bottom = -100;
dirLight.shadow.camera.left = -100;
dirLight.shadow.camera.right = 100;
//阴影影相机远近
dirLight.shadow.camera.near = 1;
dirLight.shadow.camera.far = 200;
//阴影贴图大小
dirLight.shadow.mapSize.set(1024, 1024);

• 平行光的阴影相机跟正交相机一样，因为平行光的光线是平行的，就跟视线是平行一样，切割出合适的阴影视角范围，用于计算阴影。
• shadow.mapSize设置阴影贴图的宽度和高度，值越高，阴影的质量越好，但要花费计算时间更多。

增加建筑

//添加一个平面
const pg = new THREE.PlaneGeometry(100, 100);
//一定要用受光材质才有阴影效果
          const pm = new THREE.MeshStandardMaterial({
            color: new THREE.Color('gray'),
            transparent: true,//开启透明
            side: THREE.FrontSide//只有渲染前面
          });
          const plane = new THREE.Mesh(pg, pm);
          plane.rotateX(-Math.PI * 0.5);
          plane.receiveShadow = true;//平面接收阴影
          this.scene.add(plane);

          //随机生成建筑
          this.geometries = [];
          const helper = new THREE.Object3D();
          for (let i = 0; i < 100; i++) {
            const h = Math.round(Math.random() * 15) + 5;
            const x = Math.round(Math.random() * 50);
            const y = Math.round(Math.random() * 50);
            helper.position.set((x % 2 ? -1 : 1) * x, h * 0.5, (y % 2 ? -1 : 1) * y);
            const geometry = new THREE.BoxGeometry(5, h, 5);
            helper.updateWorldMatrix(true, false);
            geometry.applyMatrix4(helper.matrixWorld);
            this.geometries.push(geometry);
          }
          //长方体合成一个形状
          const mergedGeometry = BufferGeometryUtils.mergeGeometries(this.geometries, false);
          //建筑贴图
          const texture = new THREE.TextureLoader().load('assets/image.jpg');
          texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
          const material = new THREE.MeshStandardMaterial({ map: texture,transparent: true });
          const cube = new THREE.Mesh(mergedGeometry, material);
          //形状产生阴影
          cube.castShadow = true;
          //形状接收阴影
          cube.receiveShadow = true;
          this.scene.add(cube);

效果就是很多高楼大厦的样子，为什么楼顶有窗？别在意这些细节，有的人就喜欢开天窗呢~

2.搞个雷达扩散和扫描特效

改变建筑材质shader，计算建筑的俯视uv

material.onBeforeCompile = (shader, render) => {
            this.shaders.push(shader);
            //范围大小
            shader.uniforms.uSize = { value: 50 };
            shader.uniforms.uTime = { value: 0 };
            //修改顶点着色器
            shader.vertexShader = shader.vertexShader.replace(
              'void main() {',
              ` uniform float uSize;
              varying vec2 vUv;
              void main() {`
            );
            shader.vertexShader = shader.vertexShader.replace(
              '#include <fog_vertex>',
              `#include <fog_vertex>
              //计算相对于原点的俯视uv
                      vUv=position.xz/uSize;`
            );
            //修改片元着色器
            shader.fragmentShader = shader.fragmentShader.replace(
              'void main() {',
              `varying vec2 vUv;
                uniform float uTime;
                void main() {`
            );
            shader.fragmentShader = shader.fragmentShader.replace(
              '#include <dithering_fragment>',
              `#include <dithering_fragment>
              //渐变颜色叠加
                  gl_FragColor.rgb=gl_FragColor.rgb+mix(vec3(0,0.5,0.5),vec3(1,1,0),vUv.y);`
            );
          };

然后你将同样的onBeforeCompile函数赋值给平面的时候，没有对应的效果。

因为平面没有z，只有xy,而且经过了-90度旋转后，坐标位置也要对应反转,由此可以得出平面的uv计算公式

vUv=vec2(position.x,-position.y)/uSize;

至此，建筑和平面的俯视uv一致了。

雷达扩散特效

• 雷达扩散就是一段渐变的环，随着时间扩大。

• 顶点着色器不变，改一下片元着色器，增加扩散环颜色uColor,对应shader.uniforms也要添加

shader.uniforms.uColor = { value: new THREE.Color('#00FFFF') };

 const fragmentShader1 = `varying vec2 vUv;
                uniform float uTime;
                uniform vec3 uColor;
                uniform float uSize;
                void main() {`;
          const fragmentShader2 = `#include <dithering_fragment>
              //计算与中心的距离
            float d=length(vUv);            
                  if(d >= uTime&&d<=uTime+ 0.1) {
                  //扩散圈
                    gl_FragColor.rgb = gl_FragColor.rgb+mix(uColor,gl_FragColor.rgb,1.0-(d-uTime)*10.0 )*0.5  ;                    
                  }`;
         
shader.fragmentShader = shader.fragmentShader.replace('void main() {', fragmentShader1);
shader.fragmentShader = shader.fragmentShader.replace(
              '#include <dithering_fragment>',
              fragmentShader2); 
   
   //改变shader的时间变量，动起来
  animateAction() {
          if (this.shaders?.length) {
            this.shaders.forEach((shader) => {
              shader.uniforms.uTime.value += 0.005;
              if (shader.uniforms.uTime.value >= 1) {
                shader.uniforms.uTime.value = 0;
              }
            });
          }
        }

噔噔噔噔，完成啦！是立体化的雷达扩散，看起来很酷的样子。

雷达扫描特效

跟上面雷达扩散差不多，只要修改一下片元着色器

• 雷达扫描是通过扇形渐变形成的，还要随着时间旋转角度

  const fragmentShader1 = `varying vec2 vUv;
                uniform float uTime;
                uniform vec3 uColor;
                uniform float uSize;
                //旋转角度矩阵
                mat2 rotate2d(float angle)
                {
                    return mat2(cos(angle), - sin(angle),
                                sin(angle), cos(angle));
                }
                //雷达扫描渐变扇形
                float vertical_line(in vec2 uv)
                {
                    if (uv.y > 0.0 && length(uv) < 1.2)
                    {
                        float theta = mod(180.0 * atan(uv.y, uv.x)/3.14, 360.0);
                        float gradient = clamp(1.0-theta/90.0,0.0,1.0);
                        return 0.5 * gradient;
                    }
                    return 0.0;
                }
                void main() {`;
                
                
          const fragmentShader2 = `#include <dithering_fragment> 
            mat2 rotation_matrix = rotate2d(- uTime*PI*2.0);  
    //将雷达扫描扇形渐变混合到颜色中
    gl_FragColor.rgb= mix( gl_FragColor.rgb, uColor, vertical_line(rotation_matrix * vUv)); `;

GitHub地址

https://github.com/xiaolidan00/my-earth