-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
58 lines (54 loc) · 2.97 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Virtual Tour</title>
<meta name="description" content="360° Image Gallery - A-Frame">
<script src="https://aframe.io/releases/0.9.2/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-template-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-proxy-event-component.min.js"></script>
<script src="js/hotspotClicked.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<a-scene starting-scene="scene: sceneEntrance">
<a-assets>
<audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
<img id="arrow" crossorigin="anonymous" src="img/navArrow.png" transparent="true" alpha-test="0.8">
<img id="logo" crossorigin="anonymous" src="img/logo.png">
<img id="entrance" crossorigin="anonymous" src="img/panoramas/index/entrance.jpg">
<script id="link" type="text/html">
<a-entity class="link"
geometry="primitive: plane; height: 2; width: 2"
material="shader: flat; depth: 5; src: ${thumb}; transparent: true;"
event-set__mouseenter="scale: 1.2 1.2 1"
event-set__mouseleave="scale: 1 1 1"
hotspot-clicked="loadScene: ${src}"
sound="on: click; src: #click-sound">
</a-entity>
</script>
</a-assets>
<a-entity id="sceneEntrance" class="scene">
<a-sky src="#entrance"></a-sky>
<a-image src="#logo" position="0 6 -7.6" rotation="0 0 0" scale="2 2 1"></a-image>
<a-text value="Welcome to VR tour of\nPoltava Polytechnic College!" position="0 4 -7.6" width="15" align="center"></a-text>
<a-text value="Use to navigate between halls and audiences." position="0 1.8 -7.6" width="12" align="center"></a-text>
<a-image src="#arrow" position="-3 2 -7.6"></a-image>
<a-text value="Look around and enjoy your tour!" position="0 0 -7.6" width="11" align="center"></a-text>
<a-entity link="href: firstFloor.html;" template="src: #link" data-src="" data-thumb="#arrow" position="-11.5 -0.12 0.29" rotation="20 90 3"></a-entity>
</a-entity>
<!-- Camera + cursor. -->
<a-camera rotation="0 90 0" wasd-controls-enabled="false">
<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__mouseenter="_event: mouseenter; color: springgreen"
event-set__mouseleave="_event: mouseleave; color: black"
raycaster="objects: .clickable"></a-cursor>
<a-text value="PPC VR Tour made by Andrey Kotliar and Ivan Shapovalov" position="0 -0.80 -1" wrapcount="100" width="1" align="center" text="wrapCount: 50"></a-text>
</a-camera>
</a-scene>
</body>
</html>