-
Notifications
You must be signed in to change notification settings - Fork 30
/
Copy pathindex.html
64 lines (53 loc) · 3.2 KB
/
index.html
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
<html>
<head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="midnightblue"></a-sky>
<!-- Circles -->
<a-circle id="sun" position="0 2 -10" radius="2" color="#F5C85D"></a-circle>
<a-circle id="mercury" position="-7 2 -10" radius=".25" color="#AF886D"></a-circle>
<a-circle id="venus" position="-5 2 -10" radius=".5" color="#ECBFBF"></a-circle>
<a-circle id="mars" position="-1 2 -10" radius=".25" color="#CF503A"></a-circle>
<!--notice this one doesn't have a radius? If you don't specify one,
A-Frame uses the default, which is 1 -->
<a-circle id="jupiter" position="1 2 -10" color="#C9957A"></a-circle>
<a-circle id="pluto" position="13 2 -10" radius=".10" color="#BFCFD4"></a-circle
<!-- a not so basic planet- it's Earth with our moon wrapped up
together in an a-entity component to keep them organized and placed
in relation to each other. -->
<a-entity id="earth-and-moon" position="-3 2 -10">
<!-- the positions in here are in relation to each other, not to
the other planets, if you want to change the position of that
you need to do it on a-entity or remove a-entity -->
<a-sphere position="0 0 0" radius=".5" color="#6DCBE7" id="earth"></a-sphere>
<a-sphere position="-1 0 0" radius=".10" color="#DBE0DE" id="moon"></a-sphere>
</a-entity>
<!-- the other not-so-basic planets, these have rings around them.
The rings are made of torii (singular torus) a shape that can be
used to make donuts, tubes and yes, ring shapes-->
<a-entity id="saturn-container" position="4 2 -10">
<a-sphere position="0 0 0 " radius=".8" color="#F8EC99" id="saturn"></a-sphere>
<a-torus id="saturn-ring-1" color="#57524A" segments-tubular="50" radius="3.2" radius-tubular="0.1"
rotation="90 0 0" scale=".44 .44 0.04"></a-torus>
<a-torus id="saturn-ring-2" color="#A29A87" segments-tubular="50" radius="2.4" radius-tubular="0.2"
rotation="90 0 0" scale=".44 .44 0.04"></a-torus>
</a-entity>
<a-entity id="uranus-container" position="7 2 -10">
<a-sphere id="uranus" radius=".75" color="#73AAF8"></a-sphere>
<a-torus id="uranus-ring" color="#FFFFFF" segments-tubular="50" radius="1.5" radius-tubular="0.01"
rotation="-10 90 0" scale=".75 .75 0.075"></a-torus>
</a-entity>
<a-entity id="neptune-container" position="10 2 -10">
<a-sphere id="neptune" radius=".75" color="#3453BD"></a-sphere>
<a-torus id="neptune-ring-1" color="#FFFFFF" segments-tubular="50" radius="2" radius-tubular="0.01"
rotation="90 0 0" scale=".75 .75 0.075" opacity="0.8"></a-torus>
<a-torus id="neptune-ring-2" color="#FFFFFF" segments-tubular="50" radius="1.7" radius-tubular="0.05"
rotation="90 0 0" scale=".75 .75 0.075" opacity="0.8"></a-torus>
<a-torus id="neptune-ring-3" color="#FFFFFF" segments-tubular="50" radius="1.3" radius-tubular="0.01"
rotation="90 0 0" scale=".75 .75 0.075" opacity="0.8"></a-torus>
</a-entity>
</a-scene>
</body>
</html>