【threejs】可视化大屏酷炫3D地图附源码

简介: 【threejs】可视化大屏酷炫3D地图附源码

效果如下:


image.gif

1. 前言:


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

2. 使用:


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


27889cc69bfb4f85b5010e27ba04781c.png

image.png

方法:


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

image.png

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


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

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


image.png

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

image.png

修改之后的效果如下:

image.png

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


image.png

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


83ddd2f949cb4360ace4d18ce51dee1e.png

     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中使用:

1. npm 下载这个插件:@vue/composition-api
2. 然后main.js注册下即可

3. 源码


以下是gitee下载地址,如果下载不了,可以评论区喊我一声,我给发邮箱~

image.png

相关文章
|
5月前
Threejs制作窗户透亮效果
这篇文章讲解了如何在Three.js中制作窗户的透亮效果,包括设置透明材质和光照以实现逼真的窗户渲染效果的技术细节。
118 1
|
5月前
|
移动开发 JavaScript 前端开发
💻揭秘!如何用 Vue 3 实现酷炫的色彩魔方游戏✨
本文分享了开发基于Canvas技术的小游戏"色彩魔方挑战"的完整过程。游戏旨在考验玩家的观察力和耐心,通过随机生成的颜色矩阵和一个变化点,玩家需在两幅画布中找出不同的颜色点。文章详细讲解了游戏的核心功能,包括随机颜色矩阵生成、点的闪烁提示、自定义配色方案等。此外,作者展示了使用Vue 3和TypeScript开发的代码实现,带领读者一步步深入了解游戏的逻辑与细节。
188 69
|
5月前
Threejs制作海面效果
这篇文章详细介绍了利用Three.js制作逼真海面效果的过程,包括设置Water材质、调整光照及实现波动动画的步骤。
115 0
Threejs制作海面效果
|
7月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
数据可视化 JavaScript
漏刻有时数据可视化Echarts组件开发(3):Echarts插件liquidfill实现水球图心形情人节动画表白
漏刻有时数据可视化Echarts组件开发(3):Echarts插件liquidfill实现水球图心形情人节动画表白
162 0
Threejs学习笔记-三
精灵例子和精灵贴图的简单使用
Threejs学习笔记-三
|
定位技术
从零开始手把手教你使用javascript+canvas开发一个塔防游戏05拖拽塔到地图上
从零开始手把手教你使用javascript+canvas开发一个塔防游戏05拖拽塔到地图上
195 0
|
前端开发 JavaScript iOS开发
8款超赞的最新jQuery插件工具
jQuery是迄今为止我最喜欢的Javascript框架,开发者用jQuery创造出惊人的视觉效果,以及处理数据,等等。 在这篇文章中,我给所有web开发人员推荐8款超赞的jQuery插件工具。 1.jQuery Mobile 由于iPhone和BlackBerry移动设备的普及,网络趋向于移动,jQuery Mobile是一个完整的框架,让您轻松地创建移动网站。
1171 0
|
JavaScript C# 前端开发
|
算法 JavaScript
如何用webgl(three.js)搭建一个3D库房-第一课
今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步、搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房”一下,找不到合适的全景,我们也只能窥一斑思全豹了,就它了,特此声明:此图片归原作者所有 非本人所拍,...
2922 0

热门文章

最新文章