Resizable stuff ! Now it's cool
This commit is contained in:
parent
d113bac40a
commit
0d44b36cfb
|
@ -13,6 +13,7 @@ module.exports.arrows = function(req, res) {
|
|||
|
||||
res.render('prototype.jade', res.locals, function(err, result) {
|
||||
res.send(result);
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -26,23 +26,73 @@ block extrahead
|
|||
link(rel="stylesheet" href="/static/css/prototype.css")
|
||||
|
||||
block content
|
||||
#main-div
|
||||
h2 3D Interface
|
||||
#main-div.panel-group
|
||||
#instructions.panel.panel-default(style={'margin-top':'15px', 'margin-bottom':'15px'})
|
||||
.panel-heading
|
||||
h4.panel-title
|
||||
a(href="#collapseInstructions", data-target="#collapseInstructions", data-toggle="collapse",onclick="setTimeout(onWindowResize,500);") Instructions
|
||||
|
||||
p
|
||||
| This is the prototype of a 3D interface. You can move the camera with
|
||||
| the arrow keys of your keyboard, and change the angle of the camera by
|
||||
| dragging and dropping the scene around it (you can also use your
|
||||
| numpad, 2 to look lower, 8 to look higher, 4 to look on the left and 6
|
||||
| to look on the right, but if you're more comfortable with non-numpad
|
||||
| keys, you can also use i for up, j for left, k for down, and l for
|
||||
| right).
|
||||
.panel-collapse.collapse.in#collapseInstructions
|
||||
.panel-body
|
||||
p
|
||||
| This is the prototype of a 3D interface. You can move
|
||||
| the camera with the arrow keys of your keyboard, and
|
||||
| change the angle of the camera by dragging and
|
||||
| dropping the scene around it (you can also use your
|
||||
| numpad, 2 to look lower, 8 to look higher, 4 to look
|
||||
| on the left and 6 to look on the right, but if you're
|
||||
| more comfortable with non-numpad keys, you can also
|
||||
| use i for up, j for left, k for down, and l for
|
||||
| right).
|
||||
|
||||
p
|
||||
| Recommended views are displayed with a transparent red arrow. They
|
||||
| disappear when you come closer to them, and you can automatically move
|
||||
| to them by clicking on them. You can reset the camera at anytime by
|
||||
| clicking on the reset button.
|
||||
p
|
||||
| This is a re-creation of the Bob-omb Battlefield
|
||||
| level from Super Mario 64, and with its 8 red coins.
|
||||
| You can click on them to get them, and once you got
|
||||
| them all, you get... well you get nothing but the
|
||||
| sound of the star is played (but the star doesn't
|
||||
| appear... sorry guys)
|
||||
|
||||
p
|
||||
| It contains <em>recommended views</em> : 3D objects
|
||||
| here to guide you through this coin search.
|
||||
|
||||
if cameraStyle == 'arrows'
|
||||
|
||||
p
|
||||
| Recommended views are displayed with a
|
||||
| transparent blue arrow. They disappear when you
|
||||
| come closer to them, and shows the motion between
|
||||
| your current position and the recommendation.
|
||||
|
||||
else if cameraStyle == 'viewports'
|
||||
|
||||
p
|
||||
| Recommended views are displayed with a
|
||||
| transparent red rectangle and some lines.
|
||||
| Basically, it represents the position of a camera
|
||||
| (the point at the extramities of the lines
|
||||
| represents the optical center, and the red
|
||||
| rectangle represents the image plane).
|
||||
|
||||
else if cameraStyle == 'reverse'
|
||||
|
||||
p
|
||||
| Recommended views are displayed with a strange
|
||||
| blue object. Basically, the curve at the
|
||||
| begining of this weird object shows the motion
|
||||
| that starts from where you are and leads to the
|
||||
| recommended view, and the extremity is in fact an
|
||||
| object representing a camera.
|
||||
|
||||
p
|
||||
| You can click on a recommendation to move to the
|
||||
| recommended viewpoint. The recommendation will become
|
||||
| more and more transparent as you come closer, and
|
||||
| will disappear when you reach it.
|
||||
|
||||
p
|
||||
| You may now <a href="#collapseInstructions" data-target="#collapseInstructions" data-toggle="collapse" onclick="setTimeout(onWindowResize,500);">hide this panel</a> and start playing !
|
||||
|
||||
button#full.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom': '10px', display: 'none'}) Fullscreen
|
||||
button#reset.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera
|
||||
|
|
|
@ -15,3 +15,14 @@ html, body {
|
|||
margin: 0 auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.panel-heading a:after {
|
||||
font-family:'Glyphicons Halflings';
|
||||
content:"\e114";
|
||||
float: right;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.panel-heading a.collapsed:after {
|
||||
content:"\e080";
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue