three.js 地图、地球可视化飞线轨迹线

参考资料：threejs中文网

threejs qq交流群：814702116

样条、贝塞尔曲线应用

曲线API在大屏可视化中的应用:地图大屏可视化、地球大屏可视化

表示一个飞线曲线轨迹有多重方案，圆弧、椭圆弧、贝塞尔、样条…

比如你有一个项目，已知平面上两个点坐标(-100,-100)、(100,100)，需要生成一条飞线轨迹线，要求轨迹线把这两个点作为起始点,曲线有一定的高度。

三维样条曲线CatmullRomCurve3实现飞线轨迹

下面曲线的起始点设置在XOZ平面上，y方向为曲线高度方向。

// p1、p3轨迹线起始点坐标
const p1 = new THREE.Vector3(-100, 0, -100);
const p3 = new THREE.Vector3(100, 0, 100);
// 计算p1和p3的中点坐标
const x2 = (p1.x + p3.x)/2;
const z2 = (p1.z + p3.z)/2;
const h = 50;
const p2 = new THREE.Vector3(x2, h, z2);

const arr = [p1, p2, p3];
// 三维样条曲线
const curve = new THREE.CatmullRomCurve3(arr);

三维二次贝赛尔曲线QuadraticBezierCurve3实现飞线轨迹

下面曲线的起始点设置在XOZ平面上，y方向为曲线高度方向。

// p1、p3轨迹线起始点坐标
const p1 = new THREE.Vector3(-100, 0, -100);
const p3 = new THREE.Vector3(100, 0, 100);
// 计算p1和p3的中点坐标
const x2 = (p1.x + p3.x)/2;
const z2 = (p1.z + p3.z)/2;
const h = 100;
const p2 = new THREE.Vector3(x2, h, z2);
// 三维二次贝赛尔曲线
const curve = new THREE.QuadraticBezierCurve3(p1, p2, p3);