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实现天空盒,全景场景,地面草地
1214 0
Threejs实现天空盒,全景场景,地面草地
|
1月前
|
安全 vr&ar
全息投影技术:三维影像的现实应用
【10月更文挑战第14天】全息投影技术以其独特的魅力和广泛的应用前景,正在逐步改变我们的生活和工作方式。通过深入了解其原理和应用,我们可以更好地利用这一技术,为各个领域的发展注入新的活力。让我们期待全息投影技术在未来带来的更多惊喜和变革。
|
1月前
ThreeJs制作全息投影视频
这篇文章介绍了使用Three.js来创建全息投影效果的视频教程,涵盖了实现全息效果的技术要点和具体实施步骤。
39 2
ThreeJs制作全息投影视频
|
1月前
Threejs用下个点方法实现模型沿着轨道行驶
这篇文章讲解了如何在Three.js中通过计算下一个路径点来控制模型沿轨迹行驶的方向,使用`lookAt`方法使模型面向行驶方向,实现了更加自然的移动效果。
43 1
|
3月前
|
API
【threejs教程】让你的场景更加真实:灯光对物体的影响
【8月更文挑战第6天】threejs教程:让你的场景更加真实,灯光对物体的影响
165 6
【threejs教程】让你的场景更加真实:灯光对物体的影响
|
3月前
|
Windows
PPT 三维地球动画
PPT 三维地球动画
17 1
|
3月前
|
图形学 开发者
【Unity光照艺术手册】掌握这些技巧,让你的游戏场景瞬间提升档次:从基础光源到全局光照,打造24小时不间断的视觉盛宴——如何运用代码与烘焙创造逼真光影效果全解析
【8月更文挑战第31天】在Unity中,合理的光照与阴影设置对于打造逼真环境至关重要。本文介绍Unity支持的多种光源类型,如定向光、点光源、聚光灯等,并通过具体示例展示如何使用着色器和脚本控制光照强度,模拟不同时间段的光照变化。此外,还介绍了动态和静态阴影、全局光照及光照探针等高级功能,帮助开发者创造丰富多样的光影效果,提升游戏沉浸感。
69 0
|
3月前
|
数据采集 编解码 数据可视化
倾斜摄影教程:无人机航拍后使用ContextCapture生成 3D模型
### 倾斜摄影建模简介 倾斜摄影建模利用多角度照片创建真实感三维模型。通过无人机等搭载多台相机从不同角度拍摄同一区域,获取重叠图像集,再用专业软件处理生成三维模型。 #### 技术特点 - **多角度拍摄**:采用多个倾斜角度捕捉地面特征。 - **多视角影像**:提供丰富视角信息,助于构建精确模型。 - **重叠影像**:相邻照片间存在重叠,利于图像匹配和三维重建。
|
3月前
|
算法
互动游戏解决遇到问题之基于射线投射寻路算法的问题如何解决
互动游戏解决遇到问题之基于射线投射寻路算法的问题如何解决
|
6月前
【智慧地球】图新地球 | 如何将图新地球多要素KML进行分离输出
【智慧地球】图新地球 | 如何将图新地球多要素KML进行分离输出
103 0