基于Three.js實現(xiàn)酷炫3D地圖效果

更新時間：2022年10月20日 09:39:50 作者：接著奏樂接著舞。

這篇文章主要為大家詳細介紹了如何利用Three.js實現(xiàn)酷炫3D地圖的效果，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的小伙伴可以嘗試一下

實現(xiàn)效果

前言

本文主要說明使用threejs技巧，來定制適合項目需求的樣式，源碼將在本文最后附上gitee地址。

使用

1.修改整體的背景圖可以使用顏色或用貼圖改材質(zhì)

方法：

只需修改createChinaMap（）方法中的color屬性即可，注意一共要修改4個color，其中有兩個是地圖邊界線的顏色。也可以使用貼圖，

2. 取消地圖上柱狀圖顯示

create鉤子函數(shù)里注釋掉// this.createBar()即可

3.更換地圖、更換省份、市

更換很簡單，就是如圖位置修改引入的地圖文件即可，但是修改之后需要注意的是，地圖中心點改變了，比如現(xiàn)在將地圖展示由金華市改為臺州市，那么還需要修改@/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中引入的給地圖做材質(zhì)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中是所有方法的開關，在這里可以進行調(diào)試

 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實現(xiàn)酷炫3D地圖效果的文章就介紹到這了,更多相關Three.js 3D地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

顏色漸變效果
[藍色]顏色漸變效果...
2006-07-07
javascript刪除Table中的一行的腳本代碼
用js實現(xiàn)的刪除table中一行數(shù)據(jù)的代碼
2008-06-06
JavaScript判斷瀏覽器版本的方法
這篇文章主要介紹了JavaScript判斷瀏覽器版本的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
完美兼容各大瀏覽器獲取HTTP_REFERER方法總結
發(fā)現(xiàn)一個關于瀏覽器兼容的問題，當用JS 執(zhí)行代碼 window.location.href=”http://www.dhdzp.com” 來進行跳轉的時候，F(xiàn)irefox 可以獲取到到HTTP_REFERER頁面，但是在IE中這一項為空
2014-06-06
一文帶你快速理解JavaScript中call()函數(shù)的使用
這篇文章主要為大家詳細介紹了JavaScript中call()函數(shù)的使用的相關知識，文中的示例代碼講解詳細，具有一定的學習價值，需要的可以參考一下
2023-03-03
JavaScript獲取網(wǎng)頁表單提交方式的方法
這篇文章主要介紹了JavaScript獲取網(wǎng)頁表單提交方式的方法,可判斷表單提交方式是get還是post,具有一定參考借鑒價值,需要的朋友可以參考下
2015-04-04
詳解如何在微信小程序中愉快地使用sass
這篇文章主要介紹了詳解如何在微信小程序中愉快地使用sass，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
第九章之路徑分頁標簽與徽章組件
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹路徑分頁標簽與徽章組件，感興趣的朋友一起學習吧
2016-04-04
JavaScript實現(xiàn)隨機數(shù)生成器（去重）
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)隨機數(shù)生成器，生成不重復的隨機數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
JavaScript簡單實現(xiàn)網(wǎng)頁回到頂部功能
JavaScript簡單實現(xiàn)網(wǎng)頁回到頂部功能,大家可以參考一下
2013-11-11