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

文章背景

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

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

最终呈现效果展示

实现方式

一、方案

1. 通过 Three.js 画出球体

2. 将准备好的地球纹理材质包导入并覆盖在球体上形成地球

3. 通过设置光源形成光暗变化

4. 通过旋转球体使其运动

5. 飞线实现

二、实现细则

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

var point = new THREE.PointLight(0xffffff);
      point.position.set(400, 200, 300);
      scene.add(point);

      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);

point为点光源，特点是从一点开始往不同方向发散且不产生阴影。一般用来作为主光源。ambient为散射光，即笼罩在环境的光，一般用来作为主色调。

详情可参考：初识ThreeJS中常见的光源

（https://zhuanlan.zhihu.com/p/25262894）

function animate() {
      requestAnimationFrame(animate);
      if (global) {
        global.rotation.y += 0.005;
      }

      renderer.render(scene, camera);
    }

//mock数据
function randomLine(lineNum) {
  const mockData = [];
  Array.from({ length: lineNum }, (v, k) => {
    mockData.push({
      line: [randomPos(), randomPos()],
    });
  });
  return mockData;
}

function randomPos() {
  return [Math.random() * 360 - 180, Math.random() * 180 - 90];
}

function createPosition(lnglat) {
      const spherical = new THREE.Spherical();
      spherical.radius = 60;
      const lng = lnglat[0];
      const lat = lnglat[1];
      const theta = (lng + 90) * (Math.PI / 180);
      const phi = (90 - lat) * (Math.PI / 180);
      spherical.phi = phi;
      spherical.theta = theta;
      const position = new THREE.Vector3();
      position.setFromSpherical(spherical);
      return position;
    }

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

这里使用的是二分法：

function getSplinePoints(positions) {
      const [start, end] = positions;
      const points = [];
      points[0] = new THREE.Vector3(start.x, start.y, start.z);

      points[8] = new THREE.Vector3(end.x, end.y, end.z);
      const getPoint = (point1, point2) => {
        const tempMiddle = new THREE.Vector3(
          0.5 * (point1.x + point2.x),
          0.5 * (point1.y + point2.y),
          0.5 * (point1.z + point2.z)
        );
        const tempMiddleLength = Math.sqrt(
          tempMiddle.x ** 2 + tempMiddle.y ** 2 + tempMiddle.z ** 2
        );
        const rate = (radius + 10) / tempMiddleLength;
        const middle = new THREE.Vector3(
          rate * tempMiddle.x,
          rate * tempMiddle.y,
          rate * tempMiddle.z
        );
        return middle;
      };

      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]);

      return points;
    }

const lineBallList = new THREE.Object3D();
      const lineCurve = new THREE.CatmullRomCurve3(
        getSplinePoints(positions),
        false
      );
      const lineGeometry = new THREE.BufferGeometry();
      const points = lineCurve.getPoints(50);
      lineGeometry.setFromPoints(points);
      const matericalLine = new THREE.LineBasicMaterial({ color });
      const line = new THREE.Line(lineGeometry, matericalLine);

      for (let ballIndex = 0; ballIndex < 100; ballIndex += 1) {
        const ballGeomtry = new THREE.SphereGeometry(0.3);
        const materialBall = new THREE.MeshBasicMaterial({
          color,
          transparent: true,
          opacity: 1 - ballIndex / (100 + 10),
        });
        const lineBall = new THREE.Mesh(ballGeomtry, materialBall);
        lineBall.originOpacity = 1 - ballIndex / (100 + 10);
        lineBallList.add(lineBall);
      }

function animate() {
      requestAnimationFrame(animate);
      const lineBalls = globalLineBalls.children;
      lineBalls.forEach((balls) => {
        const ballCurve = balls.curve;
        const ballList = balls.children;
        const ballPos = balls.pos;
        if (ballPos < 1.2) {
          ballList.forEach((ball, index) => {
            const newPos =
              ballPos - index * 0.002 > 0 ? ballPos - index * 0.002 : 0;
            if (newPos >= 1) {
              ball.opacity = 0;
            } else {
              ball.opacity = ball.originOpacity;
              const ballPosition = 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);
    }

总结