基于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地圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于微信小程序實現走馬燈效果的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要為大家詳細介紹了如何利用JavaScript實現京東秒殺倒計時效果，文中示例代碼介紹的非常詳細，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了使用eslint和githooks統一前端風格,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
JS清空上傳控件input(type="file")的值的代碼
最近做的一個小功能，需要清空<input type="file">的值，但上傳控件<input type="file">的值不能通過JavaScript來修改。2008-11-11
這篇文章主要為大家詳細介紹了Webpack簡單實現兩個自定義插件的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
這篇文章主要為大家詳細介紹了微信小程序實現時間預約基本功能，一個類似電商的時間預約功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
本文是對javascript中的垃圾收集機制與內存泄漏進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了JS運動特效之任意值添加運動的方法,結合實例形式分析了javascript針對多物體運動通過參數控制不同運動效果的實現方法,需要的朋友可以參考下2018-01-01
本文主要介紹了原生js實現計算購物車總金額的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
Javascript Function對象擴展之延時執(zhí)行函數
這篇文章主要介紹 在js里面怎么延時執(zhí)行一個函數?2010-07-07