基于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.關(guān)閉一些特效
create中是所有方法的開關(guān)，在這里可以進行調(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注冊下即可
到此這篇關(guān)于基于Three.js實現(xiàn)酷炫3D地圖效果的文章就介紹到這了,更多相關(guān)Three.js 3D地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在數(shù)學(xué)和計算機科學(xué)中,柯里化是一種將使用多個參數(shù)的一個函數(shù)轉(zhuǎn)換成一系列使用一個參數(shù)的函數(shù)的技術(shù),下面這篇文章主要給大家介紹了JS中函數(shù)科里化的背景與應(yīng)用實例的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了詳解微信小程序?qū)徍瞬煌ㄟ^的解決方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了通過js實現(xiàn)的，當(dāng)鼠標移到圖片上變大顯示而不是放大鏡效果,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)橫屏和豎屏簽名功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
今天小編就為大家分享一篇layui動態(tài)加載多表頭的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù).這篇文章通過實例代碼給大家介紹了javascript閉包的使用之按鈕切換功能，感興趣的朋友一起看看吧2018-08-08
這篇文章主要幫助大家理解javascript中的with關(guān)鍵字，學(xué)習(xí)with關(guān)鍵字的作用，感興趣的小伙伴們可以參考一下2016-02-02
iframe中子父類窗口調(diào)用JS的方法及注意事項
本文給大家介紹iframe中子父類窗口調(diào)用JS的方法及注意事項，介紹的超詳細，需要的朋友快來學(xué)習(xí)下2015-08-08
js利用FileReader實現(xiàn)圖片轉(zhuǎn)base64格式并上傳預(yù)覽頭像
本文主要介紹了js利用FileReader實現(xiàn)圖片轉(zhuǎn)base64格式并上傳預(yù)覽頭像，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
今天，測試報過來一個js bug, 在IE8下有個js錯誤，但是在其它瀏覽器下(Firefox, Chrome, IE9)下面都很正常。后來調(diào)試發(fā)現(xiàn)原因是在IE8下，js數(shù)組沒有indexOf方法。2013-04-04