-
Notifications
You must be signed in to change notification settings - Fork 18
/
index.html
101 lines (82 loc) · 5.45 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
<!DOCTYPE html>
<html>
<head>
<title>WebVR Photosphere Viewer</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
<meta name="abstract" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="" />
<meta name="robots" content="follow, index" />
<meta property="og:site_name" content="" />
<meta property="og:image:secure_url" content="" />
<meta property="og:image" content="" />
<meta property="og:description" content="" />
<meta property="og:title" content="WebVR Photosphere Viewer" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<script src="js/aframe.min.js"></script>
<script src="js/components/isvr_photosphere_menu.js"></script>
<script src="js/components/isvr_photosphere_menu_thumb.js"></script>
<script src="js/components/isvr_photosphere_menu_navigation.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img src="images/MwzIg49kqdIsVsPLHlklHnETbxnhk5j2brGjs5XNnN1ZehJeh4mm36eQLARQ.jpg" id="img-photosphere-1">
<img src="images/MwzIg49kqdIsVsPLHlklHnETbxnhk5j2brGjs5XNnN1ZehJeh4mm36eQLARQ_thumb.jpg" id="img-photosphere-1-thumb">
<img src="images/tXP1XaC9ShZL5s8bIY001NygnKSJrUofLCkJUlurOzB8El5YDEi7p34cFlxz.jpg" id="img-photosphere-2">
<img src="images/tXP1XaC9ShZL5s8bIY001NygnKSJrUofLCkJUlurOzB8El5YDEi7p34cFlxz_thumb.jpg" id="img-photosphere-2-thumb">
<img src="images/HlwFJ3VKh2Vt7aA5rLWyxrjFQuOzYOMHcC8vOWef36C8M81RM06EBPMelHh0.jpg" id="img-photosphere-3">
<img src="images/HlwFJ3VKh2Vt7aA5rLWyxrjFQuOzYOMHcC8vOWef36C8M81RM06EBPMelHh0_thumb.jpg" id="img-photosphere-3-thumb">
</a-assets>
<a-entity position="0 1.8 5">
<a-entity
id="camera"
camera="far: 10000; fov: 80; near: 0.5;"
look-controls="enabled: true">
<a-entity
cursor="fuse: false; maxDistance: 500; timeout: 3000;"
id="cursor"
position="0 0 -3.4"
geometry="primitive: ring; radiusOuter: 0.10; radiusInner: 0.05;"
material="color: red; shader: flat;"
visible="false">
</a-entity>
</a-entity>
</a-entity>
<a-entity data-current-page="1" isvr-photosphere-menu id="photosphere-menu" visible="false">
<a-entity isvr-photosphere-menu-navigation id="menu-arrow-up" position="0 1.5 0" visible="false">
<a-plane position="-0.07 0 0" rotation="0 0 -45" width="0.10" height="0.3" color="#5b00f4"></a-plane>
<a-plane position="0.07 0 0" rotation="0 0 45" width="0.10" height="0.3" color="#5b00f4"></a-plane>
</a-entity>
<a-image data-image-id="1" isvr-photosphere-menu-thumb class="img-photosphere-thumb" src="#img-photosphere-1-thumb" width="2" height="0.7" position="0 0.8 0">
<a-animation attribute="position" begin="mouseenter" from="0 0.8 0" to="0 0.8 0.5" dur="400"></a-animation>
<a-animation attribute="position" begin="mouseleave" from="0 0.8 0.5" to="0 0.8 0" dur="400"></a-animation>
<a-animation attribute="material.opacity" begin="fade" to="1"></a-animation>
</a-image>
<a-image data-image-id="2" isvr-photosphere-menu-thumb class="img-photosphere-thumb" src="#img-photosphere-2-thumb" width="2" height="0.7" position="0 0 0">
<a-animation attribute="position" begin="mouseenter" from="0 0 0" to="0 0 0.5" dur="400"></a-animation>
<a-animation attribute="position" begin="mouseleave" from="0 0 0.5" to="0 0 0" dur="400"></a-animation>
<a-animation attribute="material.opacity" begin="fade" to="1"></a-animation>
</a-image>
<a-image data-image-id="3" isvr-photosphere-menu-thumb class="img-photosphere-thumb" src="#img-photosphere-3-thumb" width="2" height="0.7" position="0 -0.8 0">
<a-animation attribute="position" begin="mouseenter" from="0 -0.8 0" to="0 -0.8 0.5" dur="400"></a-animation>
<a-animation attribute="position" begin="mouseleave" from="0 -0.8 0.5" to="0 -0.8 0" dur="400"></a-animation>
<a-animation attribute="material.opacity" begin="fade" to="1"></a-animation>
</a-image>
<a-entity isvr-photosphere-menu-navigation="url:https://www.ideaspacevr.org/webvr-photosphere-viewer-equirectangular-images/field-data?key=images_upload&chunk-size=3&page=2" id="menu-arrow-down" position="0 -1.5 0" visible=" true ">
<a-plane position="-0.07 0 0" rotation="0 0 45" width="0.10" height="0.3" color="#5b00f4"></a-plane>
<a-plane position="0.07 0 0" rotation="0 0 -45" width="0.10" height="0.3" color="#5b00f4"></a-plane>
</a-entity>
</a-entity>
<a-entity
geometry="primitive:sphere;radius:5000;segmentsWidth:64;segmentsHeight:64"
material="shader:flat;color:#ffffff;fog:false; src:#img-photosphere-1 "
scale="-1 1 1"
rotation="0 -60 0" id="photosphere">
</a-entity>
</a-scene>
</body>
</html>