Threejs实现3d地球记录（2）

VIP文章今天也要攒钱

已于 2024-04-23 16:32:58 修改

阅读量1.9k

点赞数 9

文章标签： 3d javascript 开发语言

于 2022-08-09 18:08:10 首次发布

本文链接：https://blog.csdn.net/qq_41051239/article/details/126179246

版权

2、添加地球光圈

地球光圈图：

//地球光圈
function createSprite(R) {
   
  var textureLoader = new THREE.TextureLoader();
  var texture = textureLoader.load(spriteImg);//加载纹理贴图
  // 创建精灵材质对象SpriteMaterial
  var spriteMaterial = new THREE.SpriteMaterial({
   
    map: texture, //设置贴图
    transparent: true,//开启透明
    // opacity: 0.5,//通过透明度整体调节光圈
  });
  var sprite = new THREE.Sprite(spriteMaterial);
  sprite.scale.set(R * 3.0, R * 3.0, 1);//缩放精灵
  return sprite
}

function createEarth(R) {
   
  var earthGroup = new THREE.Group();//地球组对象
  earthGroup.add(createSphereMesh(R));//球体Mesh插入earthGroup中
  earthGroup.add(createSprite(R));//地球光圈
  });
  return earthGroup;
}

效果：
地球光圈

3、绘制国家边界线

（1）、经纬度转球面坐标

公式如下：
经纬度转球面坐标公式

function lon2xyz(R, longitude, latitude) {
    //longitude：经度角度值,latitude：纬度角度值
  var lon = longitude * Math.PI / 180;//转弧度值
  var lat = latitude * Math.PI / 180;
  lon = -lon;// three.js坐标系z坐标轴对应经度-90度，而不是90度

  // 经纬度坐标转球面坐标计算公式
  var x = R * Math.cos(lat) * Math.cos(lon);
  var y = R * Math.sin(lat);
  var z = R * Math.cos(lat) * Math.sin(lon);
  // 返回球面坐标
  return {
   
    x: x,
    y: y,
    z: z,
  };
}

（2）、边界线创建

通过BufferGeometry构建一个几何体并传入顶点数据，通过LineLoop模型渲染几何体，连点成线，但是设置线模型Line对应线材质LineBasicMaterial的线宽属性.lineWidth，是无效的。可使用拓展库Line2解决此问题。
在这里插入图片描述

// pointArr：边界坐标
function line(pointArr) {
   
  var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
  var vertices = new Float32Array(pointArr);//创建顶点数据
  //BufferAttribute这个类用于存储与BufferGeometry相关联的 attribute（例如顶点位置向量，面片索引，法向量，颜色值，UV坐标以及任何自定义 attribute ）。 利用 BufferAttribute，可以更高效的向GPU传递数据。
  var attribue = new THREE.BufferAttribute(vertices, 3); //表示一个顶点的xyz坐标
  geometry