基于Three.js实现酷炫3D地图效果

     let city = new BaseMap(this, {
        data: data,
        // topFaceMaterial: material.getMaterial(),
        topFaceMaterial: new THREE.MeshPhongMaterial({
          color: "red", //想要的颜色
          emissive: 0x072534,
          transparent: true,
          opacity: 1,
        }),
        sideMaterial: sideMaterial.getMaterial(),
        renderOrder: 6,
        depth: config.cityName ? 0.3 : 3,
      })

// 在index.js中引入的给地图做材质estart
const texture = new THREE.TextureLoader()
const textureMap = texture.load(require('./data/map/gz-map.jpg'))
const texturefxMap = texture.load(require('./data/map/gz-map-fx.jpg'))
textureMap.wrapS = texturefxMap.wrapS = THREE.RepeatWrapping
textureMap.wrapT = texturefxMap.wrapT = THREE.RepeatWrapping
textureMap.flipY = texturefxMap.flipY = false
textureMap.rotation = texturefxMap.rotation = THREE.MathUtils.degToRad(45)
const scale = 0.1
textureMap.repeat.set(scale, scale)

 let city = new BaseMap(this, {
        data: data,
        // topFaceMaterial: material.getMaterial(),
        topFaceMaterial: new THREE.MeshPhongMaterial({
           map: textureMap,//不要忘记这里使用贴图
          color: "red", //想要的颜色
          emissive: 0x072534,
          transparent: true,
          opacity: 1,
        }),
        sideMaterial: sideMaterial.getMaterial(),
        renderOrder: 6,
        depth: config.cityName ? 0.3 : 3,
      })

 create () {
    // 添加雾
    this.scene.fog = new THREE.Fog(0x191919, 30, 70)
    this.getCenterPoint()
    this.createPlane()
    this.createChinaMap()
    this.createProvinceMap()
    this.createCityMap()
    this.createGrid()
    this.createLight()
    this.createRotateBorder()
    this.createLabel()
    this.createWall()
    // this.createBar()
    this.createParticles()
  }

 width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);