# Canvas 3DSolarSystem

**Repository Path**: mclansky/canvas-3-dsolar-system

## Basic Information

- **Project Name**: Canvas 3DSolarSystem
- **Description**: 使用HTML、JavaScript、CSS与Canvas技术构建一个卫星运行轨道图，通过THREE.JS、OrbitControls.js、Detector.js等一些列Canvas 3D绘图框架实现了卫星运行轨道图的3D实现。
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: http://agelei.mclansky.com/1/
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 0
- **Created**: 2020-12-21
- **Last Updated**: 2025-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 介绍

使用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轴焦点

### 星体跟踪操作按钮

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

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