diff --git a/controllers/prototype/views/prototype.jade b/controllers/prototype/views/prototype.jade index 6d2b1c7..24dac71 100644 --- a/controllers/prototype/views/prototype.jade +++ b/controllers/prototype/views/prototype.jade @@ -34,8 +34,8 @@ block content input#fullarrow(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}) label(for="fullarrow" style={'margin-right':'10px'}) Full arrow - input#collisions(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked) - label(for="collisions" style={'margin-right':'10px'}) Collisions + input#lock(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked) + label(for="lock" style={'margin-right':'10px'}) Pointer lock input#showarrows(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked) label(for="showarrows" style={'margin-right':'10px'}) Show arrows diff --git a/js/PointerCamera.js b/js/PointerCamera.js index b0184aa..d93d651 100644 --- a/js/PointerCamera.js +++ b/js/PointerCamera.js @@ -39,18 +39,29 @@ var PointerCamera = function() { // Create history object this.history = new History(); + // Variable for lock pointer + this.shouldLock = true; + this.pointerLocked = false; + // Set events from the document var self = this; var onKeyDown = function(event) {self.onKeyDown(event);}; var onKeyUp = function(event) {self.onKeyUp(event);}; - var onMouseDown = function(event) {self.onMouseDown(event); }; + var onMouseDown = function(event) {if (event.which === 1) self.onMouseDown(event); }; + var onMouseUp = function(event) {if (event.which === 1) self.onMouseUp(event); }; var onMouseMove = function(event) {self.onMouseMove(event); }; - var onMouseUp = function(event) {self.onMouseUp(event); }; document.addEventListener('keydown', onKeyDown, false); document.addEventListener('keyup', onKeyUp, false); - listenerTarget.addEventListener('mousedown', function(event) { if (event.which == 1) onMouseDown(event);}, false); - listenerTarget.addEventListener('mousemove', function(event) { if (event.which == 1) onMouseMove(event);}, false); + document.addEventListener('mousemove', function(event) {self.onMouseMovePointer(event);}, false); + + document.addEventListener('pointerlockchange', function(event) { self.onPointerLockChange(event); }, false); + document.addEventListener('mozpointerlockchange', function(event) { self.onPointerLockChange(event); }, false); + document.addEventListener('webkitpointerlockchange', function(event) { self.onPointerLockChange(event); }, false); + + listenerTarget.addEventListener('mousedown', function() {self.lockPointer();}, false); + listenerTarget.addEventListener('mousedown', onMouseDown, false); + listenerTarget.addEventListener('mousemove', onMouseMove, false); listenerTarget.addEventListener('mouseup', onMouseUp, false); // listenerTarget.addEventListener('mouseup', function() { console.log("mouseup");}, false); listenerTarget.addEventListener('mouseout', onMouseUp, false); @@ -62,6 +73,44 @@ var PointerCamera = function() { PointerCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype); PointerCamera.prototype.constructor = PointerCamera; +PointerCamera.prototype.lockPointer = function() { + + if (this.shouldLock) { + document.documentElement.requestPointerLock = + document.documentElement.requestPointerLock || + document.documentElement.mozRequestPointerLock || + document.documentElement.webkitRequestPointerLock; + + if (document.documentElement.requestPointerLock) { + + document.documentElement.requestPointerLock(); + this.pointerLocked = true; + + } + + } + +} + +PointerCamera.prototype.onPointerLockChange = function() { + + document.pointerLockElement = + document.pointerLockElement || + document.mozPointerLockElement || + document.webkitPointerLockElement; + + if (!document.pointerLockElement) { + + this.dragging = false; + this.pointerLocked = false; + + this.mouseMove.x = 0; + this.mouseMove.y = 0; + + } + +} + // Update function PointerCamera.prototype.update = function(time) { if (this.moving) { @@ -110,7 +159,7 @@ PointerCamera.prototype.normalMotion = function(time) { if (this.motion.increaseTheta) {this.theta += this.sensitivity * time / 20; this.changed = true; } if (this.motion.decreaseTheta) {this.theta -= this.sensitivity * time / 20; this.changed = true; } - if (this.dragging) { + if ( this.pointerLocked || this.dragging) { this.theta += this.mouseMove.x; this.phi -= this.mouseMove.y; @@ -324,6 +373,21 @@ PointerCamera.prototype.onMouseMove = function(event) { } } +PointerCamera.prototype.onMouseMovePointer = function(e) { + + if (this.pointerLocked) { + + this.mouseMove.x = e.movementX || e.mozMovementX || e.webkitMovementX || 0; + this.mouseMove.y = e.movementY || e.mozMovementY || e.webkitMovementY || 0; + + this.mouseMove.x /= -200; + this.mouseMove.y /= 200; + this.mouseMoved = true; + + } + +} + PointerCamera.prototype.onMouseUp = function(event) { this.onMouseMove(event); diff --git a/js/prototype/ButtonManager.js b/js/prototype/ButtonManager.js index 3e0f759..b9cec3f 100644 --- a/js/prototype/ButtonManager.js +++ b/js/prototype/ButtonManager.js @@ -11,7 +11,7 @@ var ButtonManager = function(cameras, previewer) { this.undoElement = document.getElementById('undo'); this.redoElement = document.getElementById('redo'); - this.collisionElement = document.getElementById('collisions'); + this.pointerLockElement = document.getElementById('lock'); this.showarrowsElement = document.getElementById('showarrows'); this.recommendationElement = document.getElementById('recommendation'); @@ -31,7 +31,10 @@ var ButtonManager = function(cameras, previewer) { }; - self.collisionElement.onchange = function() {self.cameras.mainCamera().collisions = self.collisionElement.checked;} + self.pointerLockElement.onchange = function() { + self.cameras.mainCamera().shouldLock = self.pointerLockElement.checked; + } + self.showarrowsElement.onchange = function() {self.showArrows = self.showarrowsElement.checked;} self.resetElement.onclick = function() {