基于threejs实现中国地图轮廓动画，简单聊聊2024年前端开发的现状和思考

• @param polygon 多边形 点数组

• @param color 材质颜色

• */

function lineDraw(polygon:any, color:ColorRepresentation) {

const lineGeometry = new BufferGeometry();

const pointsArray = new Array();

polygon.forEach((row:any) => {

const projectionRow = projection(row);

if (!projectionRow) {

return

}

let x = projectionRow[0]

let y = projectionRow[1]

// 创建三维点

pointsArray.push(new Vector3(x, -y, 0));

linePinots.push([x, -y, 0]);

});

// 放入多个点

lineGeometry.setFromPoints(pointsArray);

const lineMaterial = new LineBasicMaterial({

color: color,

});

return new Line(lineGeometry, lineMaterial);

}

export { countryLine };

全部代码： demo

遇到问题

---

---

geojson 版本我们需要将提供的经纬度坐标点转场成平面，各平台算法不同，投影失真情况不同，所以一些情况地图会失真无法重合。

我们刚才使用卡墨托投影转换，也会失真并且和echarts 地图轮廓对不上，所以想起其他方案。

我们利用svg路径来取点，UI提供的svg地图轮廓肯定是一致的。

SVG版本

---

---

设计思路：

1. 加载svg 取所有的点

2. 根绝点来创建threejs 亮光点

3. 移动动画

核心代码：

import * as THREE from ‘three’;

import { initRender } from ‘./render’;

import { initScene } from ‘./scene’;

import { initCamera } from ‘./camera’;

// import { countryLine } from “./countryPolygon”;

import { SVGLoader } from ‘three/examples/jsm/loaders/SVGLoader.js’;

export interface OutLineConfig {

outline: boolean;

outlineColor?: THREE.ColorRepresentation;

tintColor: THREE.ColorRepresentation;

speed: number;

tintLength?: number;