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);
}

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

在线预览：左本的博客 (zuoben.top)

Threejs实现卫星太阳板折叠动画，信号发射，姿态调整相关推荐

Android：展开/折叠动画
假设我有一个带有以下内容的垂直linearLayout: [v1] [v2] 默认情况下,v1的可见值= GONE. 我想用扩展动画显示v1并同时按下v2. 我尝试过这样的事情: Animation ...
Android自动伸展动画,android – 如何实现平滑的展开/折叠动画
我指的是在这里找到的扩展/折叠动画代码. 虽然这样做不好,动画不顺利. 我做一些登录代码. public static void expand(final View v) { v.measure(Me ...
串口能按位传输吗_、迪文串口屏TTL与主控板RS232电平信号转换方案
迪文串口屏TTL与主控板RS232电平信号转换方案一.TTL和RS232简述串口.COM口是指的物理接口形式(硬件),按位(bit)发送和接收字节.而TTL.RS-232是指的电平标准(电信号). ...
rs232接口_、迪文串口屏TTL与主控板RS232电平信号转换方案
迪文串口屏TTL与主控板RS232电平信号转换方案一.TTL和RS232简述串口.COM口是指的物理接口形式(硬件),按位(bit)发送和接收字节.而TTL.RS-232是指的电平标准(电信号). ...
20P44 Premiere预设600个摄像机动画信号干扰调色视觉特效pr模板
20P44 Premiere预设600个摄像机动画信号干扰调色视觉特效pr模板 [预设介绍] 含600个摄像机动画信号干扰调色视觉特效Pr预设,prfpset格式,直接导入到PR软件中使用即可,支持4 ...
JQ彩色3D纸片折叠动画
JQ彩色3D纸片折叠动画闲着无聊做了一个玩~ 因是JQ制作,开始前请引入js <script src="http://libs.baidu.com/jquery/1.8.3/jque ...
【玩转物联网】（1）仅需18元，ESP8266开发板实现WIFI信号桥接和放大一劳永逸解决wifi信号弱问题
仅需18元,ESP8266开发板实现WIFI信号桥接和放大一劳永逸解决wifi信号弱问题可直接看B站视频:https://www.bilibili.com/video/BV1BL411T77T?s ...
jQuery动画-----折叠动画（slideDown、slideUp、slideToggle）
<script>// jQuery的折叠动画// 通过改变高度,来实现效果// 1, $(标签).slideDown() 显示// 语法 : $(标签).slideDown(时间,运动曲线 ...
PCB板上高频信号回流经验总结
PCB板上高频信号的传输主要考虑两点: 一,信号频率和波长的关系二,信号回流路径的阻抗关于第一点,若信号传输路径所导致的延迟时间比信号的跳变沿大则需要做传输线处理即要做阻抗匹配,否则会有信号反射破 ...

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

1，介绍

2，动画主要说明

Threejs实现卫星太阳板折叠动画，信号发射，姿态调整相关推荐

最新文章

热门文章