-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
hyperlink.html
121 lines (95 loc) · 4.11 KB
/
hyperlink.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
<!DOCTYPE html>
<html>
<head>
<title>html2three</title>
<!-- The main stylesheet is used to layout the page for non-VR users -->
<style>
.vrPanel {
margin: 10px 0;
}
/* Do not use "display: none", all objects must take up
space on the page for them to be clickable in VR */
.vrOnly {
visibility: hidden;
}
</style>
<!-- A separate stylesheet is used for objects that are rendered in VR -->
<style id="vrStyles">
.vrPanel {
background: rgba(255,255,255,0.5);
padding: 1em;
border-radius: 1em;
font-size: 200%;
}
.vrPanel h1 {
color: red;
}
.vrPanel h1, h2, h3, .stereoscope {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}
.button {
display: inline-block;
padding: 1em;
font-weight: bold;
color: red;
border: 3px solid red;
margin: 0.5em 0;
}
.centered {
text-align: center;
}
.credits p {
font-size: medium;
}
.credits cite {
font-weight: bold;
display: block;
}
</style>
<!-- Required: The THREE.js library and VREffect are used for rendering -->
<script src="lib/third-party/three/three.min.js"></script>
<script src="lib/third-party/three/VREffect.js"></script>
<!-- Optional: The WebVR Polyfill allows the demo to run on browsers that do not support WebVR -->
<script src="lib/third-party/webvr-polyfill/webvr-polyfill.js"></script>
<!-- Optional: The Leap Motion libraries allow for control of the interface using your hands -->
<script src="https://js.leapmotion.com/leap-0.6.4.min.js"></script>
<script src="https://js.leapmotion.com/leap-plugins-0.1.12.min.js"></script>
<!-- Required: All of the following html2three code is necessary -->
<script src="js/dist-ecma5/MotionTracker.js"></script>
<script src="js/dist-ecma5/Skydome.js"></script>
<script src="js/dist-ecma5/HTMLElements.js"></script>
<script src="js/dist-ecma5/Controllers.js"></script>
<script src="js/dist-ecma5/Soundscape.js"></script>
<script src="js/dist-ecma5/AirCanvas.js"></script>
<script src="js/dist-ecma5/DebugOverlay.js"></script>
<script src="js/dist-ecma5/Main.js"></script>
</head>
<body>
<!-- The body of the page consists of one of more DIVs that can be individually positioned in VR -->
<div id="vrPanelMain" class="vrPanel centered">
<h1>Icebreaker at Work</h1>
<p>
<img src="textures/icebreaker-864.jpg">
</p>
<div class="button" id="goBack">Return</div>
</div>
<div id="vrPanelCredits" class="vrPanel centered credits">
<h2>Image Credit</h2>
<p>
<cite>"Icebreaker at Work"</cite>https://www.oldbookillustrations.com/illustrations/icebreaker
</p>
</div>
<script>
function goBack() {
window.location.href = "index.html";
}
document.getElementById("goBack").addEventListener("click", goBack);
/* Define the VR layout using the HTML2VR library */
HTML2VR.init();
HTML2VR.setBackground("textures/sky-day.jpg");
HTML2VR.setStylesheet("#vrStyles");
HTML2VR.add("#vrPanelMain", {azimuth: 0});
HTML2VR.add("#vrPanelCredits", {azimuth: 45});
</script>
</body>
</head>