-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathsolar.html
83 lines (70 loc) · 2.53 KB
/
solar.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<lang en></lang>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<style src="style.css"></style>
</head>
<body>
<a-scene background="color: midnightblue">
<!-- Sun -->
<a-sphere
color="#F5C85D"
position="-13 2 -10"
radius="4"></a-sphere>
<!-- Mercury -->
<a-sphere
color="#AF886D"
position="-7 2 -10"
radius=".25"></a-sphere>
<!-- Venus -->
<a-sphere
color="#ECBFBF"
position="-5 2 -10"
radius=".5"></a-sphere>
<!-- Earth -->
<a-sphere
color="#6DCBE7"
position="-3 2 -10"
radius=".5"></a-sphere>
<!-- Mars -->
<a-sphere
color="#CF503A"
position="-1 2 -10"
radius=".25"></a-sphere>
<!-- Jupiter -->
<a-sphere
color="#C9957A"
position="1 2 -10"
radius="1"></a-sphere>
<!-- Saturn -->
<a-sphere
color="#F8EC99"
position="4 2 -10"
radius=".8"></a-sphere>
<!-- Uranus -->
<a-sphere
color="#73AAF8"
position="7 2 -10"
radius=".75"></a-sphere>
<!-- Neptune -->
<a-sphere
color="#3453BD"
position="10 2 -10"
radius=".75"></a-sphere>
<!-- 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>
<div class="zoom">
<img src="image.jpg">
</div>
<input type="range" min="100" max="300" value="100" class="slider">
</a-scene>
</body>
</html>