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,源码和模型


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

目录
相关文章
Threejs实现模拟河流,水面水流,水管水流,海面
Threejs实现模拟河流,水面水流,水管水流,海面
2476 0
Threejs实现模拟河流,水面水流,水管水流,海面
Threejs实现天空盒,全景场景,地面草地
Threejs实现天空盒,全景场景,地面草地
1293 0
Threejs实现天空盒,全景场景,地面草地
|
算法 定位技术
Threejs中使用A*算法寻路导航,Threejs室内室外地图导航
Threejs中使用A*算法寻路导航,Threejs室内室外地图导航
1184 0
|
3月前
ThreeJs制作全息投影视频
这篇文章介绍了使用Three.js来创建全息投影效果的视频教程,涵盖了实现全息效果的技术要点和具体实施步骤。
64 2
ThreeJs制作全息投影视频
|
3月前
Threejs用切线实现模型沿着轨道行驶
这篇文章详细介绍了如何使用Three.js让一个模型沿着预定的曲线路径移动,并保持模型的方向始终沿着路径的切线方向,提供了实现这一效果的具体代码和步骤。
136 1
Threejs用切线实现模型沿着轨道行驶
|
3月前
Threejs用下个点方法实现模型沿着轨道行驶
这篇文章讲解了如何在Three.js中通过计算下一个路径点来控制模型沿轨迹行驶的方向,使用`lookAt`方法使模型面向行驶方向,实现了更加自然的移动效果。
73 1
|
5月前
|
API
【threejs教程】让你的场景更加真实:灯光对物体的影响
【8月更文挑战第6天】threejs教程:让你的场景更加真实,灯光对物体的影响
259 6
|
8月前
【智慧地球】图新地球 | 如何将图新地球多要素KML进行分离输出
【智慧地球】图新地球 | 如何将图新地球多要素KML进行分离输出
124 0
Three.js模拟沿着路径进行运动,模拟飞机飞行,并保持运动方向
Three.js模拟沿着路径进行运动,模拟飞机飞行,并保持运动方向
1228 0
|
传感器 算法 机器人
【通过粒子滤波进行地形辅助导航】用于地形辅助导航的粒子滤波器和 PCRB研究(Matlab代码实现)
【通过粒子滤波进行地形辅助导航】用于地形辅助导航的粒子滤波器和 PCRB研究(Matlab代码实现)
154 0

热门文章

最新文章