最前端｜注意看！我用代码写了一个会动的3D地球

叁歲伎倆 2023-10-15 21:46 8阅读 0赞

### **一、文章背景** ###

在我们负责的某个项目中有一个需求，其展馆的可视化大屏首屏需要 3D 地球作为载体，来展示各国贸易额的信息，因此催生了 3D 地球的需求。需求的侧重点更多在于美观，动态方面，对于数据展示层面的需求反而并不多。

基于这个3D地球的实现有了这篇文章。

![动图封面][cfbf2c4b114191813ab0eb96f777bcfa.jpeg]

最终呈现效果展示

### **二、实现方式** ###

#### **（一）方案** ####

1.  通过 Three.js 画出球体
2.  将准备好的地球纹理材质包导入并覆盖在球体上形成地球
3.  通过设置光源形成光暗变化
4.  通过旋转球体使其运动
5.  飞线实现

#### **（二）实现细则** ####

**//Step 1 创建地球**

vargeometry = newTHREE.SphereGeometry(radius,radius,radius); // 创建球体模型
    varloader = newTHREE.TextureLoader(); // 创建资源加载器
    loader.load('./map.png', function(texture){ // 加载地球材质图片 参数为回调函数
    varmaterial = newTHREE.MeshLambertMaterial( { map: texture } ); // 创建面材质并加入到屏中
    global= newTHREE.Mesh(geometry, material)
    scene.add( global)
    })

**//Step 2 设置光源**

varpoint = newTHREE.PointLight(0xffffff);
    point.position.set(400, 200, 300);
    scene.add(point);
    
    varambient = newTHREE.AmbientLight(0x444444);
    scene.add(ambient);

point为点光源，特点是从一点开始往不同方向发散且不产生阴影。一般用来作为主光源。ambient为散射光，即笼罩在环境的光，一般用来作为主色调。详情可参考：[初识ThreeJS中常见的光源][ThreeJS]

**//Step 3 动画实现**

functionanimate(){
    requestAnimationFrame(animate);
    if(global) {
    global.rotation.y += 0.005;
    }
    
    renderer.render(scene, camera);
    }

通过不断的增加球体的 y 轴使其不停的逆时针旋转

**//Step 4 飞线实现**

飞线的实现较为复杂，且方案较多，本文提供的方案并不一定是最优解，仅作为一种思路参考

**1、数据准备**

//mock数据
    functionrandomLine(lineNum) {
    constmockData = [];
    Array.from({ length: lineNum }, (v, k) =>{
    mockData.push({
    line: [randomPos(), randomPos()],
    });
    });
    returnmockData;
    }
    
    functionrandomPos() {
    return[Math.random() * 360- 180, Math.random() * 180- 90];
    }

randomPos 可以随机生成球体上的经纬度点，两点则生成一条线的基本轨迹。

functioncreatePosition(lnglat) {
    constspherical = newTHREE.Spherical();
    spherical.radius = 60;
    constlng = lnglat[0];
    constlat = lnglat[1];
    consttheta = (lng + 90) * (Math.PI / 180);
    constphi = (90- lat) * (Math.PI / 180);
    spherical.phi = phi;
    spherical.theta = theta;
    constposition = newTHREE.Vector3();
    position.setFromSpherical(spherical);
    returnposition;
    }

此方法将经纬度转换为屏幕中的空间坐标，实现方式是通过 Three.js 提供的*setFromSpherical*方法，提供球体半径以及经纬度则可以计算出空间坐标。

**2、弧线计算**

对于一条线来分析，我们得到了线的起点跟终点的坐标还不够。我们需要得到的是从起点到终点的绕着地球表面的弧线。要保证不与地球相交穿模且弧线优美。弧线的生成方法是通过 Three.js 提供的*CatmullRomCurve3*这个生成曲线来实现的，参数是多个表示顶点坐标的 Vector3 对象组成的数组 Array，我们至少要提供 8 个顶点坐标才能保证线条走向与我们的期待值一致。

这里使用的是二分法：

functiongetSplinePoints(positions) {
    const[start, end] = positions;
    constpoints = [];
    points[0] = newTHREE.Vector3(start.x, start.y, start.z);
    
    points[8] = newTHREE.Vector3(end.x, end.y, end.z);
    constgetPoint = (point1, point2) =>{
    consttempMiddle = newTHREE.Vector3(
    0.5* (point1.x + point2.x),
    0.5* (point1.y + point2.y),
    0.5* (point1.z + point2.z)
    );
    consttempMiddleLength = Math.sqrt(
    tempMiddle.x ** 2+ tempMiddle.y ** 2+ tempMiddle.z ** 2
    );
    constrate = (radius + 10) / tempMiddleLength;
    constmiddle = newTHREE.Vector3(
    rate * tempMiddle.x,
    rate * tempMiddle.y,
    rate * tempMiddle.z
    );
    returnmiddle;
    };
    
    points[4] = getPoint(points[0], points[8]);
    points[2] = getPoint(points[0], points[4]);
    points[1] = getPoint(points[0], points[2]);
    points[3] = getPoint(points[2], points[4]);
    points[6] = getPoint(points[4], points[8]);
    points[5] = getPoint(points[4], points[6]);
    points[7] = getPoint(points[6], points[8]);
    
    returnpoints;
    }

点的计算方式是先计算出两点的中点位置，再通过勾股定理计算出球体中心点到中点的斜边长，然后通过球体半径再加上我们设置的飞线距离球体的高度等比延伸计算出我们需要的位置。通过传入的起点和终点先确定第 4 个点的位置，然后通过起点和第四个点确定第二个点位置，依此类推，计算出 8 个点的坐标。然后调用*CatmullRomCurve3*即可得到弧线。

**3、弧线生成**

constlineBallList = newTHREE.Object3D();
    constlineCurve = newTHREE.CatmullRomCurve3(
    getSplinePoints(positions),
    false
    );
    constlineGeometry = newTHREE.BufferGeometry();
    constpoints = lineCurve.getPoints(50);
    lineGeometry.setFromPoints(points);
    constmatericalLine = newTHREE.LineBasicMaterial({ color });
    constline = newTHREE.Line(lineGeometry, matericalLine);
    
    for(letballIndex = 0; ballIndex < 100; ballIndex += 1) {
    constballGeomtry = newTHREE.SphereGeometry(0.3);
    constmaterialBall = newTHREE.MeshBasicMaterial({
    color,
    transparent: true,
    opacity: 1- ballIndex / (100+ 10),
    });
    constlineBall = newTHREE.Mesh(ballGeomtry, materialBall);
    lineBall.originOpacity = 1- ballIndex / (100+ 10);
    lineBallList.add(lineBall);
    }

*lineCurve.getPoints(50)*这个方法指定了一条弧线上具体生成多少个点，此方法会返回生成的点集。50 这个数字是需要通过具体需求调试的，对性能以及效果的影响很大。代码中的 color 是一个变量，这样可以实现不同线条颜色不同。最后我们通过循环点，给每一个点加上透明度渐变的材质包，就得到了一段慢慢变淡的拖着长尾巴的彗星状弧线。

**4、动起来**

functionanimate(){
    requestAnimationFrame(animate);
    constlineBalls = globalLineBalls.children;
    lineBalls.forEach((balls) => {
    constballCurve = balls.curve;
    constballList = balls.children;
    constballPos = balls.pos;
    if(ballPos < 1.2) {
    ballList.forEach((ball, index) => {
    constnewPos =
    ballPos - index * 0.002> 0? ballPos - index * 0.002: 0;
    if(newPos >= 1) {
    ball.opacity = 0;
    } else{
    ball.opacity = ball.originOpacity;
    constballPosition = ballCurve.getPointAt(newPos);
    ball.position.x = ballPosition.x;
    ball.position.y = ballPosition.y;
    ball.position.z = ballPosition.z;
    }
    ball.neepsUpdate = true;
    });
    balls.pos = ballPos + 0.008;
    } else{
    balls.pos = 0;
    }
    });
    renderer.render(scene, camera);
    }

这里的思路是设置了隐性的参数值pos,通过维护pos的数值大小来决定展示哪些点。

### **三、总结** ###

通过上述案例，相信大家已经对数据可视化的思路和实现方式有了初步的了解。然而，实际的实现过程往往是复杂的，因为数据可视化涉及到许多数学问题。在解决这些问题时，我们可以尝试先建立模型，建立坐标系来分析具体问题，从而找到解决方案。数据可视化是一个既有挑战性又有创造性的领域，希望通过不断学习和实践，我们能够更好地应对和解决数据可视化中的难题。

***版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。***  
***公众号搜索神州数码云基地，了解更多技术干货。***

[cfbf2c4b114191813ab0eb96f777bcfa.jpeg]: https://img-blog.csdnimg.cn/img_convert/cfbf2c4b114191813ab0eb96f777bcfa.jpeg
[ThreeJS]: https://zhuanlan.zhihu.com/p/25262894