Threejs实现卫星太阳板折叠动画,信号发射,姿态调整

简介: Threejs实现卫星太阳板折叠动画,信号发射,姿态调整

1,介绍


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

主要实现功能:创建卫星主体,模拟太阳板折叠动画,卫星姿态调整,模拟发射信号。

效果图如下:



2,动画主要说明


1,太阳板折叠动画利用Tweenjs实现动画,太阳板旋转因为Three.js中默认旋转中心为物体自身的中心,所以旋转的时候在外层包裹一层对象,让外层旋转中心设置到想要旋转的位置上,再调整太阳板相对位置到正确的显示位置上。

2,卫星主体主要是用THREE.CylinderGeometry对象创建一个圆柱体和一个雷达圆锥体,并调整到合适的位置。

3,信号波使用THREE.RingGeometry对象创建一个圆环,使用Tweenjs创建动画移动圆环的位置实现雷达播放效果。

4,卫星姿态调整很简单,旋转场景对象THREE.Scene即可。


// 创建一个卫星主体
function createWeiXing() {
  // 创建一个立方体并设置大小
  var wxGeometry = new THREE.CylinderGeometry(5, 5, 20, 100, 0);
  var wxMaterial = new THREE.MeshBasicMaterial({
    color: "#55557f",
  });
  var weixing = new THREE.Mesh(wxGeometry, wxMaterial);
  weixing.position.set(0, 0, 1);
  weixing.rotateZ(-Math.PI / 2);
  scene.add(weixing);
}
// 创建一个雷达
function createLeiDa() {
  // 创建一个立方体并设置大小
  var wxGeometry = new THREE.CylinderGeometry(4, 0, 5, 100, 0);
  var wxMaterial = new THREE.MeshBasicMaterial({
    color: "#ffaa00",
  });
  var weixing = new THREE.Mesh(wxGeometry, wxMaterial);
  weixing.position.set(10, 0, 1);
  weixing.rotateZ(-Math.PI / 2);
  scene.add(weixing);
}
// 雷达信号
function initSatellite(positionX, starLiteRadius) {
  var group = new THREE.Group();
  var obj = scene.getObjectByName("satellite");
  scene.remove(obj);
  var wxMaterial = new THREE.MeshBasicMaterial({
    color: "#ffffff",
    side: THREE.DoubleSide
  });
  var signalGeometry1 = new THREE.RingGeometry(starLiteRadius, starLiteRadius + 0.1, 100, 0);
  var signal1 = new THREE.Mesh(signalGeometry1, wxMaterial);
  signal1.position.z = -1;
  var signalGeometry2 = new THREE.RingGeometry(starLiteRadius + 2, starLiteRadius + 2.1, 100, 0);
  var signal2 = new THREE.Mesh(signalGeometry2, wxMaterial);
  signal2.position.z = -10;
  var signalGeometry3 = new THREE.RingGeometry(starLiteRadius + 3, starLiteRadius + 3.1, 100, 0);
  var signal3 = new THREE.Mesh(signalGeometry3, wxMaterial);
  signal3.position.z = -20;
  group.rotateY(-Math.PI / 2);
  group.position.set(positionX, 0, 1);
  group.name = "satellite";
  group.add(signal1);
  group.add(signal2);
  group.add(signal3);
  scene.add(group);
}

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


目录
相关文章
|
1月前
|
图形学
unity 物体震动
在Unity中实现物体震动效果,主要通过改变物体的位置、旋转或缩放属性来模拟震动。以下是位置震动的实现原理及代码示例:通过随机生成微小偏移量并累加到物体位置上,在短时间内不断改变位置产生震动效果。生成随机偏移,并结合时间控制持续震动。
|
5月前
Threejs用切线实现模型沿着轨道行驶
这篇文章详细介绍了如何使用Three.js让一个模型沿着预定的曲线路径移动,并保持模型的方向始终沿着路径的切线方向,提供了实现这一效果的具体代码和步骤。
204 1
Threejs用切线实现模型沿着轨道行驶
|
5月前
Threejs用下个点方法实现模型沿着轨道行驶
这篇文章讲解了如何在Three.js中通过计算下一个路径点来控制模型沿轨迹行驶的方向,使用`lookAt`方法使模型面向行驶方向,实现了更加自然的移动效果。
95 1
|
6月前
|
计算机视觉
摄像头的宽度为640 巡线
【9月更文挑战第24天】
54 7
|
9月前
|
算法 图形学
【实现100个unity特效之3】使用PerlinNoise(柏林噪声)实现平滑的灯光闪烁效果
【实现100个unity特效之3】使用PerlinNoise(柏林噪声)实现平滑的灯光闪烁效果
165 0
|
机器学习/深度学习 传感器 算法
球体同胚表面准各向同性采样附matlab代码
球体同胚表面准各向同性采样附matlab代码
|
传感器 机器学习/深度学习 算法
【卫星轨道】基于matlab模拟卫星轨道和地面(空中)目标探测(双星不同轨)
【卫星轨道】基于matlab模拟卫星轨道和地面(空中)目标探测(双星不同轨)
|
机器学习/深度学习 传感器 算法
基于视差传播进行相机阵列的视差估计附matlab代码
基于视差传播进行相机阵列的视差估计附matlab代码
|
算法 定位技术
基于到达角的超声多频信号手势识别(Matlab代码实现)
基于到达角的超声多频信号手势识别(Matlab代码实现)
|
传感器 算法 数据可视化
使用三种不同的照明算法估计场景的照明和执行白平衡
使用三种不同的照明算法估计场景的照明和执行白平衡。 眼睛非常善于判断不同照明条件下的白色。然而,数码相机如果不进行某种调整,就可以很容易地捕捉到具有强烈色偏的不真实图像。自动白平衡(AWB)算法试图以最少的用户输入来校正环境光,以便生成的图像看起来像我们眼睛看到的。
228 0