实现过程
实现步骤分解:
ThreeJS环境初始化
星空背景
添加带纹理的地球
世界地图轮廓边界绘制
地球光晕
添加地球云层
城市位置标注和涟漪效果
添加飞线B样条
地球自转和镜头缩放动画
接上篇从第七步骤说起...Math.sin(lon);
// 返回球面坐标
return {
x: x,
y: y,
z: z,
};
};
城市位置标注和涟漪效果
城市位置标注添加
这里城市位置是两个长方形几何体加到地球上...一个贴图是是涟漪底图可以更改颜色:
将拿到的经纬度数据转换成xyz坐标
将带有纹理的两个几何体添加到地球上
var cityGeometry = new PlaneBufferGeometry(1,..._s表示mesh在原始大小基础上放大倍数 光圈在原来mesh.size基础上1~2倍之间变化
cityWaveMesh.position.set(cityXyz.x, cityXyz.y,...mesh默认在XOY平面上,法线方向沿着z轴new THREE.Vector3(0, 0, 1)
var meshNormal = new Vector3(0, 0, 1);
// 四元数属性