Corrected all my bullshit...

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)
+                input#lock(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked)
-                label(for="collisions" style={'margin-right':'10px'}) Collisions
+                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

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);
+    document.addEventListener('mousemove', function(event) {self.onMouseMovePointer(event);}, false);
-    listenerTarget.addEventListener('mousemove', function(event) { if (event.which == 1) onMouseMove(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);
 

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() {