threejs根据经纬度在3d地球上渲染圆点 学习笔记

threejs yekong

threejs完成3d地球渲染后,接下来在地球上根据经纬度进行标记,首先取个坐标比如北京经纬度116.404844,39.917813,然后利用js经纬度坐标转球面坐标方法转换坐标。
在球形地图北京渲染坐标点

演示实例

threejs 3d地球地图北京渲染坐标点

获取坐标

首先要将经纬度转为3d球形坐标

/**
 * 经纬度坐标转球面坐标  
 * @param {地球半径} R  
 * @param {经度(角度值)} longitude 
 * @param {维度(角度值)} latitude
 */
function lon2xyz(R,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,
  };
}
var R = 100;//地球半径
// 北京经纬度116.404844,39.917813
var pos = lon2xyz(R, 116.404844, 39.917813);//经纬度坐标转北京球面坐标

指定坐标渲染小球

// 创建小球
function createHelpSphereMesh(R,x,y,z) {
  var geometry = new THREE.SphereGeometry(R, 25, 25); //创建一个球体几何对象
  var material = new THREE.MeshLambertMaterial({
    color: 0xff0000
  }); //材质对象Material
  var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  mesh.position.set(x,y,z);
  return mesh
}
scene.add(createHelpSphereMesh(1, pos.x, pos.y, pos.z));

视频教程

如果你对上面的文字教程有不理解的地方,也可以查看视频教程,加微17331886870可以领取相关课程的优惠卷哟.
视频教程讲解如何在web上实现地球3D可视化,通过视频的学习最终可以实现如下实例效果地球3D可视化实例
学习本课程需要前端基础,如果了解three.js更好
视频课程每节课程都有对应的案例源码,要结合每节课提供的案例源码学习,不要仅仅看视频
地球Web3D可视化WebGL Three.js

喜欢