記錄--可視化(hua)大屏-用threejs擼一個3d中(zhong)國地圖
這里給(gei)大家分享我在網上(shang)總結出來(lai)的一些知識(shi)，希望對大家有所幫助
不想看繁瑣步驟的，可以直接去github下載，如果可以順便來個star哈哈
本項目使用vue-cli創建，但不影響使用，主要繪制都已封裝成類
1、使用geoJson繪制3d地圖
1.1 創建場景相關
// 創建webGL渲染器
this.renderer = new THREE.WebGLRenderer( { antialias: true,alpha: true} );
this.renderer.shadowMap.enabled = true; // 開啟陰影
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
this.renderer.toneMappingExposure = 1.25;
// 根據自己的需要調整顏色模式
// this.renderer.outputEncoding = THREE.sRGBEncoding;
this.renderer.outputEncoding = THREE.sHSVEncoding;
this.renderer.setPixelRatio( window.devicePixelRatio );
// 清除背景色，透明背景
this.renderer.setClearColor(0xffffff, 0);
this.renderer.setSize(this.width, this.height);
// 場景
this.scene = new THREE.Scene();
this.scene.background = null
// 相機 透視相機
this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.1, 5000);
this.camera.position.set(0, -40, 70);
this.camera.lookAt(0, 0, 0);
1.2 根據json繪制地圖
利用THREE.Shape繪制地圖的平面邊數據，再用THREE.ExtrudeGeometry將一個面拉高成3d模型，3d餅圖同理也可以這么制作
let jsonData = require('./json/china.json')
this.initMap(jsonData);
// initMap 方法主要部分
initMap(chinaJson) {
/* ...省略
...
*/
chinaJson.features.forEach((elem, index) => {
// 定一個省份3D對象
const province = new THREE.Object3D();
// 每個的 坐標 數組
const { coordinates } = elem.geometry;
const color = COLOR_ARR[index % COLOR_ARR.length]
// 循環坐標數組
coordinates.forEach(multiPolygon => {
multiPolygon.forEach((polygon) => {
const shape = new THREE.Shape();
for (let i = 0; i < polygon.length; i++) {
let [x, y] = projection(polygon[i]);
if (i === 0) {
shape.moveTo(x, -y);
}
shape.lineTo(x, -y);
}
const extrudeSettings = {
depth: 4,
bevelEnabled: true,
bevelSegments: 1,
bevelThickness: 0.2
};
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
// 平面部分材質
const material = new THREE.MeshStandardMaterial( {
metalness: 1,
color: color,
} );
// 拉高部分材質
const material1 = new THREE.MeshStandardMaterial( {
metalness: 1,
roughness: 1,
color: color,
} );
const mesh = new THREE.Mesh(geometry, [
material,
material1
]);
// 設置高度將省區分開來
if (index % 2 === 0) {
mesh.scale.set(1, 1, 1.2);
}
// 給mesh開啟陰影
mesh.castShadow = true
mesh.receiveShadow = true
mesh._color = color
province.add(mesh);
})
})
_this.map.add(province);
})
}
geoJson的坐標需要進行墨卡托投影轉換才能轉換成平面坐標，這里需要用到d3
// 墨卡托投影轉換 const projection = d3.geoMercator().center([104.0, 37.5]).scale(80).translate([0, 0]);
2、增加光照
我們把各種光都打上，環境光，半球光，點光，平行光。以平行光為例，增加投影，調整投影分辨率，避免投影出現馬賽克
const light = new THREE.DirectionalLight( 0xffffff, 0.5 ); light.position.set( 20, -50, 20 ); light.castShadow = true; light.shadow.mapSize.width = 1024; light.shadow.mapSize.height = 1024; this.scene.add(light);
castShadow = true表示開啟投影
3、增加陰影模糊
默認的陰影沒有模糊效果，看起來像白熾燈照射的樣子，沒有柔和感。使用官方示例中的csm來增加陰影模糊
import { CSM } from 'three/examples/jsm/csm/CSM.js';
this.csm = new CSM( {
maxFar: params.far,
cascades: 4,
mode: params.mode,
parent: this.scene,
shadowMapSize: 1024,
lightDirection: new THREE.Vector3( params.lightX, params.lightY, params.lightZ ).normalize(),
camera: this.camera
} );
4、增加鼠標事件
在3d空間中，鼠標事件主要通過射線來獲取鼠標所在位置，可以想象成鼠標放出一道射線，照射到的第一個物體就是鼠標所在位置。此時用的threejs的Raycaster，通過Raycaster給對應的省份增加鼠標移入高亮效果和省份民懸浮展示效果
this.raycaster = new THREE.Raycaster(); // 傳入需要檢測的對象 group，group下的所有對象都會被檢測到，如果被射線照到，則intersects有值，表示鼠標當前在這些物體上 const intersects = this.raycaster.intersectObject( this.group, true ); // 代碼太多就不貼了，見 GitHub源碼
5、渲染
threejs的渲染一般調用原生的requestAnimationFrame，主要做的事就是調用renderer的render方法，當然因為我們做了陰影模糊處理，所以還有別的需要做的：
this.camera.updateMatrixWorld(); this.csm.update(); this.renderer.render(this.scene, this.camera);
6、動畫效果
地圖上如果有一些動畫效果，可以使用TWEEN.js，，比如地圖標注的出現動畫：
最后再奉上
本文轉載于：
//juejin.cn/post/7057808453263163422
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
