This repository has been archived by the owner on May 11, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index3.html
111 lines (107 loc) · 4.24 KB
/
index3.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
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>360° Image Gallery</title>
<meta name="description" content="360° Image Gallery - A-Frame" />
<script src="https://aframe.io/releases/1.0.4/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>
<!-- Image link template to be reused. -->
<script id="link" type="text/html">
<a-entity
class="link"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; src: ${thumb}"
event-set__mouseenter="scale: 1.2 1.2 1"
event-set__mouseleave="scale: 1 1 1"
event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"
proxy-event="event: click; to: #image-360; as: fade"
sound="on: click; src: #click-sound"
></a-entity>
</script>
</head>
<body>
<a-scene>
<a-assets>
<!-- tour1 is Matterport "explore uncle jons soap shop" https://my.matterport.com/show/?m=5CWRGeBKFAH
tour2 is Tourmkr "Lilac Clothing Company" https://tourmkr.com/F1dEzXDt62/27783866p&300.32h&89.25t
tour3 is icarusaerial "SBY Aerial Tour" https://tour.icarusaerial.space/tours/ZR6WqZbBQr -->
<img
id="tour1"
crossorigin="anonymous"
src="https://d3i9te5634opuo.cloudfront.net/DoveHill360-1.JPG"
/>
<img
id="tour1-thumb"
crossorigin="anonymous"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg"
/>
<img
id="tour2-thumb"
crossorigin="anonymous"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg"
/>
<img
id="tour3-thumb"
crossorigin="anonymous"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg"
/>
<audio
id="hover-sound"
crossorigin="anonymous"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"
></audio>
<img
id="tour2"
crossorigin="anonymous"
src="https://d3i9te5634opuo.cloudfront.net/DoveHill360-2.JPG"
/>
<img
id="tour3"
crossorigin="anonymous"
src="https://d3i9te5634opuo.cloudfront.net/DoveHill360-3.JPG"
/>
</a-assets>
<!-- 360-degree image. -->
<a-sky
id="image-360"
radius="10"
src="#tour1"
animation__fade="property: components.material.material.color; type: color; from: #FFF; to: #000; dur: 300; startEvents: fade"
animation__fadeback="property: components.material.material.color; type: color; from: #000; to: #FFF; dur: 300; startEvents: animationcomplete__fade"
></a-sky>
<!-- Image links. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
<a-entity
template="src: #link"
data-src="#tour2"
data-thumb="#tour2-thumb"
></a-entity>
<a-entity
template="src: #link"
data-src="#tour1"
data-thumb="#tour1-thumb"
></a-entity>
<a-entity
template="src: #link"
data-src="#tour3"
data-thumb="#tour3-thumb"
></a-entity>
</a-entity>
<!-- Camera + cursor. -->
<a-entity camera look-controls wasd-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__mouseenter="_event: mouseenter; color: springgreen"
event-set__mouseleave="_event: mouseleave; color: black"
raycaster="objects: .link"
></a-cursor>
</a-entity>
</a-scene>
</body>
</html>