亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2022年10月20日 09:39:50   作者：接著奏樂接著舞。  
這篇文章主要為大家詳細(xì)介紹了如何利用Three.js實(shí)現(xiàn)酷炫3D地圖的效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的小伙伴可以嘗試一下

實(shí)現(xiàn)效果

前言

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

使用

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

方法：

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

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

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

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

更換很簡(jiǎn)單，就是如圖位置修改引入的地圖文件即可，但是修改之后需要注意的是，地圖中心點(diǎn)改變了，比如現(xiàn)在將地圖展示由金華市改為臺(tái)州市，那么還需要修改@/comfig文件下的配置，如下圖所示：

修改之后的效果如下：

4.修改相機(jī)的視角，頁面展示的遠(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,
      })

如果你想引入貼圖，這樣會(huì)更好看，可以使用以下方法：

// 在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)，在這里可以進(jì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版本中使用

頁面適配建議給這個(gè)地圖使用絕對(duì)定位，樣式代碼可參考以下：

 width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

在vue2中使用：

npm 下載這個(gè)插件：@vue/composition-api

然后main.js注冊(cè)下即可

到此這篇關(guān)于基于Three.js實(shí)現(xiàn)酷炫3D地圖效果的文章就介紹到這了,更多相關(guān)Three.js 3D地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論