forked from alblaine/360-tutorial
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (63 loc) · 3.08 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
<!-- Instruction page-->
<html>
<head>
<meta charset="utf-8">
<title> Virtual Tour App</title>
<meta name="description" content="webVR">
<!-- Aframe -->
<script src="./js/aframe.js"></script>
</head>
<body>
<a-scene auto-enter-vr>
<a-assets>
<img id="Hunt" src="assets/Hunt_Library.jpg">
<img id="close" src="assets/close-circled.png">
<img id="home" src="assets/home.png">
<img id="heading" src="assets/heading.png">
<img id="text1" src="assets/text_new.jpg">
</a-assets>
<a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1" ></a-light>
<a-light type ="ambient" color="#fff"></a-light>
<a-sky color="rgb(200,200,200)" opacity="0.5"></a-sky>
<a-curvedimage id="o1" src="#Hunt" transparent="true" height="1" radius="2" theta-length="36" scale="12 12 12" rotation="0 160 0" position="-10 -7 0"> </a-curvedimage>
<a-image src="#heading" scale="7 0.5 1" position="0 2 -3"></a-image>
<a-image src="#text1" scale="3 2 1" position="1.7 0.7 0" ></a-image>
<a-box position="0.5 2.5 -5" width="14" height="0.2" depth="0.1" color="#000"></a-box>
<a-box position="0.5 1.5 -5" width="14" height="0.2" depth="0.1" color="#000"></a-box>
<a-box position="0.5 -3.4 -5" width="14" height="0.2" depth="0.1" color="#000"></a-box>
<a-box position="7.5 -0.45 -5" width="0.2" height="6.1" depth="0.1" color="#000"></a-box>
<a-box position="0.2 -0.9 -5" width="0.2" height="5" depth="0.1" color="#000"></a-box>
<a-box position="-6.5 -0.45 -5" width="0.2" height="6.1" depth="0.1" color="#000"></a-box>
<a-entity position="0 2 4">
<a-entity camera="fov:80" look-controls wasd-controls>
<a-entity position="0 0.5 -3" scale="0.2 0.2 0.2" 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-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);
});
};})();
document.querySelector("#o1").addEventListener('click', function() {
window.location.href = "gallery.html";
});
</script>
</body>
</html>