-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (79 loc) · 4.59 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CMS A-Frame</title>
<meta name="description" content="CMS A-Frame">
<link rel="shortcut icon" href="img/cms-favicon.png" type="image/png"/>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@5/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-proxy-event-component.min.js"></script>
<script src="components/set-image.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="lhc0" crossorigin="anonymous" src="img/MA27852_Panorama_2048.jpg">
<img id="lhc1" crossorigin="anonymous" src="img/MA27860_Panorama_2048.jpg">
<img id="p50" crossorigin="anonymous" src="img/1102319_02_2048.jpg">
<img id="p51" crossorigin="anonymous" src="img/1102319_03_2048.jpg">
<img id="cms0" crossorigin="anonymous" src="img/Jl1MSV90aJ1L_equirectangular_2048.jpg">
<img id="cms1" crossorigin="anonymous" src="img/0pOgmYSEETO5_equirectangular_2048.jpg">
<img id="cms2" crossorigin="anonymous" src="img/1cvTuu1MUXmS_equirectangular_2048.jpg">
<img id="cms3" crossorigin="anonymous" src="img/CMS_equirectangular_2048.jpg">
<img id="cms0-thumb" crossorigin="anonymous" src="img/cms0_thumb.jpg">
<img id="cms1-thumb" crossorigin="anonymous" src="img/cms1_thumb.jpg">
<img id="cms2-thumb" crossorigin="anonymous" src="img/cms2_thumb.jpg">
<img id="cms3-thumb" crossorigin="anonymous" src="img/cms3_thumb.jpg">
<img id="lhc0-thumb" crossorigin="anonymous" src="img/lhc1_thumb.jpg">
<img id="lhc1-thumb" crossorigin="anonymous" src="img/lhc2_thumb.jpg">
<img id="p50-thumb" crossorigin="anonymous" src="img/p50_thumb.jpg">
<img id="p51-thumb" crossorigin="anonymous" src="img/p51_thumb.jpg">
<img id="cmslogo" crossorigin="anonymous" src="img/cms-color-medium.png">
<img id="cernlogo" crossorigin="anonymous" src="img/icon_cern_badge.png">
<script id="link" type="text/html">
<a-entity class="link"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; src: ${thumb}"
event-set__1="_event: mousedown; scale: 1 1 1"
event-set__2="_event: mouseup; scale: 1.2 1.2 1"
event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
event-set__4="_event: mouseleave; scale: 1 1 1"
set-image="on: click; target: #image-360; src: ${src}">
</a-entity>
</script>
</a-assets>
<a-sky id="image-360" radius="10" src="#cms2"></a-sky>
<a-text position="-2.25 1 -4"
anchor="left"
width="6"
color="white"
id="img-text"
value="The CMS Experiment at the LHC, CERN"></a-text>
<a-entity id="links0" layout="type: line; margin: 1.5" position="-2.25 0 -4">
<a-entity template="src: #link" data-src="#lhc0" data-thumb="#lhc0-thumb"></a-entity>
<a-entity template="src: #link" data-src="#lhc1" data-thumb="#lhc1-thumb"></a-entity>
<a-entity template="src: #link" data-src="#p50" data-thumb="#p50-thumb"></a-entity>
<a-entity template="src: #link" data-src="#p51" data-thumb="#p51-thumb"></a-entity>
</a-entity>
<a-entity id="links1" layout="type: line; margin: 1.5" position="-2.25 -1.5 -4">
<a-entity template="src: #link" data-src="#cms0" data-thumb="#cms0-thumb"></a-entity>
<a-entity template="src: #link" data-src="#cms1" data-thumb="#cms1-thumb"></a-entity>
<a-entity template="src: #link" data-src="#cms2" data-thumb="#cms2-thumb"></a-entity>
<a-entity template="src: #link" data-src="#cms3" data-thumb="#cms3-thumb"></a-entity>
</a-entity>
<a-entity camera look-controls>
<a-cursor id="cursor"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__1="_event: mouseenter; color: springgreen"
event-set__2="_event: mouseleave; color: black"
fuse="true"
raycaster="objects: .link"></a-cursor>
</a-entity>
<a-image src="#cmslogo" position="2.4 -3 -4.0" scale="0.5 0.5 0.5"></a-image>
</a-scene>
</body>
</html>