vue太阳系模型,vue solar-system

简介

本人很喜欢太空与各种天文景象，经常在steam的宇宙沙盘模拟各种太阳系的场景，今日突发奇想用vue做个简略太阳系简单娱乐一下，仅仅八大行星的公转轨道，并没有太阳、自转、卫星、行星带等等细节，行星数据轨道半长轴、赤道半径、公转周期均来自百科。

<template>
  <div class="container">
    <div
      v-for="(planet, index) in system"
      :key="'system' + index"
      class="fa fa-contain"
      :style="{
        height: `${planet.fa / farule}px`,
        width: `${planet.fa / farule}px`,
        animationDuration: `${planet.speed / speedrule}s`,
      }"
    >
      <div
        class="ch"
        :style="{
          height: `${planet.ch / chrule}px`,
          width: `${planet.ch / chrule}px`,
          top: `-${planet.ch / 2 / chrule}px`,
          left: `${planet.fa / farule / 2 - planet.ch / 2 / chrule}px`,
          backgroundColor:`${planet.color}`
        }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      farule:50,//公转轨道比例
      chrule:200,//行星直径比例
      speedrule:1,//公转周期比例 越大公转周期越短 为1时即 1s = 1天 为2时 1s = 2天
      system: [
        {
          name: "Mercury",//名称
          fa: 5791,//轨道半长轴 万千米
          ch: 2440,//赤道半径 千米
          speed: 88,//公转周期 天
          color:'grey'//颜色
        },
        {
          name: "Venus",
          fa: 10820.9,
          ch: 6073,
          speed: 224.701,
          color:'gold'
        },
        {
          name: "Earth",
          fa: 15029,
          ch: 6378,
          speed: 365,
          color:'blue'
        },
        {
          name: "Mars",
          fa: 22899.729625,
          ch: 3397.2,
          speed: 686.98,
          color:'red'
        },
        {
          name: "Jupiter",
          fa: 78151,
          ch: 71492,
          speed: 11.86 * 365,
          color:'#c7c776'
        },
        {
          name: "Saturn",
          fa: 143361.89,
          ch: 60000,
          speed: 29.458 * 365,
          color:'#f3f3c4'
        },
        {
          name: "Uranus",
          fa: 288827.8,
          ch: 25559,
          speed: 84 * 365,
          color:'#a6eaff'
        },
        {
          name: "Neptune",
          fa: 451741,
          ch: 24766,
          speed: 90581,
          color:'#476fff'
        },
      ],
    };
  },
};
</script>

<style>
.container {
  background-color: antiquewhite;
  height: 10000px;
  width: 10000px;
  margin: auto;
  position: relative;
}
.fa {
  margin: auto;
  border: 1px solid #000;
  border-radius: 50%;
  animation: rotate 1s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.ch {
  border: 1px solid #000;
  border-radius: 50%;
  position: absolute;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

预览

运行起来还是不卡顿的，录屏时就开始卡了。图中时间比设置的为1s = 300天，画布高宽各10000像素，最大的轨道Neptune轨道按比例缩小后仍达到了9000+px的宽度，比例太小的话，火星轨道内的行星几乎看不见。行星也仅仅给了个背景色。总的来说很业余，但我很开心能将工作和喜好结合起来。