From 0a5d6ab36c2db9724ca33b34e562e63e24334d35 Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Thu, 16 Jul 2015 13:58:47 +0200 Subject: [PATCH] Recommendation is fixed when pointer is locked --- controllers/prototype/views/prototype.jade | 8 +++---- js/l3d/apps/prototype/ButtonManager.js | 25 +++++++++++----------- js/l3d/apps/prototype/interactive/main.js | 14 ++++++++++++ js/l3d/apps/prototype/tutorial/main.js | 16 ++++++++++++-- js/l3d/src/canvases/Previewer.js | 4 ++-- 5 files changed, 47 insertions(+), 20 deletions(-) diff --git a/controllers/prototype/views/prototype.jade b/controllers/prototype/views/prototype.jade index 453e30a..c22055f 100644 --- a/controllers/prototype/views/prototype.jade +++ b/controllers/prototype/views/prototype.jade @@ -33,8 +33,8 @@ block content button#redo.btn.btn-default.navbar-btn(style={'margin-right': '10px', 'margin-bottom':'10px'}) span.glyphicon.glyphicon-triangle-right('aria-hidden'="true") - input#fullarrow(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}) - label(for="fullarrow" style={'margin-right':'10px'}) Full arrow + //-input#fullarrow(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}) + //-label(for="fullarrow" style={'margin-right':'10px'}) Full arrow input#lock(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked) label(for="lock" style={'margin-right':'10px'}) Pointer lock @@ -42,8 +42,8 @@ block content input#showarrows(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked) label(for="showarrows" style={'margin-right':'10px'}) Show arrows - input#recommendation(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}) - label(for="recommendation" style={'margin-right':'10px'}) Fixed prev + //-input#recommendation(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}) + //-label(for="recommendation" style={'margin-right':'10px'}) Fixed prev audio#music(controls, volume=0.5) source(src="/static/data/music/bobomb.ogg") diff --git a/js/l3d/apps/prototype/ButtonManager.js b/js/l3d/apps/prototype/ButtonManager.js index 4210702..060f9ca 100644 --- a/js/l3d/apps/prototype/ButtonManager.js +++ b/js/l3d/apps/prototype/ButtonManager.js @@ -6,7 +6,8 @@ var ButtonManager = function(camera, cameras, previewer) { this.showArrows = true; this.beenFullscreen = false; - this.fullElement = document.getElementById('fullarrow'); + // this.fullElement = document.getElementById('fullarrow'); + this.resetElement = document.getElementById('reset'); this.undoElement = document.getElementById('undo'); this.redoElement = document.getElementById('redo'); @@ -14,20 +15,20 @@ var ButtonManager = function(camera, cameras, previewer) { this.pointerLockElement = document.getElementById('lock'); this.showarrowsElement = document.getElementById('showarrows'); - this.recommendationElement = document.getElementById('recommendation'); + // this.recommendationElement = document.getElementById('recommendation'); (function(self) { self.undoElement.onclick = function() {self.camera.undo(); self.updateElements();}; self.redoElement.onclick = function() {self.camera.redo(); self.updateElements();}; - self.fullElement.onclick = function() { - self.cameras.map(function(camera) { - if (!(camera instanceof PointerCamera)) { - camera.fullArrow = self.fullElement.checked; - } - }); + // self.fullElement.onclick = function() { + // self.cameras.map(function(camera) { + // if (!(camera instanceof PointerCamera)) { + // camera.fullArrow = self.fullElement.checked; + // } + // }); - }; + // }; self.pointerLockElement.onchange = function() { self.camera.shouldLock = self.pointerLockElement.checked; @@ -46,9 +47,9 @@ var ButtonManager = function(camera, cameras, previewer) { self.camera.reset(); }; - self.recommendationElement.onchange = function() { - previewer.fixedRecommendation(self.recommendationElement.checked); - }; + // self.recommendationElement.onchange = function() { + // previewer.fixedRecommendation(self.recommendationElement.checked); + // }; })(this); }; diff --git a/js/l3d/apps/prototype/interactive/main.js b/js/l3d/apps/prototype/interactive/main.js index e66a41a..adc6607 100644 --- a/js/l3d/apps/prototype/interactive/main.js +++ b/js/l3d/apps/prototype/interactive/main.js @@ -52,6 +52,20 @@ function main() { Coin.update(); startCanvas.render(L3D.StartCanvas.Black); + // Bind previewer to renderer (for fixed option) + function bind() { + if (document.pointerLockElement || document.mozPointerLockElement || document.webkitPointerLockElement) { + // Lock event + previewer.fixed = true; + } else { + // Unlock event + previewer.fixed = false; + } + } + document.addEventListener('pointerlockchange', bind); + document.addEventListener('mozpointerlockchange', bind); + document.addEventListener('webkitpointerlockchange', bind); + // Start rendering setInterval(render, 20); diff --git a/js/l3d/apps/prototype/tutorial/main.js b/js/l3d/apps/prototype/tutorial/main.js index 04ea609..978fd08 100644 --- a/js/l3d/apps/prototype/tutorial/main.js +++ b/js/l3d/apps/prototype/tutorial/main.js @@ -20,8 +20,6 @@ var tutorial; function main() { - L3D.BD.disable(); - // Main container that holds everything container = document.getElementById('container'); @@ -44,6 +42,20 @@ function main() { startCanvas.render(); + // Bind previewer to renderer (for fixed option) + function bind() { + if (document.pointerLockElement || document.mozPointerLockElement || document.webkitPointerLockElement) { + // Lock event + previewer.fixed = true; + } else { + // Unlock event + previewer.fixed = false; + } + } + document.addEventListener('pointerlockchange', bind); + document.addEventListener('mozpointerlockchange', bind); + document.addEventListener('webkitpointerlockchange', bind); + // Start rendering setInterval(render, 20); diff --git a/js/l3d/src/canvases/Previewer.js b/js/l3d/src/canvases/Previewer.js index efad4b2..844db67 100644 --- a/js/l3d/src/canvases/Previewer.js +++ b/js/l3d/src/canvases/Previewer.js @@ -89,8 +89,8 @@ L3D.Previewer.prototype.render = function(container_width, container_height) { left = Math.clamp(left, width / 5, this.renderer.domElement.width - 6 * width / 5); } else { - left = 0; - bottom = 0; + left = 20; + bottom = 20; } // Draw border