使用three.js模拟地球效果

此地球效果参考于earth2050        在线地址
一、创建地球
        这里使用的是创建一个几何为SphereGeometry的网格mesh，再贴上地球经投影后的图片作为纹理。其中地心坐标为默认THREE.Vector3(0,0,0)。

const geometry = new THREE.SphereGeometry(radius, 66,44);
const material = new THREE.MeshBasicMaterial( { map: texture,side:THREE.DoubleSide,transparent:true,opacity:0.7,alphaTest:0.05} );           //透明和光照不共存
const earth = new THREE.Mesh( geometry, material );

二、经纬度转地球坐标
        地球中的位置都是和经纬度相关，而three中没有经纬度的改概念，因此我们需要创建一个转换，将经纬度转换为三维世界坐标，对应到地球上。

 function createPosition(lnglat) {
    let spherical = new THREE.Spherical;
    spherical.radius = radius;
    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;         //倾斜角
    let position = new THREE.Vector3();
    position.setFromSpherical(spherical);
    return position;
  }

  三、创建连接两个经纬度的弧线（正弦曲线）
          弧线归根结底是一条一条线段组成，这里需要计算整个弧线每个组成点的坐标，这里bottomPositions为所有底部坐标点数组，topPositions为顶部坐标点数组，resultPositions为经计算之后的弧线点坐标。

 let resultPositions = [];
  for(let i=0;i<length;i++){
    let times = Math.sin(i*Math.PI/(length-1));
    resultPositions.push(new THREE.Vector3(bottomPositions[i].x+(topPositions[i].x-bottomPositions[i].x)*times,bottomPositions[i].y+(topPositions[i].y-bottomPositions[i].y)*times,bottomPositions[i].z+(topPositions[i].z-bottomPositions[i].z)*times))
 }

  四、创建卫星
        先创建卫星的轨迹线，轨迹线为圆心为THREE.Vector(0,0,0)、半径为地球半径的1.5倍的CircleGeometry坐标的连线。
       卫星为一个PlaneGeometry几何的mesh，在轨迹线上更新位置点，并始终设置朝向圆心。

五、创建光柱
        光锥为两个交叉的平面，贴上纹理，原理虽然简单，但效果挺不错

六、地球自转
        在three.js中，元素matrix表示的是相对于父元素的矩阵转换，而元素的matrixWorld则表示的是相对于三维世界的矩阵转换，父元素的矩阵发生变化，会统一更新所有的子元素的matrixWorld。因此上面创建的要素我统一放到一个Group中，命名为earthGroup，每次更新earthGroup的角度即可实现所有元素随着地球转动。

如题，效果如图：