当前位置：首页 > news >正文

【小沐杂货铺】基于Three.JS绘制卫星轨迹Satellite（GIS 、WebGL、vue、react，提供全部源代码）

news 来源：原创 2025/7/30 16:15:58

	🍺三维数字地球系列相关文章如下🍺：
1	【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、glfw、glut）第一期
2	【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、glfw、glut）第二期
3	【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、glfw、glut）第三期
4	【小沐学GIS】基于C++绘制三维数字地球Earth（QT、OpenGL、GIS）第四期
5	【小沐学GIS】基于C++绘制三维数字地球Earth（QT、OpenGL、GIS、卫星）第五期
6	【小沐学GIS】基于C++OpenSceneGraph(OSG)绘制三维数字地球Earth（7:OpenGL）
7	【小沐学GIS】基于C++绘制太阳系SolarSystem（9:OpenGL、glfw、glut）
8	【小沐学GIS】基于C#绘制三维数字地球Earth（10:OpenGL）
9	【小沐学GIS】基于Python绘制三维数字地球Earth（11:OpenGL）
10	【小沐学GIS】基于Android绘制三维数字地球Earth（12:OpenGL）
11	【小沐学GIS】基于WebGL绘制三维数字地球Earth（13:OpenGL）
12	【小沐杂货铺】基于Three.JS绘制三维数字地球Earth（GIS 、three.js、WebGL）
13	【小沐杂货铺】基于Three.JS绘制三维太阳系Solar System（GIS 、three.js、WebGL）
14	【小沐杂货铺】基于Three.JS绘制卫星模拟Satellite（GIS 、three.js、vue、react
15	【小沐杂货铺】基于Cesium.JS绘制卫星轨迹Satellite（GIS 、Cesium、vue、react）

文章目录

1、简介
- 1.1 Three.JS
- 1.2 Satellite.JS
2、测试代码
- A3_1_ThreeJS_Satellite_js
- A3_2_ThreeJS_Satellite_js
- A3_3_ThreeJS_Satellite_js
结语

1、简介

1.1 Three.JS

https://threejs.org/
Three.js 是一个基于 WebGL 的 JavaScript 3D 图形库，能够简化浏览器中复杂 3D 场景和动画的开发。它通过封装 WebGL 的底层复杂性，提供了直观的 API，支持几何体创建、材质与贴图、光照与阴影、动画控制等功能，适用于游戏开发、产品展示、教育培训、虚拟现实等多个领域。

npm install three

<!DOCTYPE html>
<html>
<head><title>Three.js 立方体旋转示例</title><style> body { margin: 0; } </style>
</head>
<body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script>// 初始化场景、相机、渲染器const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 创建立方体const geometry = new THREE.BoxGeometry(2, 2, 2);const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);// 调整相机位置camera.position.z = 5;// 动画循环function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}animate();// 窗口大小自适应window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);});</script>
</body>
</html>

1.2 Satellite.JS

Satellite.js 是一个专注于卫星轨道计算的 JavaScript 工具库，基于 SGP4/SDP4 模型实现卫星位置与速度的预测。它通过解析 TLE（两行轨道根数）数据，支持低地球轨道（LEO）和中地球轨道（MEO）卫星的实时跟踪与轨迹模拟，常用于航天工程、天文观测及地理可视化应用。

npm install satellite.js

<!DOCTYPE html>
<html>
<head><title>Satellite.js 卫星位置示例</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/satellite.js@4.0.0/dist/satellite.min.js"></script><script>// 定义卫星 TLE 数据（示例）const tleLine1 = '1 25544U 98067A   21294.56194444  .00000606  00000-0  18532-4 0  9996';const tleLine2 = '2 25544  51.6423 208.9163 0004018 152.5268 247.6898 15.48963555302849';// 解析 TLE 数据const satrec = satellite.twoline2satrec(tleLine1, tleLine2);const date = new Date(); // 当前时间// 计算卫星位置const positionAndVelocity = satellite.propagate(satrec, date);const gmst = satellite.gstime(date);const positionGeodetic = satellite.eciToGeodetic(positionAndVelocity.position, gmst);// 转换为经纬度（角度）const longitude = satellite.degreesLong(positionGeodetic.longitude);const latitude = satellite.degreesLat(positionGeodetic.latitude);const altitude = positionGeodetic.height;// 输出结果console.log('卫星当前位置：', {longitude: longitude.toFixed(4) + '°',latitude: latitude.toFixed(4) + '°',altitude: altitude.toFixed(2) + ' km'});</script>
</body>
</html>

2、测试代码

A3_1_ThreeJS_Satellite_js

在这里插入图片描述

A3_2_ThreeJS_Satellite_js

在这里插入图片描述

A3_3_ThreeJS_Satellite_js

在这里插入图片描述

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位大佬童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！

文章目录

1、简介

1.1 Three.JS

1.2 Satellite.JS

2、测试代码

A3_1_ThreeJS_Satellite_js

A3_2_ThreeJS_Satellite_js

A3_3_ThreeJS_Satellite_js

结语

相关文章：