基于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.修改相機的視角,頁面展示的遠(yuǎn)近角度
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)文章
JavaScript仿京東實現(xiàn)秒殺倒計時案例詳解
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實現(xiàn)京東秒殺倒計時效果,文中示例代碼介紹的非常詳細(xì),感興趣的小伙伴們可以參考一下2022-03-03使用eslint和githooks統(tǒng)一前端風(fēng)格的技巧
這篇文章主要介紹了使用eslint和githooks統(tǒng)一前端風(fēng)格,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07JS清空上傳控件input(type="file")的值的代碼
最近做的一個小功能,需要清空<input type="file">的值,但上傳控件<input type="file">的值不能通過JavaScript來修改。2008-11-11javascript垃圾收集機制與內(nèi)存泄漏詳細(xì)解析
本文是對javascript中的垃圾收集機制與內(nèi)存泄漏進行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11Javascript Function對象擴展之延時執(zhí)行函數(shù)
這篇文章主要介紹 在js里面怎么延時執(zhí)行一個函數(shù)?2010-07-07