-
Notifications
You must be signed in to change notification settings - Fork 4
/
ar_stereo.html
188 lines (168 loc) · 7.21 KB
/
ar_stereo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>3Dブロック崩し AR</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/startscreen.css" rel="stylesheet">
<!--script data-main="js/common.js" src="js/require.js"></script-->
<script src="js/require.js"></script>
<!-- Custom CSS -->
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
margin: 0px;
overflow: hidden;
}
#example {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0;
margin: 0;
width: 100%;
}
video {
object-fit: cover;
overflow: hidden;
}
#left {
position: absolute;
left: 0px;
top: 0px;
width: 50%;
height: 100%;
overflow: hidden;
text-align: center;
z-index: -2;
}
#right {
position: absolute;
left: 50%;
top: 0px;
width: 50%;
height: 100%;
overflow: hidden;
z-index: -2;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.html">堀矢入研究室五月祭企画</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="">ゲームのルール</a>
</li>
<li>
<a href="./visualization.html">Visualization</a>
</li>
<li>
<a href="./ar.html">AR</a>
</li>
<li>
<a href="http://www.ailab.t.u-tokyo.ac.jp/">堀矢入研究室について</a>
</li>
<li>
<a href="http://phenoxlab.com/?lang=ja">Phenoxについて</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div id="example" class="container">
<div id="left">
<div class="background_div">
<p id="start">あなたの個人情報が奪われた…</p>
<h1>3DBREAKOUT<sub>理不尽と戦え！</sub></h1>
<div id="titles"><div id="titlecontent">
<p class="center">EPISODE I<br>個人情報の反略</p>
<p>東大のサーバー内に正体不明のウィルスが侵入！</p><br>
<p>このままウイルスを野放しにしておくと東大の大事な研究データが破壊されてしまう！</p><br>
<p>そこで我々の研究室はウィルスを倒すために、クアドコプターPhenoxを特別にカスタマイズした。</p><br>
<p>君にはこのPhenoxと力を合わせてウィルスをどうか倒してほしい！</p><br>
</div>
</div>
<div class="instructions-set">
<div class="instructions instructionsidle"> </div>
<div class="instructions instructionsleft"> </div>
<div class="instructions instructionsright"> </div>
<p>
Wii Fitの上に立って重心を左右に動かすことでバーを動かせます。
</p>
</div>
</div>
</div>
<div id="right">
<div class="background_div">
<p id="start">あなたの個人情報が奪われた…</p>
<h1>3DBREAKOUT<sub>理不尽と戦え！</sub></h1>
<div id="titles"><div id="titlecontent">
<p class="center">EPISODE I<br>個人情報の反略</p>
<p>東大のサーバー内に正体不明のウィルスが侵入！</p><br>
<p>このままウイルスを野放しにしておくと東大の大事な研究データが破壊されてしまう！</p><br>
<p>そこで我々の研究室はウィルスを倒すために、クアドコプターPhenoxを特別にカスタマイズした。</p><br>
<p>君にはこのPhenoxと力を合わせてウィルスをどうか倒してほしい！</p><br>
</div>
</div>
<div class="instructions-set">
<div class="instructions instructionsidle"> </div>
<div class="instructions instructionsleft"> </div>
<div class="instructions instructionsright"> </div>
<p>
Wii Fitの上に立って重心を左右に動かすことでバーを動かせます。
</p>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
requirejs.config({
//By default load any module IDs from js/lib
waitSeconds: 0,
baseUrl: 'js/build',
});
requirejs(['ar_stereo'], function () {
});
</script>
</body>
</html>