使用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的角度即可实现所有元素随着地球转动。
如题,效果如图:
更多推荐
所有评论(0)