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

更新时间：2022年10月20日 09:39:50 作者：接着奏乐接着舞。

这篇文章主要为大家详细介绍了如何利用Three.js实现酷炫3D地图的效果，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以尝试一下

实现效果

前言

本文主要说明使用threejs技巧，来定制适合项目需求的样式，源码将在本文最后附上gitee地址。

使用

1.修改整体的背景图可以使用颜色或用贴图改材质

方法：

只需修改createChinaMap（）方法中的color属性即可，注意一共要修改4个color，其中有两个是地图边界线的颜色。也可以使用贴图，

2. 取消地图上柱状图显示

create钩子函数里注释掉// this.createBar()即可

3.更换地图、更换省份、市

更换很简单，就是如图位置修改引入的地图文件即可，但是修改之后需要注意的是，地图中心点改变了，比如现在将地图展示由金华市改为台州市，那么还需要修改@/comfig文件下的配置，如下图所示：

修改之后的效果如下：

4.修改相机的视角，页面展示的远近角度

5.修改地图的颜色及贴图

     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,
      })

6.关闭一些特效

create中是所有方法的开关，在这里可以进行调试

 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()
  }

7.页面适配和在vue2版本中使用

页面适配建议给这个地图使用绝对定位，样式代码可参考以下：

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

在vue2中使用：

npm 下载这个插件：@vue/composition-api

然后main.js注册下即可

到此这篇关于基于Three.js实现酷炫3D地图效果的文章就介绍到这了,更多相关Three.js 3D地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序实现走马灯效果实例
这篇文章主要给大家介绍了关于微信小程序实现走马灯效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
JavaScript仿京东实现秒杀倒计时案例详解
这篇文章主要为大家详细介绍了如何利用JavaScript实现京东秒杀倒计时效果，文中示例代码介绍的非常详细，感兴趣的小伙伴们可以参考一下
2022-03-03
使用eslint和githooks统一前端风格的技巧
这篇文章主要介绍了使用eslint和githooks统一前端风格,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-07-07
JS清空上传控件input(type="file")的值的代码
最近做的一个小功能，需要清空<input type="file">的值，但上传控件<input type="file">的值不能通过JavaScript来修改。
2008-11-11
Webpack简单实现两个自定义插件详解
这篇文章主要为大家详细介绍了Webpack简单实现两个自定义插件的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-04-04
微信小程序实现时间预约功能
这篇文章主要为大家详细介绍了微信小程序实现时间预约基本功能，一个类似电商的时间预约功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
javascript垃圾收集机制与内存泄漏详细解析
本文是对javascript中的垃圾收集机制与内存泄漏进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
JS运动特效之任意值添加运动的方法分析
这篇文章主要介绍了JS运动特效之任意值添加运动的方法,结合实例形式分析了javascript针对多物体运动通过参数控制不同运动效果的实现方法,需要的朋友可以参考下
2018-01-01
原生js实现计算购物车总金额的示例
本文主要介绍了原生js实现计算购物车总金额的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
Javascript Function对象扩展之延时执行函数
这篇文章主要介绍在js里面怎么延时执行一个函数?
2010-07-07