3DSolarSystem - 3D版卫星运行轨道图

代码说明

本项目代码已经开源:
https://gitee.com/mclansky/canvas-3-dsolar-system (码云:Lansky/mcLansky)

介绍

使用HTML、JavaScript、CSS与Canvas技术构建一个卫星运行轨道图,通过THREE.JS、OrbitControls.js、Detector.js等一些列Canvas 3D绘图框架实现了卫星运行轨道图的3D实现。

木星系统特写

内容

本实验在太阳系中实现了太阳、水星、火星、地球、金星、木星、海王星、土星、天王星、月球、木卫一、木卫二、木卫三等天体。

其中八大行星围绕太阳旋转;月球围绕地球旋转;木卫一、木卫二、木卫三围绕木星旋转。其中海王星、天王星、地球、木星、土星拥有大气层。

技术特色

本次实验作品可以调整各个星体的旋转速度,通过按钮来进行加速或者减速。

本次实验作品对移动端进行了适配,可以通过图形界面中嵌入的按钮对视角以及镜头目标进行跟踪,具体的视角及镜头目标操作按钮有:

镜头移动操作按钮

xAdd - 距离移动、xSub - 距离移动、yAdd - 垂直移动、ySub - 垂直移动

zAdd - 水平移动、zSub - 水平移动

视角移动操作按钮

xAdd - X轴焦点、xSub - X轴焦点、yAdd - Y轴焦点、ySub - Y轴焦点

zAdd - Z轴焦点、zSub - Z轴焦点

星体跟踪操作按钮

星体跟踪 - 开关、锁定相机 - 跟踪、跟踪星体 - 地球

跟踪星体 - 木星、跟踪星体 - 海王星

其他

同时,本次实验已经上传至在线服务器,可以通过电脑手机的浏览器直接进行访问查看并进行相应操作,访问地址:http://agelei.mclansky.com/1/

地月系统特写
太阳系近距离视图
海王星特写
太阳特写
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容