threejs创建3D炫酷地图(地图流光，飞线，水印动画，高光)

1. 下载地图的json，这里我们可以在阿里云数据平台上进行下载

2.在代码中解析下载的json

const fileloader = new THREE.FileLoader();

fileloader.load('/china.json',(res)=>{

res=JSON.parse(res)

createMap(res)

})

3.得到的坐标点是经纬度，所以我们要把它转为二维坐标，这里使用插件d3

const projection = d3

.geoMercator() //地图投影方式(用于绘制球形墨卡托投影)

.center([108.5525, 34.3227]) //地图中心点经纬度坐标

.scale(84) //缩放

.translate([0, 0]); //移动地图位置

4.生成地图

let chinaObj = new THREE.Object3D();

const edgeMaterial = new THREE.LineBasicMaterial({

color: 0xffffff,

blending: THREE.AdditiveBlending,

});

const extrudeMats = [

new THREE.MeshStandardMaterial({

color: new THREE.Color(0x0000ff),

transparent: true,

opacity: 0.85,

blending: THREE.AdditiveBlending,

}),

new THREE.MeshStandardMaterial({

color: new THREE.Color(0x0000ff),

transparent: true,

opacity: 0.35,

blending: THREE.AdditiveBlending,

}),

];

function createMap(res) {

res = JSON.parse(res);

res.features.forEach((province) => {

//省市的物体

let provinceObj = new THREE.Object3D();

if (province.geometry.type == "Polygon") {

province.geometry.coordinates.forEach((polygon) => {

let shape = new THREE.Shape();

let arr = [];

for (let i = 0; i < polygon.length; i++) {

let [x, y] = projection(polygon[i]);

if (i == 0) {

shape.moveTo(x, -y);

} else {

shape.lineTo(x, -y);

}

arr.push(x, -y, 1);

}

let mesh = createPolygon(shape, arr，province);

provinceObj.add(mesh);

});

} else if (province.geometry.type == "MultiPolygon") {

province.geometry.coordinates.forEach((multipolygon) => {

multipolygon.forEach((polygon) => {

let shape = new THREE.Shape();

let arr = [];

for (let i = 0; i < polygon.length; i++) {

let [x, y] = projection(polygon[i]);

if (i == 0) {

shape.moveTo(x, -y);

} else {

shape.lineTo(x, -y);

}

arr.push(x, -y, 1);

}

let mesh = createPolygon(shape, , arr，province);

provinceObj.add(mesh);

});

});

}

chinaObj.add(provinceObj);

});

base.scene.add(chinaObj);

}

5.创建多边形

function createPolygon(shape, , arr，province) {

let geo = new THREE.ExtrudeGeometry(shape);

let mesh = new THREE.Mesh(geo, extrudeMats);

if (province.properties.name) mesh.name = province.properties.name;

//画线

let buffer = new THREE.BufferGeometry();

buffer.setAttribute(

"position",

new THREE.BufferAttribute(new Float32Array(arr), 3)

);

let line = new THREE.Line(buffer, edgeMaterial);

chinaObj.add(line);

return mesh;

}

腾讯课堂链接：https://ke.qq.com/course/6033012#term_id=106263170

CSDN视频链接：threejs炫酷地图（地图流光，飞线，水印动画，高光，波浪）