Threejs实现宇宙中地球动态展示和卫星绕地运动

简介: Threejs实现宇宙中地球动态展示和卫星绕地运动

1,介绍


该示例使用的是 r95版本Three.js库。

主要实现功能:宇宙星空背景,流星星星闪烁,地球自转,卫星绕地运动。

实际效果还是很丝滑的,GIF效果图如下:



2,主要说明


1,宇宙背景利是用背景图片+粒子效果zai。

2,流星是使用一张透明图片,随机一个位置进行固定方向移动。

3,地球是用SphereGeometry创建球几何体并进行贴图,案例地球中设置了多层贴图,这样地球会表现比较立体。

4,轨道是用RingGeometry创建一个圆环并设置显示角度。

5,卫星是用精灵对象创建一个精灵并进行贴图,精灵是一个总是面朝着摄像机的平面,所以用一个透明的卫星图片即可,然后这只绕Y轴进行运动。


/**
 * 星星粒子
 */
function stars() {
  var starsGeometry = new THREE.Geometry();
  for (var i = 0; i < 3000; i++) {
    var starVector = new THREE.Vector3(
      THREE.Math.randFloatSpread(4000),
      THREE.Math.randFloatSpread(3000),
      THREE.Math.randFloatSpread(4000)
    );
    starsGeometry.vertices.push(starVector);
    starsGeometry.name = "starsGeometry" + i;
  }
  var starsMaterial = new THREE.PointsMaterial({
    color: 0x888888,
    sizeAttenuation: false
  })
  var starsPoint = new THREE.Points(starsGeometry, starsMaterial);
  starsPoint.name = "starsPoint";
  group.add(starsPoint);
}
/**
 * 返回行星轨道的组合体
 * @param starLiteSize 行星的大小
 * @param starLiteRadius 行星的旋转半径
 * @param rotation 行星组合体的x,y,z三个方向的旋转角度
 * @param speed 行星运动速度
 * @param imgUrl 行星的贴图
 * @param scene 场景
 * @returns {{satellite: THREE.Mesh, speed: *}} 卫星组合对象;速度
 */
var initSatellite = function(starLiteSize, starLiteRadius, rotation, speed, imgUrl, scene) {
  var track = new THREE.Mesh(new THREE.RingGeometry(starLiteRadius, starLiteRadius + 0.3, 200, 1),
    new THREE
    .MeshBasicMaterial());
  var centerMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE
    .MeshLambertMaterial()); //材质设定
  var starLite = new THREE.Sprite(new THREE.SpriteMaterial({
    map: THREE.ImageUtils.loadTexture(imgUrl)
  }));
  starLite.scale.x = starLite.scale.y = starLite.scale.z = starLiteSize;
  starLite.position.set(starLiteRadius, 0, 0);
  var pivotPoint = new THREE.Object3D();
  pivotPoint.add(starLite);
  pivotPoint.add(track);
  centerMesh.add(pivotPoint);
  centerMesh.rotation.set(-Math.PI * 0.45, Math.PI * 0.1, 0);
  scene.add(centerMesh);
  return {
    starLite: centerMesh,
    speed: speed
  };
}
// 地球卫星
starLites.push(initSatellite(10, 150, {
  x: 0,
  y: 0,
  z: 0
}, 0.01, 'assets/earth/satellite.png', scene));

3,源码和模型


需要学习案例、素材、模型或者其他源码,请进入博客首页查看其他文章或者留言

目录
相关文章
|
JavaScript 前端开发 索引
用Three.js搞个炫酷3D地球
地球人怎么可以不会画地球!从canvas画地球贴图开始,用Three.js手把手教你实现一个炫酷的3D地球!
用Three.js搞个炫酷3D地球
Vue3炫酷可旋转的3D地球
Vue3炫酷可旋转的3D地球
1217 0
|
定位技术
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
2878 0
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
|
前端开发
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
2937 0
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
Threejs实现天空盒,全景场景,地面草地
Threejs实现天空盒,全景场景,地面草地
2393 0
Threejs实现天空盒,全景场景,地面草地
|
7月前
|
人工智能 JSON BI
DeepSeek V4 来了!超越 Claude Sonnet 4.5,赶紧对接 Claude Code 体验一把
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro 的真实体验与避坑记录 本文记录我将 Claude Code 对接 DeepSeek 最新模型(V4Pro)后的真实体验,测试了 Skills 自动化查询和积木报表 AI 建表两个场景——有惊喜,也踩
11215 21
|
数据采集 数据可视化
国内77个城市建筑物轮廓(带高度)数据分享(附百度网盘)
国内77个城市建筑物轮廓(带高度)数据分享(附百度网盘)
3476 1
|
数据可视化 定位技术
【threejs】可视化大屏酷炫3D地图附源码
【threejs】可视化大屏酷炫3D地图附源码
13725 131
【threejs】可视化大屏酷炫3D地图附源码