-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (121 loc) · 6.67 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
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<html>
<head>
<meta charset="utf-8">
<title>VR World</title>
<!--To build our VR world using a framework, we need to link A-frame with our HTML document. for this purpose drop a <script> tag pointing to the CDN build.-->
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="js/aframe-particle-system-component.min.js"></script>
</head>
<body>
<a-scene do-something particle-system="preset: dust; particleCount: 1000">
<!-- In order to start creating our virtual world, we must create a scene. The scene is the main tag, everything that we want to put inside of our world will go inside of this tag, that includes the primitives, the camera, and many more.-->
<a-assets>
<img
id="sun_img"
src="assets/src/sun.jpg"
/>
<img
id="mercury_img"
src="assets/src/mercury.jpg"
/>
<img
id="venus_img"
src="assets/src/venus.jpg"
/>
<img
id="earth_img"
src="assets/src/earth.jpg"
/>
<img
id="mars_img"
src="assets/src/marse.jpg"
/>
<img
id="jupiter_img"
src="assets/src/jupiter.jpg"
/>
<img
id="saturn_img"
src="assets/src/saturn.jpg"
/>
<img
id="uranus_img"
src="assets/src/uranus.jpg"
/>
<img
id="neptune_img"
src="assets/src/neptune.jpg"
/>
</a-assets>
<a-entity position="0 2 0">
<a-entity camera look-controls wasd-controls>
<a-entity position="0 0 -3"
geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.2;"
material="color: red; shader: flat"
cursor="fuse: true">
<a-animation begin="fusing" easing="ease-in" attribute="scale"
fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="1500">
</a-animation>
<a-animation begin="click" easing="ease-in" attribute="scale" dur="1500"
fill="forwards" from="0.1 0.1 0.1" to="1 1 1">
</a-animation>
<a-entity id="card_data" visible="false" position="0 3.5 -4" geometry="primitive: plane; height: 5; width: 5" material="side: double">
<a-text font="monoid" id="planet_text" position="-1 2 0" width="14" value ="Loading" color="#000"></a-text>
<a-text font="dejavu" id="mass_text" position="-2 1 0" width="7" value ="Loading" color="#000"></a-text>
<a-text font="dejavu" id="volume_text" position="-2 0 0" width="7" value ="Loading" color="#000"></a-text>
<a-text font="dejavu" id="gravity_text" position="-2 -1 0" width="7" value ="Loading" color="#000"></a-text>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
<a-sphere id="sol" position="0 2 -7" radius="3.5" src="#sun_img">
<!-- This tag helps us to create 3d models in our VR world itself.
"<a-sphere></a-sphere>" this tag use to create sphere but you can create many other shapes like cylinder , ring etc. by simply replacing "sphere" word in this tag with the shape name which you want.
here material helps us to add image in our shape. we can also use color attribute to add color. for adjusting our shape sizes we use depth, height,and width tags.
position helps us to adjust position of our 3d model in our vr world. Also we can change radius of sphere using radius attribute.-->
<a-entity position="0 -3 -1" particle-system="color: #EF0000,#44CC00;size: 0.2;maxAge:10;particleCount:300;texture:https://cdn.glitch.com/c1051546-359f-4e34-b17d-bd2b8900be35%2Fthumbnails%2F2k_sun.jpg?1599075846071"></a-entity>
</a-sphere>
<a-sphere id="mercury" position="5 2 -4" radius="0.5" src="#mercury_img">
<a-animation attribute="rotation" from="0 45 45" to="0 360 0" direction="alternate" dur="30000" loop: true
repeat="indefinite"></a-animation>
<!-- We can easily add animation in our A frame using <a-animation> tag. we can also use various attributes. here we used rotation attribute to make our sphere(planet) rotate.
There are other attributes too like dur which helps us to increase or decrease speed of rotation. The lower the value of Dur, the higher the speed of rotation. Then comes from and to attributes which decides the starting and ending position of rotation.\
the easing attribute, which is basically how you want the object to move or we can also say what pattern do you want your animation to follow.then comes repeat means how many times do you want your animation to, well, repeat.
-->
</a-sphere>
<a-sphere id="venus" position="6 2 0" radius="0.75" src="#venus_img">
<a-animation attribute="rotation" from="0 45 45" to="0 360 0" direction="alternate" dur="30000"
repeat="indefinite"></a-animation>
</a-sphere>
<a-sphere id="earth" position="0 2 5" radius="1" src="#earth_img">
<a-animation attribute="rotation" from="0 45 45" to="0 360 0" direction="alternate" dur="30000"
repeat="indefinite"></a-animation>
</a-sphere>
<a-sphere id="mars" position="-8 2 7" radius="0.5" src="#mars_img">
<a-animation attribute="rotation" from="0 45 45" to="0 360 0" direction="alternate" dur="30000"
repeat="indefinite"></a-animation>
</a-sphere>
<a-sphere id="jupiter" position="-16 2 2" radius="1.5" src="#jupiter_img">
<a-animation attribute="rotation" from="0 45 45" to="0 360 0" direction="alternate" dur="30000"
repeat="indefinite"></a-animation>
</a-sphere>
<a-sphere id="saturn" position="-21 2 -6" radius="1.25" src="#saturn_img">
<a-animation attribute="rotation" from="0 45 45" to="0 360 0" direction="alternate" dur="30000"
repeat="indefinite"></a-animation>
</a-sphere>
<a-entity position="-16 2 2" geometry="primitive: circle; radius: 2.5" material="side: double" color="#F0EABA"></a-entity>
<a-sphere id="uranus" position="-26 2 -15" radius="1" src="#uranus_img"
>
<a-animation attribute="rotation" from="0 45 45" to="0 360 0" direction="alternate" dur="30000"
repeat="indefinite"></a-animation>
</a-sphere>
<a-sphere id="neptune" position="-24 2 -26" radius="1" src="#neptune_img">
<a-animation attribute="rotation" from="0 45 45" to="0 360 0" direction="alternate" dur="30000"
repeat="indefinite"></a-animation>
</a-sphere>
<a-sky src="https://cdn.glitch.com/c1051546-359f-4e34-b17d-bd2b8900be35%2Fthumbnails%2F2k_stars_milky_way.jpg?1599075382958"></a-sky>
<a-sound src="#background" autoplay="true"></a-sound> <!-- we can add sound to our vr world using this tag. Here we use autoplay because we want the sound to start playing when the user joins our world.-->
</a-scene>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>