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

今天也要暴富

已于 2024-04-23 16:33:34 修改

阅读量1.8k

点赞数 4

文章标签： 3d

于 2022-08-24 15:17:13 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41051239/article/details/126464942

版权

本文介绍如何使用Threejs在3D地球模型上实现球面标注，包括静态圆点标注和平面网格波动光圈效果。通过调整平面网格的四元数使其与地球表面相切，并设置标注点的波动光圈动画，实现动态视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四、球面标注

1、静态圆点平面mash标注地点

创建矩形平面网格模型（PlaneGeometry），并设置贴图（使用TextureLoader加载器），然后设置该网格模型所在位置,并渲染出来。

function createPointMesh(R, lon, lat) {
   
  var geometry1 = new THREE.PlaneGeometry(1, 1);
  var textureLoader1 = new THREE.TextureLoader();
  var texture1 = textureLoader1.load(tagImg);
  var material1 = new THREE.MeshBasicMaterial({
   
    color: 0x22ffcc,
    map: texture1,
    transparent: true,
    opacity: 1.0,
    side: THREE.DoubleSide,
    depthWrite: false,
  });

  var mesh = new THREE.Mesh(geometry1, material1);
  var size1 = R * 0.05;//矩形平面Mesh的尺寸
  mesh.scale.set(size1, size1, size1);//设置mesh大小
  
  // 经纬度转球面坐标
  var coord = lon2xyz(R * 1.001, lon, lat)
  //设置mesh位置
  mesh.position.set(coord.x, coord.y, coord.z);
  return mesh;
}

标注的点与飞线段起始点一致，因此可在渲染飞线处，渲染球面标注

var flyArcGroup = new THREE.Group();
var flyArr = [];
Object.keys(data)

最低0.47元/天解锁文章