solar-system/index.html at master · jmiller-io/solar-system · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Solar System in A-Frame</title>
    <meta name="description" content="Solar System in A-Frame">
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/master/dist/aframe-orbit-controls-component.min.js"></script>
    <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.3/dist/aframe-extras.min.js"></script>
  </head>
  <body>
    <a-scene>

      <!-- Scene Camera -->
      <a-entity position="0 2 40">
        <a-camera></a-camera>
      </a-entity>

      <!-- Scene Lighting -->
      <a-entity light="type: point; intensity: 10.75; distance: 50; decay: 2"
          position="0 0 0"></a-entity>
      <a-entity light="type: ambient; color: #CCC; intensity: 1.25;"></a-entity>

      <!-- The Ship -->
      <a-entity position="0 2 38" scale="0.5 0.5 0.5" object-model="src: url(./assets/star-wars-vader-tie-fighter.json);" keyboard-controls>
      </a-entity>


      <!-- Sun -->
      <a-sphere id="sun" src="assets/sunmap.jpg" position="0 0 0" radius="2.75">
        <a-animation attribute="rotation" dur="2192831" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
      </a-sphere>

      <!-- Mercury -->
      <a-entity position="5.50 0 0"; orbit-controls="autoRotate: true; target: #sun; autoRotateSpeed:0.25;">
        <a-sphere id="mercury" src="assets/mercurymap.jpg" radius="0.6">
          <a-animation attribute="rotation" dur="5067031" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
        </a-sphere>
      </a-entity>

      <!-- Venus -->
      <a-entity position="10.50 0 0"; orbit-controls="autoRotate: true; target: #sun; autoRotateSpeed:1.62;">
        <a-sphere id="venus" src="assets/venusmap.jpg" radius="1.20">
          <a-animation attribute="rotation" dur="20996815" fill="forwards" to="0 -360 0" repeat="indefinite"></a-animation>
        </a-sphere>
      </a-entity>

      <!-- Earth & Moon -->
      <a-entity position="15.50 0 0"; orbit-controls="autoRotate: true; target: #sun; autoRotateSpeed:5;">
        <a-sphere id="earth" src="assets/earthmap.jpg" radius="1.25">
          <a-animation attribute="rotation" dur="86400" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
        </a-sphere>
        <a-entity position="2 0 0" orbit-controls="autoRotate: true; target: #earth; autoRotateSpeed:5;">
          <a-sphere id="moon" src="assets/moonmap.jpg" radius="0.208"></a-sphere>
        </a-entity>
      </a-entity>

      <!-- Mars -->
      <a-entity position="20.50 0 0"; orbit-controls="autoRotate: true; target: #sun; autoRotateSpeed:2.50;">
        <a-sphere id="mars" src="assets/marsmap.jpg" radius="0.76">
          <a-animation attribute="rotation" dur="88000" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
        </a-sphere>
      </a-entity>

      <!-- Jupiter -->
      <a-entity position="25.50 0 0"; orbit-controls="autoRotate: true; target: #sun; autoRotateSpeed:0.42;">
        <a-sphere id="jupiter" src="assets/jupitermap.jpg" radius="1.99">
          <a-animation attribute="rotation" dur="35430" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
        </a-sphere>
      </a-entity>

      <!-- Saturn -->
      <a-entity position="30.50 0 0"; orbit-controls="autoRotate: true; target: #sun; autoRotateSpeed:0.17;">
        <a-sphere id="saturn" src="assets/saturnmap.jpg" radius="1.80">
          <a-animation attribute="rotation" dur="36806" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
        </a-sphere>
        <!-- <a-ring id="saturnring" src="assets/saturnringpattern.gif" radius-inner="38" radius-outer="39" rotation="-45 -90 25"></a-ring> -->
      </a-entity>

      <!-- Uranus -->
      <a-entity position="35.50 0 0"; orbit-controls="autoRotate: true; target: #sun; autoRotateSpeed:0.06;">
        <a-sphere id="uranus" src="assets/uranusmap.jpg" radius="1.3">
          <a-animation attribute="rotation" dur="62063" fill="forwards" to="0 -360 0" repeat="indefinite"></a-animation>
        </a-sphere>
      </a-entity>

      <!-- Neptune -->
      <a-entity position="40.50 0 0"; orbit-controls="autoRotate: true; target: #sun; autoRotateSpeed:0.03;">
        <a-sphere id="neptune" src="assets/neptunemap.jpg" radius="1.29">
          <a-animation attribute="rotation" dur="57996" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
        </a-sphere>
      </a-entity>

      <!-- Pluto -->
      <a-entity position="45.50 0 0"; orbit-controls="autoRotate: true; target: #sun; autoRotateSpeed:0.02;">
        <a-sphere id="pluto" src="assets/plutomap.jpg" radius="0.50">
          <a-animation attribute="rotation" dur="551852" fill="forwards" to="0 -360 0" repeat="indefinite"></a-animation>
        </a-sphere>
      </a-entity>

      <!-- Background -->
      <a-sky src="assets/starfield.jpg"></a-sky>
    </a-scene>
    <script src="main.js"></script>
  </body>
</html>