代码说明
本项目代码已经开源:
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/
地月系统特写
太阳系近距离视图
海王星特写
太阳特写