tforgione/3d-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial commit of nodejs

Browse Source
This commit is contained in:
Thomas FORGIONE
2015-05-05 11:56:35 +02:00
parent 4cc35587ef
commit afe1d124ed
35 changed files with 336 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
views/404.html Normal file
View File

@@ -0,0 +1,10 @@
<%{ 'main' }%>
<%{ title %>404<%} %>
<%{ content %>
<section>
<h2>Error 404</h2>
<p>
There is nothing there... maybe you want to go back to <a href="<%= urls.index %>">the index</a>
</p>
</section>
<%} %>

11
views/bouncing/index.html Normal file
View File

@@ -0,0 +1,11 @@
<%{ '../withjs' }%>
<%{ title %>Bouncing cube<%} %>
<%{ extrajs %><script src="/static/js/bouncing/BouncingMain.js"></script><%} %>
<%{ content %>
<h2>Bouncing cube</h2>
<p>Click on the cube to make it jump !</p>
<div id="container"></div>
<%} %>

43
views/index.html Normal file
View File

@@ -0,0 +1,43 @@
<%{ './main' }%>
<%{ title %>Index<%} %>
<%{ content %>
<h2>Index</h2>
<ul>
<li>
<a href="/bouncing/">A bouncing cube that jumps when you click on it</a>
<p>Jumps and bounce when you click on it.</p>
</li>
<li>
<a href="/multisphere/">Sphere with multi-resolution</a>
<p>Lots of obj files loaded and displayed. When you click
somewhere, the current obj is hidden and the next one, with a
better resolution is shown.</p>
</li>
<li>
<a href="/prototype/">A proto of the real thing</a>
<p>You can move the camera with the arrow keys and move the angle
of the camera with 2, 4, 6 and 8 (the arrows of the numpad), or you
can do a drag-and-drop like (click on the mouse to grap the scene,
and move the mouse to rotate the camera). You can also select a
camera by clicking on the red part of it, and get back to the free
camera by clicking again. You can also select a camera by simply
clicking on the object you want to see. The program will choose the
camera that you want, and move to it progressively.</p>
</li>
<li>
<a href="/stream/">Streaming simulation</a>
<p>A mesh of a sphere is fully loaded, and displayed progressively.
This test is here to prove that we can dynamically add vertices and
faces to a mesh.</p>
</li>
</ul>
<%} %>

49
views/main.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="/static/css/syntax.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic" />
<%{{ extrahead }}%>
<title><%= title %> - <%{{ title }}%></title>
</head>
<body>
<nav id="nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="/">3DUI</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="<%= urls.bouncing %>">Bouncing cube</a></li>
<li><a href="<%= urls.multisphere %>">Multi-sphere</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Prototypes <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="<%= urls.arrows %>">Arrows</a></li>
<li><a href="<%= urls.viewports %>">Viewports</a></li>
</ul>
</li>
<li><a href="<%= urls.stream %>">Streaming simulator</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<section class="container" id="main-section">
<%{{ content }}%>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<%{{ js }}%>
<%{{ extrajs }}%>
</body>
</html>

13
views/multisphere/index.html Normal file
View File

@@ -0,0 +1,13 @@
<%{ '../withjs' }%>
<%{ title %>Multi-sphere<%} %>
<%{ extrajs %><script src="/static/js/multisphere/MultiSphere.js"></script><%} %>
<%{ content %>
<h2>Multiresolution sphere</h2>
<p>This is the first test of multi-resolution. In fact, it's not really one
multi-resolution sphere but many spheres with different resolutions. You can
change resolution by clicking on the canvas.</p>
<div id="container"></div>
<%} %>

14
views/prototype/index.html Normal file
View File

@@ -0,0 +1,14 @@
<%{ '../main' }%>
<%{ title %>Prototypes<%} %>
<%{ content %>
<h2>Index</h2>
There are two prototypes here :
<ul>
<li><a href="arrows/">One with arrows</a></li>
<li><a href="viewports/">One with viewports</a></li>
</ul>
<%} %>

48
views/prototype/prototype.html Normal file
View File

@@ -0,0 +1,48 @@
<%{ '../withjs' }%>
<%{ title %>Prototype with old cameras<%} %>
<%{ extrajs %><%- extrajs %><%} %>
<%{ extrahead %><link rel="stylesheet" href="/static/css/prototype.css" /><%} %>
<%{ content %>
<div id="main-div">
<!--<div style="display: none;">-->
<h2>3D Interface</h2>
<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>
<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>
<button class="btn btn-primary" id="full" style="margin-bottom: 10px; display: none;">Fullscreen</button>
<button class="btn btn-primary" id="reset" style="margin-bottom:10px">Reset camera</button>
<button class="btn btn-default" id="undo" style="margin-bottom:10px">
<span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
</button>
<button class="btn btn-default" id="redo" style="margin-bottom:10px">
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
</button>
<input type="checkbox" id="fullarrow" style="margin-bottom:10px">
<label for="fullarrow">Full arrow</label>
<input type="checkbox" id="collisions" style="margin-bottom:10px" checked>
<label for="collisions">Collisions</label>
<input type="checkbox" id="showarrows" style="margin-bottom:10px" checked>
<label for="showarrows">Show arrows</label>
</div>
<!-- </div> -->
<div id="container" style="padding: 0px; margin: 0px;" tabindex="1"></div>
<%} %>

16
views/stream/index.html Normal file
View File

@@ -0,0 +1,16 @@
<%{ '../withjs' }%>
<%{ title %>Streaming simulator<%} %>
<%{ extrajs %>
<script>params = {}; params.get= {}; params.get.res = <%= resolution %>;</script>
<script src="/static/js/stream/main.js"></script>
<%} %>
<%{ content %>
<h2>Streaming simulator</h2>
<p>In fact, it's not really streaming. The sphere is fully preloaded and then, a
mesh is created and vertices and faces are dynamically added to this mesh as
time goes by.</p>
<div style="border-width:1px; border-style: solid;" id="container"></div>
<%} %>

22
views/withjs.html Normal file
View File

@@ -0,0 +1,22 @@
<%{ 'main.html' }%>
<%{ js %>
<script src="/static/js/three.js"></script>
<script src="/static/js/Tools.js"></script>
<script src="/static/js/three/stats.min.js"></script>
<script src="/static/js/three/DDSLoader.js"></script>
<script src="/static/js/three/MTLLoader.js"></script>
<script src="/static/js/three/OBJLoader.js"></script>
<script src="/static/js/three/OBJMTLLoader.js"></script>
<script src="/static/js/three/OrbitControls.js"></script>
<script src="/static/js/Cube.js"></script>
<script src="/static/js/ProgressiveSphere.js"></script>
<script src="/static/js/Camera.js"></script>
<script src="/static/js/FixedCamera.js"></script>
<script src="/static/js/OldFixedCamera.js"></script>
<script src="/static/js/BouncingCube.js"></script>
<script src="/static/js/BufferGeometryToGeometry.js"></script>
<script src="/static/js/PointerCamera.js"></script>
<script src="/static/js/CameraContainer.js"></script>
<script src="/static/js/Hermite.js"></script>
<script>static_path="/static/"</script>
<%} %>