-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
258 lines (215 loc) · 6.02 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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YouTube VR</title>
<script src="js/libs/combined.min.js"></script>
<script src="js/libs/CSS3DRenderer.js"></script>
<script src="js/threex.webcamtexture.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.24/firebase.js"></script>
<script src="js/VidScreen.js"></script>
<script src="js/helpers.js"></script>
<script src="js/config.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<style>
/* keeping style block in body to make it easier to see the relationship between elements */
/* Container is nothing special; it's the element that is made full screen.
* When non-fullscreen, you can add transforms to this element to make the scene
* make sense in 2D (instead of being centered around the top left). That transform
* will cascade down to children when fullscreen though, so make sure to remove it when
* entering fullscreen. There's a -moz-full-screen selector that's useful for this.
*/
body {
background-color: #000;
width: 100%;
height: 100%;
overflow: hidden;
padding: 0px;
margin: 0px;
}
#bar {
padding: 7px;
}
#url {
font-size: 16px;
width: 450px;
}
#go {
font-size: 16px;
}
#error-msg {
color: #fff;
font-family: sans-serif;
font-size: 14px;
line-height: 18px;
margin-top: 6px;
}
#container {
}
#container:not(:-moz-full-screen) {
/* this is just to move the scene to the visible area when not in fullscreen VR */
transform: translate(300px, 300px) rotateX(180deg);
perspective: 1000px;
}
/* All threed-class elements have preserve-3d; preserve-3d is NOT inherited. (There's an open
* discussion on w3-style about adding a new transform-style that is like preserve-3d but is
* inherited.)
*
* position: absolute; and 0,0 is also set because we'll position these elements fully using
* 3D transforms. Their CSS position is irrelevant for us. Without this, their CSS position
* will come into play as well as their transform.
*
* When in fullscreen VR, the 0,0,0 position is at the center of the viewport and not the top
* left.
*
* We don't modify the original transform-origin here (50% 50% 0), because that can be useful
* for moving elements around by their center point. But it could also be set to 0,0,0 to
* make it completely clear exactly where/how 3D objects are moving.
*/
.threed {
transform-style: preserve-3d;
position: absolute;
top: 0; left: 0;
}
/* The camera div just serves as a way to set up a modelview transform for the entire rest of the
* scene. The transform that's set on it needs to be the *inverse* of where you want the camera
* to be; that is, if you want the camera to be at (0, 0, 500), then the transform needs to be
* set to (0, 0, -500). The transform-origin is set here because we want to go from the origin
*/
#camera {
transform-origin: 0 0 0;
/* the transform itself is set programatically, since it needs to take into account the HMD orientation */
}
.pane {
width: 200px;
height: 300px;
overflow: hidden;
}
.pane > img {
width: 200px;
height: 300px;
}
/* XXX The translate -100,-150 moves the center of each element to 0,0. transform-origin
* at 50% 50% should take care of that, but I'm not sure why it's not. (It transforms
* by half the width/height).
*/
#main_pane {
width: 640px;
min-height: 360px;
}
#second_pane {
width: 640px;
min-height: 360px;
}
#third_pane {
width: 640px;
min-height: 360px;
}
#help_pane {
width: 640px;
height: 360px;
transform: rotateY(90deg) translate3d(0, 0, 400px) translate(-320px, -180px);
color: #fff;
/*text-align: center;*/
font-size: 24px;
background-color: #444;
display: none;
}
#pane2 {
background: blue;
transform: rotateY(90deg) translate3d(0, 0, 500px) translate(-100px, -150px);
}
#text1 {
width: 640px;
color: white;
font-family: Helvetica, sans-serif;
font-size: 36px;
transform: rotateY(0deg) translate3d(0, 0, 490px) translate(-320px, -220px);
}
#bottom {
width: 800px; height: 800px;
transform: translate(-400px, 400px) rotateX(-90deg) translateZ(-200px);
color: red;
font-size: 100px;
}
#bottom #logo {
display: block;
margin: 100px auto;
}
#bot-bar {
}
#bot-bar.fade {
opacity: 0.3;
}
/* YT red: #cd201f */
.progress-bar {
margin-top: 3px;
background-color: #444;
width: 640px;
height: 5px;
}
.progress-bar .loaded {
background-color: #888;
}
.progress-bar .progress {
display: block;
background-color: #cd201f;
height: 100%;
width: 0%;
}
.progress-bar .marker {
width: 16px;
height: 16px;
background-color: white;
border-radius: 9px;
float: right;
position: relative;
top: -5px;
left: 16px;
display: none;
/*transform: translate3d(0, 0, -8px) translate(16px, 360px);
transform-style: preserve-3d;*/
}
#webvr-msg {
width: 100%;
background-color: #00FFFF;
padding: 5px;
font-family: sans-serif;
font-size: 14px;
line-height: 14px;
display: none;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
<div id="webvr-msg">A WebVR enabled browser is required, which can be downloaded <a href="http://blog.bitops.com/blog/2014/08/20/updated-firefox-vr-builds/">here</a>.</div>
<div id="bar">
<input id="url" placeholder="video URL" value="http://www.youtube.com/embed/OlXrjTh7vHc">
<input type="button" id="go" value="Go">
<div id="error-msg"></div>
</div>
<div id="container" class="container">
<!-- This is an inner element that will serve as a camera, moving its children around in the scene.
This and all its children will have transform-style: preserve-3d set via the class, as well as
transform-origin set to 0,0 -->
<div id="camera" class="threed">
<div id="main_pane" class="threed"></div>
<div id="second_pane" class="threed"></div>
<div id="third_pane" class="threed"></div>
<div id="help_pane" class="threed">
<div>help options here</div>
<video id="video" width="320" height="240"></video>
</div>
<div id="bottom" class="threed">
<img id="logo" src="img/YouTube-logo-light.png">
</div>
</div>
</div>
</body>
</html>