From a48635a642304e4fbe814792ef79a34d3b6818c5 Mon Sep 17 00:00:00 2001
From: Thomas FORGIONE <thomas.forgione@gmail.com>
Date: Mon, 27 Apr 2015 14:54:40 +0200
Subject: [PATCH] Adjustable size of canvas... fullscreen mode doesn't work

---
 _layouts/main.html           |   3 +-
 prototype/index.md           |  11 ++-
 static/css/style.css         |  14 ++++
 static/js/CameraContainer.js |   1 +
 static/js/prototype/main.js  | 152 ++++++++++++++++++++++++-----------
 5 files changed, 134 insertions(+), 47 deletions(-)
diff --git a/_layouts/main.html b/_layouts/main.html
index 7c4ab26..23e4047 100644
--- a/_layouts/main.html
+++ b/_layouts/main.html
@@ -7,10 +7,11 @@
         <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" />
+        {{ page.extrahead }}
         <title>3DUI - {{ page.title }}</title>
     </head>
     <body>
-        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <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">
diff --git a/prototype/index.md b/prototype/index.md
index 664aa36..0fcaf5b 100644
--- a/prototype/index.md
+++ b/prototype/index.md
@@ -2,20 +2,27 @@
 title: Prototype
 layout: withjs
 extrajs: <script src="/static/js/prototype/main.js"></script>
+extrahead: <link rel="stylesheet" href="/static/css/prototype.css" />
 ---
-## 3D Interface
+<div id="main-div">
 
+<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;">Fullscreen</button>
 <button class="btn btn-primary" id="reset" style="margin-bottom:10px">Reset camera</button>
@@ -26,4 +33,6 @@ button.
 <input type="checkbox" id="showarrows" style="margin-bottom:10px" checked>
 <label for="showarrows">Show arrows</label>
 
+</div>
+
 <div id="container" style="padding: 0px; margin: 0px;"></div>
diff --git a/static/css/style.css b/static/css/style.css
index 2a34acf..12f2534 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -2,3 +2,17 @@ body {
     padding-top: 50px;
     text-align: justify;
 }
+
+html, body {
+    height: 100%;
+}
+
+#main-section {
+    min-height: 100%;
+}
+
+#container {
+    position: absolute;
+    margin: 0 auto;
+    min-height: 100%;
+}
diff --git a/static/js/CameraContainer.js b/static/js/CameraContainer.js
index c5534b0..515b42a 100644
--- a/static/js/CameraContainer.js
+++ b/static/js/CameraContainer.js
@@ -15,6 +15,7 @@ CameraContainer.prototype.mainCamera = function(id) {
 }
 
 CameraContainer.prototype.forEach = function(callback) {
+    callback(this.pointerCamera);
     this.cameras.forEach(callback);
 }
 
diff --git a/static/js/prototype/main.js b/static/js/prototype/main.js
index 3bc619a..8a14dfd 100644
--- a/static/js/prototype/main.js
+++ b/static/js/prototype/main.js
@@ -12,7 +12,25 @@ var ctx2d;
 
 var loader;
 
-var container_size = {width: 1024, height: 576};
+var main_section = document.getElementById('main-section');
+var offset = function() {
+    return
+        document.getElementById('nav').offsetHeight
+        + document.getElementById('main-div').offsetHeight;
+}
+
+console.log(document.getElementById('main-div').offsetHeight);
+var container_size = {
+    width: function() { return main_section.clientWidth; },
+    height: function() {
+        return main_section.clientHeight
+            - document.getElementById('nav').offsetHeight
+            - document.getElementById('main-div').offsetHeight;
+    }
+};
+
+console.log(container_size.width(), container_size.height());
+
 var prev = {x:0, y:0, go:false};
 var showArrows = true;
 var beenFullscreen = false;
@@ -49,19 +67,19 @@ function init() {
 
     // on initialise le moteur de rendu
     container = document.getElementById('container');
-    container.style.height = container_size.height + 'px';
-    container.style.width = container_size.width + 'px';
+    container.style.height = container_size.height() + 'px';
+    container.style.width = container_size.width() + 'px';
     renderer = new THREE.WebGLRenderer({alpha:true});
-    renderer.setSize(container_size.width, container_size.height);
+    renderer.setSize(container_size.width(), container_size.height());
+    // renderer.setSize(container_size.width(), container_size.height());
     renderer.shadowMapEnabled = true;
     renderer.setClearColor(0x87ceeb);
-    renderer.sortObjects = false;
 
     canvas = document.createElement('canvas');
     canvas.style.position ="absolute";
     canvas.style.cssFloat = 'top-left';
-    canvas.width = container_size.width;
-    canvas.height = container_size.height;
+    canvas.width = container_size.width();
+    canvas.height = container_size.height();
     ctx2d = canvas.getContext('2d');
     ctx2d.lineWidth = 1;
 
@@ -81,7 +99,7 @@ function init() {
 
     // init light
     var directional_light = new THREE.DirectionalLight(0xdddddd);
-    directional_light.position.set(1, 0.5, 1).normalize();
+    directional_light.position.set(1, 2.5, 1).normalize();
     directional_light.castShadow = false;
     scene.add(directional_light);
 
@@ -89,7 +107,7 @@ function init() {
     scene.add(ambient_light);
 
     // on initialise la camera que l’on place ensuite sur la scène
-    var camera1 = new PointerCamera(50, container_size.width / container_size.height, 0.01, 100000, container);
+    var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container);
     camera1.speed = 0.001;
     camera1.reset();
     scene.add(camera1);
@@ -109,6 +127,8 @@ function init() {
 
     // THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
     var loader = new THREE.OBJMTLLoader();
+
+
     loader.load( static_path + 'data/castle/princess peaches castle (outside).obj',
                  static_path + 'data/castle/princess peaches castle (outside).mtl',
     function ( object ) {
@@ -155,28 +175,64 @@ function init() {
         });
     }, onProgress, onError );
 
-    // loader.load( static_path + 'data/bobomb/bobomb battlefeild.obj',
-    //              static_path + 'data/bobomb/bobomb battlefeild.mtl',
-    //         function ( object ) {
-    //             // object.position.z -= 10.9;
-    //             // object.position.y += 0.555;
-    //             // object.position.x += 3.23;
+    loader.load( static_path + 'data/bobomb/bobomb battlefeild.obj',
+                 static_path + 'data/bobomb/bobomb battlefeild.mtl',
+            function ( object ) {
+                // object.position.z -= 10.9;
+                // object.position.y += 0.555;
+                // object.position.x += 3.23;
 
-    //             var theta = 0.27;
-    //             object.rotation.y = Math.PI - theta;
+                var theta = 0.27;
+                object.rotation.y = Math.PI - theta;
 
-    //             object.up = new THREE.Vector3(0,0,1);
-    //             collidableObjects.push(object);
-    //             scene.add(object);
-    //             object.traverse(function (object) {
-    //                 if (object instanceof THREE.Mesh) {
-    //                     object.material.side = THREE.DoubleSide;
-    //                     console.log(object.geometry.vertices.length);
-    //                     object.geometry.mergeVertices();
-    //                     object.geometry.computeVertexNormals();
-    //                 }
-    //             });
-    //         }, onProgress, onError );
+                object.up = new THREE.Vector3(0,0,1);
+                collidableObjects.push(object);
+                scene.add(object);
+                object.traverse(function (object) {
+                    if (object instanceof THREE.Mesh) {
+                        object.material.side = THREE.DoubleSide;
+                        console.log(object.geometry.vertices.length);
+                        object.geometry.mergeVertices();
+                        object.geometry.computeVertexNormals();
+                        if (object.material.name === 'Material.071_574B138E_c.bmp' ||
+                            object.material.name === 'Material.070_41A41EE3_c.bmp') {
+                            object.material.transparent = true;
+                        }
+
+                    }
+                });
+            }, onProgress, onError );
+
+    loader.load( static_path + 'data/star/GrandStar.obj',
+                 static_path + 'data/star/GrandStar.mtl',
+    function ( object ) {
+        object.position.z -= 10.9;
+        object.position.y += 0.555;
+        object.position.x += 3.23;
+
+        var theta = 0.27;
+        object.rotation.y = Math.PI - theta;
+
+        object.up = new THREE.Vector3(0,0,1);
+        scene.add(object);
+        collidableObjects.push(object);
+        object.traverse(function (object) {
+            if (object instanceof THREE.Mesh) {
+                object.scale.set(0.005,0.005,0.005);
+                object.position.x = 13;
+                object.position.z = -35;
+                object.position.y = 30;
+
+                object.rotation.z = Math.PI/2;
+                object.rotation.x = Math.PI/2;
+                object.rotation.y = Math.PI;
+                object.material.side = THREE.DoubleSide;
+                object.geometry.mergeVertices();
+                object.geometry.computeVertexNormals();
+                object.raycastable = true;
+            }
+        });
+    }, onProgress, onError );
 
     createCamera(
             new THREE.Vector3(-3.349895207953063, 5.148106346852601, 0.3365943929701533),
@@ -255,8 +311,8 @@ function fullscreen() {
 function stopFullscreen() {
     container.style.position = "";
     container.style.cssFloat = "";
-    container.style.width = container_size.width + "px";
-    container.style.height = container_size.height + "px";
+    container.style.width = container_size.width() + "px";
+    container.style.height = container_size.height() + "px";
     container.style.overflow = "";
 
     // canvas.style.position = "";
@@ -265,8 +321,8 @@ function stopFullscreen() {
     canvas.style.bottom = "";
     canvas.style.left = "";
     canvas.style.right = "";
-    canvas.width = container_size.width;
-    canvas.height = container_size.height;
+    canvas.width = container_size.width();
+    canvas.height = container_size.height();
     // canvas.style.overflow = "";
 
     onWindowResize();
@@ -279,7 +335,7 @@ function log() {
 function createCamera(position, target) {
     var camera = new FixedCamera(
             50,
-            container_size.width / container_size.height,
+            container_size.width() / container_size.height(),
             1,
             100000,
             position,
@@ -313,7 +369,7 @@ function render() {
     cameras.update(cameras.mainCamera());
     cameras.look();
 
-    var left = 0, bottom = 0, width = container.offsetWidth, height = container.offsetHeight;
+    var left = 0, bottom = 0, width = container_size.width(), height = container_size.height();
     renderer.setScissor(left, bottom, width, height);
     renderer.enableScissorTest(true);
     renderer.setViewport(left, bottom, width, height);
@@ -322,8 +378,8 @@ function render() {
     // Clear canvas
     canvas.width = canvas.width;
 
-    width = container.offsetWidth / 5;
-    height = container.offsetHeight / 5;
+    width = container_size.width() / 5;
+    height = container_size.height() / 5;
     left = prev.x - width/2;
     bottom =  renderer.domElement.height - prev.y + height/5;
 
@@ -331,14 +387,14 @@ function render() {
         // Hide arrows
         cameras.map(function(camera) { if (camera instanceof FixedCamera) hide(camera); });
 
-        width = container.offsetWidth / 5;
-        height = container.offsetHeight / 5;
-        left = prev.x - width/2;
-        bottom =  renderer.domElement.height - prev.y + height/5;
+        width  = Math.floor(container_size.width() / 5);
+        height = Math.floor(container_size.height() / 5);
+        left   = Math.floor(prev.x - width/2);
+        bottom = Math.floor(renderer.domElement.height - prev.y + height/5);
 
 
         // Draw border
-        var can_bottom = container.offsetHeight - bottom - height ;
+        var can_bottom = container_size.height() - bottom - height ;
         ctx2d.strokeStyle = "#ffffff";
         ctx2d.beginPath();
         ctx2d.moveTo(left-1, can_bottom);
@@ -376,10 +432,16 @@ function animate() {
 }
 
 function onWindowResize() {
-    cameras.forEach(function(camera) {camera.aspect = container.offsetWidth / container.offsetHeight;});
-    cameras.forEach(function(camera) {camera.updateProjectionMatrix();});
 
-    renderer.setSize(container.offsetWidth, container.offsetHeight);
+    container.style.width = container_size.width() + "px";
+    container.style.height = container_size.height() + "px";
+
+    canvas.width = container_size.width();
+    canvas.height = container_size.height();
+
+    renderer.setSize(container_size.width(), container_size.height());
+    cameras.forEach(function(camera) {camera.aspect = container_size.width() / container_size.height();});
+    cameras.forEach(function(camera) {camera.updateProjectionMatrix();});
     render();
 }
 
