-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
executable file
·61 lines (55 loc) · 4.34 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360° UGL Tour</title>
<meta name="description" content="360° Image Gallery - A-Frame">
<!-- Include all the javascript files that are used -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="components/objects.js"></script>
<script src="components/set-image.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<!-- Create our image and audio assets -->
<img id="arrow-thumb" crossorigin="anonymous" src="/assets/arrow.png">
<img id="this-image" crossorigin="anonymous" src="/assets/photos/PHOTO_4889.jpg">
<audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
</a-assets>
<!-- 360-degree image of current position in library -->
<a-sky id="image-current" radius="10" src="#this-image">
<!-- Animation that fades image to black -->
<a-animation begin="startFade" attribute="material.color" dur="800" from="#FFF" to="#000" repeat="0" dir="normal"></a-animation>
<!-- Animation that fades from black to image -->
<a-animation begin="endFade" attribute="material.color" dur="800" from="#000" to="#FFF" repeat="0" dir="normal"></a-animation>
</a-sky>
<!-- Create arrows that link in each of the four possible directions -->
<a-entity id="goRightLink" layout="type: line; margin: 1.5" position="-6 -1.2 0" rotation="0 90 0" onclick="changeImage('right');">
<a-entity class="link" geometry="primitive: plane; height: 0.5; width: 1" material="shader: flat; src: /assets/arrow.png; alphaTest: 0.5; opacity: 0.6" 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"></a-entity>
</a-entity>
<a-entity id="goLeftLink" layout="type: line; margin: 1.5" position="6 -1.2 0" rotation="0 270 0" onclick="changeImage('left');">
<a-entity class="link" geometry="primitive: plane; height: 0.5; width: 1" material="shader: flat; src: /assets/arrow.png; alphaTest: 0.5; opacity: 0.6" 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"></a-entity>
</a-entity>
<a-entity id="goForwardLink" layout="type: line; margin: 1.5" position="0 -1.2 6" rotation="0 180 0" onclick="changeImage('forward');" visible="false">
<a-entity class="link" geometry="primitive: plane; height: 0.5; width: 1" material="shader: flat; src: /assets/arrow.png; alphaTest: 0.5; opacity: 0.6" 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"></a-entity>
</a-entity>
<a-entity id="goBackwardLink" layout="type: line; margin: 1.5" position="0 -1.2 -6" rotation="0 0 0" onclick="changeImage('backward');" visible="false">
<a-entity class="link" geometry="primitive: plane; height: 0.5; width: 1" material="shader: flat; src: /assets/arrow.png; alphaTest: 0.5; opacity: 0.6" 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"></a-entity>
</a-entity>
<!-- Camera + cursor. -->
<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-scene>
</body>
</html>