forked from alblaine/360-tutorial
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgallery.html
142 lines (114 loc) · 7.52 KB
/
gallery.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<html>
<head>
<meta charset="utf-8">
<title>Virtual Tour App</title>
<meta name="description" content="webVR">
<script src="./js/aframe.js"></script>
</head>
<body>
<a-scene auto-enter-vr>
<a-assets>
<img id="close1" src="assets/close-circled.png">
<img id="home1" src="assets/home.png">
<!-- Images for gallery -->
<img id="first" src="assets/1.jpg"> <!--Adding 1st image to assets -->
<img id="second" src="assets/2.jpg"> <!--Adding 2nd image to assets -->
<!--Task 2: Add Assets for remaining images start at line 19..
Make sure they have different id.
And src needs to be the path of the file in this case "assets/imagename.jpg"-->
<!-- Hint: You can look at the assets already added for other images.-->
</a-assets>
<a-image id="closeimage" src="#close1" position="-1 -4.5 -10" scale="1.3 1.3 1.3"></a-image>
<a-image id="homepage" src="#home1" position="2 -4.5 -10" scale="1.3 1.3 1.3"></a-image>
<!--Task 3: Add the curved-image components for remaining 4 images here. -->
<!--
Remember Since you have connected there locations using <assets> you can use the id in the assets and src in the component need to be same
Example: If your asset is <img id="first" src="assets/1.jpg">
Then your corresponding curved-image should be <a-curvedimage id="1" src="#first" transparent="true" height="3" radius="5" theta-length="40" rotation="0 280 0" position="0 0.8 0"> </a-curvedimage>
See that id in assets is same as src in your curved-image component.
-->
<a-curvedimage id="one" src="#first" transparent="true" height="3" radius="5" theta-length="40" rotation="0 280 0" position="0 0.8 0"> </a-curvedimage>
<a-curvedimage id="two" src="#second" transparent="true" height="3" radius="5" theta-length="40" rotation="0 230 0" position="0 0.8 0"> </a-curvedimage>
<!-- <a-curvedimage id="three" src="#third" transparent="true" height="3" radius="5" theta-length="40" rotation="0 180 0" position="0 0.8 0"> </a-curvedimage>
<a-curvedimage id="four" src="#fourth" transparent="true" height="3" radius="5" theta-length="40" rotation="0 130 0" position="0 0.8 0"> </a-curvedimage>
<a-curvedimage id="five" src="#fifth" transparent="true" height="3" radius="5" theta-length="40" rotation="0 80 0" position="0 0.8 0"> </a-curvedimage>
<a-curvedimage id="six" src="#sixth" transparent="true" height="3" radius="5" theta-length="40" rotation="0 30 0" position="0 0.8 0"> </a-curvedimage>
<!--Camera and Cursor -->
<a-entity position="0 1 3">
<a-entity camera="fov:80" look-controls wasd-controls>
<a-entity position="0.15 0 -3" scale="0.15 0.15 0.15" geometry="primitive: ring; radiusOuter: 0.50;radiusInner: 0.30;" material="color: #000; shader: flat" cursor="maxDistance: 100; fuse: true; timeout:800; fuseTimeout: 3000">
<a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
<a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.2 0.2 0.2" dur="1500"></a-animation>
</a-entity>
</a-entity>
</a-entity>
<a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1"></a-light>
<a-light type="ambient" color="#fff"></a-light>
<!-- Sky color is the Background of your Webpage-->
<a-sky color="rgb(200,200,200)" opacity="0.5"></a-sky>
</a-scene>
<script>
AFRAME.registerComponent('auto-enter-vr', {
init: function(){
this.el.sceneEl.enterVR();
}
});
(function () {
// switch to stereoscopic mode directly on page load, this needs to be after the a-scene loads.
var scene = document.querySelector('a-scene');
if (scene.hasLoaded) {
scene.enterVR();
} else {
scene.addEventListener('loaded', function () {
setTimeout(function () {
scene.enterVR();
}, 1000);
});
};
})();
//TO DO 5:
//Now We need to then connect these images to their 360 view. To Do so we use Javascript.
//you can refer the code below, How we link the 1st and 2nd image to their 360 views.
//Linking the 1st image to its 360 view.
document.querySelector("#one").addEventListener('click', function() {
window.location.href = "demos/1/index.html";
});
//Linking the 2nd image to its 360 view.
document.querySelector("#two").addEventListener('click', function() {
window.location.href = "demos/2/index.html";
});
//Now to finish the TO DO 5 you need to add similar code for the 4 images that you just added.
//REMEMBER: That the id used in the curved-image component should be similar to the querySelector in your javascript.
//Example: If your curved image component is <a-curvedimage id="one" src="#first" transparent="true" height="3" radius="5" theta-length="40" rotation="0 280 0" position="0 0.8 0"> </a-curvedimage>
//Then your javascript will be document.querySelector("#one").addEventListener('click', function() {window.location.href = "demos/1/index.html";});
//Linking the 3rd image to its 360 view.
//Linking the 4th image to its 360 view.
//Linking the 5th image to its 360 view.
//Linking the 6th image to its 360 view.
//
// document.querySelector("#three").addEventListener('click', function() {
// window.location.href = "demos/3/index.html";
// });
// //Linking the 4th image to its 360 view.
// document.querySelector("#four").addEventListener('click', function() {
// window.location.href = "demos/4/index.html";
// });
// //Linking the 5th image to its 360 view.
// document.querySelector("#five").addEventListener('click', function() {
// window.location.href = "demos/5/index.html";
// });
// //Linking the 6th image to its 360 view.
// document.querySelector("#six").addEventListener('click', function() {
// window.location.href = "demos/6/index.html";
// });
//Close button used for going back one level up
document.querySelector("#closeimage").addEventListener('click', function() {
window.location.href = "index.html";
});
//Home Button used for going back to the instructions page (index.html)
document.querySelector("#homepage").addEventListener('click', function() {
window.location.href = "index.html";
});
</script>
</body>
</html>