-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
41 lines (41 loc) · 1.85 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
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<title>AR-VR</title>
<style></style>
<script></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="img1" src="eso0932a.jpg">
<img id="mars" src="mars_1k_color.jpg">
<img id="earth" src="earthmap1k.jpg">
<img id="venus" src="venusmap.jpg">
<img id="mercury" src="mercurymap.jpg">
<img id="jupiter" src="jupitermap.jpg">
<img id="pluto" src="plutomap1k.jpg">
<img id="neptune" src="neptunemap.jpg">
<img id="saturn" src="saturnmap.jpg">
<img id="uranus" src="uranusmap.jpg">
<img id="sun" src="sunmap.jpg">
</a-assets>
<a-sky src="#img1" id="image-360"></a-sky>
<a-sphere position="0 1.25 -6" radius="1.4" src="#earth" rotation="0 0 0" roughness="0.65">
<a-animation attribute="rotation" to="0 360 0" dur="5000" repeat="indefinite" easing="linear" direction="normal"></a-animation>
</a-sphere>
<a-sphere position="-25 1.25 -6" radius="4.8" src="#mars" rotation="0 0 0" roughness="0.87">
<a-animation attribute="rotation" to="0 360 0" dur="5000" repeat="indefinite" easing="linear" direction="normal"></a-animation>
</a-sphere>
<a-sphere position="25 1.25 -6" radius="3.8" src="#venus" rotation="0 0 0" roughness="0.5">
<a-animation attribute="rotation" to="0 360 0" dur="5000" repeat="indefinite" easing="linear" direction="normal"></a-animation>
</a-sphere>
<a-sphere position="100 1.25 100" radius="11.8" src="#mercury" rotation="0 0 0" roughness="0.585">
<a-animation attribute="rotation" to="0 360 0" dur="5000" repeat="indefinite" easing="linear" direction="normal"></a-animation>
</a-sphere>
<a-sphere position="200 1.25 340" radius="220" src="#sun" rotation="0 0 0" roughness="0.7">
<a-animation attribute="rotation" to="0 360 0" dur="25000" repeat="indefinite" easing="linear" direction="normal"></a-animation>
</a-sphere>
</a-scene>
</body>
</html>