PointerLock should now work correctly

controllers/prototype/views/sponza.jade

@@ -4,7 +4,8 @@ block title
     title #{title} - Prototype - Arrows
 
 block mainjs
-    script(src="/static/js/sponza.min.js")
+    script initMainScene = initSponza
+    script(src="/static/js/prototypeinteractive.min.js")
 
 block configjs
     script RecommendedCamera = FixedCamera;

js/Makefile

@@ -75,6 +75,7 @@ PrototypeTools:
 		--js Camera.js \
 		--js PointerCamera.js \
 		--js CameraContainer.js \
+		--js MousePointer.js \
 		--js prototype/ArrowCamera.js \
 		--js prototype/FixedCamera.js \
 		--js prototype/OldFixedCamera.js \

js/PointerCamera.js

@@ -85,7 +85,10 @@ PointerCamera.prototype.lockPointer = function() {
 
             document.documentElement.requestPointerLock();
             this.pointerLocked = true;
+            this.mousePointer.render();
 
+            this.mouse.x = this.renderer.domElement.width/2;
+            this.mouse.y = this.renderer.domElement.height/2;
         }
 
     }
@@ -103,6 +106,7 @@ PointerCamera.prototype.onPointerLockChange = function() {
 
         this.dragging = false;
         this.pointerLocked = false;
+        this.mousePointer.clear();
 
         this.mouseMove.x = 0;
         this.mouseMove.y = 0;
@@ -354,15 +358,17 @@ PointerCamera.prototype.onKeyUp = function(event) {
 }
 
 PointerCamera.prototype.onMouseDown = function(event) {
+    if (!this.shouldLock) {
         this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
         this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
 
         this.dragging = true;
         this.mouseMoved = false;
+    }
 }
 
 PointerCamera.prototype.onMouseMove = function(event) {
-    if (this.dragging) {
+    if (!this.shouldLock && this.dragging) {
         var mouse = {x: this.mouse.x, y: this.mouse.y};
         this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
         this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;

js/prototype/main.js

@@ -35,7 +35,7 @@ var spheres = new Array(mesh_number);
 var visible = 0;
 var stats;
 var previewer;
-
+var camera1;
 var loader;
 var coins = [];
 var previousTime;
@@ -61,6 +61,9 @@ function init() {
     // renderer.setSize(container_size.width(), container_size.height());
     renderer.setClearColor(0x87ceeb);
 
+    // Initialize pointer camera
+    camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, container);
+
     // Initialize previewer
     previewer = new Previewer(renderer, scene);
     previewer.domElement.style.position ="absolute";
@@ -74,15 +77,18 @@ function init() {
     stats.domElement.style.position = 'absolute';
     stats.domElement.style.cssFloat = "top-left";
 
+    // Initialize pointer for pointer lock
+    var pointer = new MousePointer(camera1);
+    pointer.domElement.width = container_size.width();
+    pointer.domElement.height = container_size.height();
+
     // Add elements to page
     container.appendChild( stats.domElement );
+    container.appendChild(pointer.domElement);
     container.appendChild(previewer.domElement);
     container.appendChild(Coin.domElement);
     container.appendChild(renderer.domElement);
 
-    // Initialize pointer camera
-    var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, container);
-
     cameras = initMainScene(camera1, scene, static_path, coins);
     // cameras = initPeach(camera1, scene, static_path, coins);
     // cameras = initBobomb(camera1, scene, static_path, coins);
@@ -97,6 +103,13 @@ function init() {
 function initListeners() {
     window.addEventListener('resize', onWindowResize, false);
 
+    // Transmit click event to camera selecter
+    document.addEventListener('mousedown', function(event) {
+        if (event.which == 1)
+            cameraSelecter.clickPointer(event);
+        }, false
+    );
+
     // Transmit click event to camera selecter
     container.addEventListener('mousedown', function(event) {
         if (event.which == 1)
@@ -107,8 +120,7 @@ function initListeners() {
     // Update camera selecter when mouse moved
     container.addEventListener('mousemove', function(event) {
         cameraSelecter.update(event);
-        }, false
+    });
-    );
 
     // Escape key to exit fullscreen mode
     document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);

js/prototype/raycasterTools.js

@@ -17,6 +17,15 @@ CameraSelecter.prototype.pointedCamera = function() {
 
     var camera = this.cameras.mainCamera();
 
+    if (camera.pointerLocked) {
+
+        this.mouse.x = this.renderer.domElement.width/2 ;
+        this.mouse.y = this.renderer.domElement.height/2 ;
+        x = 0;
+        y = 0;
+
+    }
+
     var vector = new THREE.Vector3(x, y, 0.5);
     vector.unproject(camera);
 
@@ -57,12 +66,17 @@ CameraSelecter.prototype.pointedCamera = function() {
     this.currentPointedCamera = null;
 }
 
-CameraSelecter.prototype.update = function(event) {
+CameraSelecter.prototype.update = function(event, y) {
     if (event !== undefined) {
         this.mouse.x = event.offsetX == undefined ? event.layerX : event.offsetX;
         this.mouse.y = event.offsetY == undefined ? event.layerY : event.offsetY;
     }
 
+    if (y !== undefined) {
+        this.mouse.x = this.renderer.domElement.width/2;
+        this.mouse.y = this.renderer.domElement.height/2;
+    }
+
     var previousCamera = this.currentPointedCamera;
     var hovered = this.pointedCamera();
 
@@ -111,3 +125,24 @@ CameraSelecter.prototype.click = function(event) {
         newCamera.get();
     }
 }
+
+CameraSelecter.prototype.clickPointer = function(event) {
+    if (this.cameras.mainCamera().pointerLocked) {
+        var newCamera = this.pointedCamera();
+        if (newCamera !== undefined && !(newCamera instanceof Coin)) {
+            var event = new BD.Event.ArrowClicked();
+            event.arrow_id = this.cameras.cameras.indexOf(newCamera);
+            event.send();
+
+            newCamera.check();
+            this.cameras.mainCamera().moveHermite(newCamera);
+            buttonManager.updateElements();
+        } else if (newCamera instanceof Coin) {
+            // Coin found, notify server
+            var event = new BD.Event.CoinClicked();
+            event.coin_id = this.coins.indexOf(newCamera);
+            event.send();
+            newCamera.get();
+        }
+    }
+}

js/prototype/sponza.js

@@ -1,248 +0,0 @@
-var isFullscreen = false;
-var beenFullscreen = false;
-
-var main_section = document.getElementById('main-section');
-// var container_size = {
-//     width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
-//     height: function() {
-//         if (!isFullscreen)
-//             return main_section.clientHeight
-//                 - document.getElementById('nav').offsetHeight
-//                 - document.getElementById('main-div').offsetHeight;
-//         else
-//             return screen.height;
-//     }
-// };
-
-var container_size = {
-    width: function() { return 1024; },
-    height: function() { return 768; }
-}
-
-// Let's be sure we avoid using global variables
-var onWindowResize = (function() {
-
-// Disable scrolling
-window.onscroll = function () { window.scrollTo(0, 0); };
-
-var mesh_number = 25;
-var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0};
-var bigmesh;
-var raycaster;
-var objects = [];
-var cameras, cameraSelecter;
-var spheres = new Array(mesh_number);
-var visible = 0;
-var stats;
-var previewer;
-
-var loader;
-var coins = [];
-var previousTime;
-
-
-
-init();
-animate();
-
-function init() {
-    BD.disable();
-
-    // Initialize scene
-    scene = new THREE.Scene();
-    renderer = new THREE.WebGLRenderer({alpha:true});
-
-    // Collidable objects to prevent camera from traversing objects
-    var collidableObjects = new Array();
-
-    // Initialize renderer
-    container = document.getElementById('container');
-    container.style.height = container_size.height() + 'px';
-    container.style.width = container_size.width() + 'px';
-    renderer.setSize(container_size.width(), container_size.height());
-    // renderer.setSize(container_size.width(), container_size.height());
-    renderer.shadowMapEnabled = false;
-    renderer.setClearColor(0x87ceeb);
-
-    // Initialize previewer
-    previewer = new Previewer(renderer, scene);
-    previewer.domElement.style.position ="absolute";
-    previewer.domElement.style.cssFloat = 'top-left';
-    previewer.domElement.width = container_size.width();
-    previewer.domElement.height = container_size.height();
-
-    // Initialize stats counter
-    stats = new Stats();
-    stats.setMode(0);
-    stats.domElement.style.position = 'absolute';
-    stats.domElement.style.cssFloat = "top-left";
-
-    // Add elements to page
-    container.appendChild( stats.domElement );
-    container.appendChild(previewer.domElement);
-    container.appendChild(Coin.domElement);
-    container.appendChild(renderer.domElement);
-
-    // Initialize pointer camera
-    var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.1, 1000, renderer, container);
-
-    // cameras = initMainScene(camera1, scene, static_path, coins);
-    // cameras = initPeach(camera1, scene, static_path, coins);
-    // cameras = initBobomb(camera1, scene, static_path, coins);
-    // cameras = initWhomp(camera1, scene, static_path, coins);
-    // cameras = initMountain(camera1, scene, static_path, coins);
-    cameras = initSponza(camera1, scene, static_path, coins);
-
-    // Add listeners
-    initListeners();
-}
-
-function initListeners() {
-    window.addEventListener('resize', onWindowResize, false);
-
-    // Transmit click event to camera selecter
-    container.addEventListener('mousedown', function(event) {
-        if (event.which == 1)
-            cameraSelecter.click(event);
-        }, false
-    );
-
-    // Update camera selecter when mouse moved
-    container.addEventListener('mousemove', function(event) {
-            cameraSelecter.update(event);
-        }, false
-    );
-
-    // Escape key to exit fullscreen mode
-    document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
-
-    // HTML Bootstrap buttons
-    buttonManager = new ButtonManager(cameras, previewer);
-
-    // Camera selecter for hover and clicking recommendations
-    cameraSelecter = new CameraSelecter(renderer, scene, cameras, coins, buttonManager);
-}
-
-function render() {
-    cameraSelecter.update();
-
-    // Update recommendations (set raycastable if shown)
-    var transform = buttonManager.showArrows ? show : hide;
-    cameras.map(function(camera) {
-        if (camera instanceof RecommendedCamera) {
-            transform(camera);
-
-            camera.traverse(function(elt) {
-                elt.raycastable = buttonManager.showArrows;
-            });
-        }
-    });
-
-    // Update coins
-    coins.forEach(function(coin) { coin.update(); });
-
-    // Update main camera
-    var currentTime = Date.now() - previousTime;
-    cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime);
-    previousTime = Date.now();
-
-    // Update the recommendations
-    cameras.update(cameras.mainCamera());
-
-
-    // Set current position of camera
-    cameras.look();
-
-    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);
-    renderer.render(scene, cameras.mainCamera());
-
-    // Remove borders of preview
-    previewer.clear();
-
-    // Hide arrows in recommendation
-    cameras.map(function(camera) { if (camera instanceof RecommendedCamera) hide(camera); });
-
-    // Render preview
-    previewer.render(cameraSelecter.prev, container_size.width(), container_size.height());
-}
-
-function animate() {
-    // Render each frame
-    requestAnimationFrame(animate);
-
-    // stats count the number of frames per second
-    stats.begin();
-    render();
-    stats.end();
-}
-
-function onWindowResize() {
-
-    container.style.width = container_size.width() + "px";
-    container.style.height = container_size.height() + "px";
-
-    previewer.domElement.width = container_size.width();
-    previewer.domElement.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();
-}
-
-function hide(object) {
-    object.traverse(function(object) {object.visible = false;});
-}
-
-function show(object) {
-    object.traverse(function(object) {object.visible = true;});
-}
-
-// onWindowResize will be the only global function
-return onWindowResize;
-
-})();
-
-function fullscreen() {
-    var container = document.getElementById('container');
-    isFullscreen = true;
-
-    if (!beenFullscreen) {
-        beenFullscreen = true;
-        alert('To quit fullscren mode, type ESC key');
-    }
-
-    container.style.position = "absolute";
-    container.style.cssFloat = "top-left";
-    container.style.top = "50px";
-    container.style.bottom = "0px";
-    container.style.left = "0px";
-    container.style.right = "0px";
-    container.style.width="";
-    container.style.height="";
-    container.style.overflow = "hidden";
-
-    onWindowResize();
-}
-
-function stopFullscreen() {
-    isFullscreen = false;
-
-    var container = document.getElementById('container');
-
-    container.style.position = "";
-    container.style.cssFloat = "";
-    container.style.top = "";
-    container.style.bottom = "";
-    container.style.left = "";
-    container.style.right = "";
-    container.style.width = container_size.width() + "px";
-    container.style.height = container_size.height() + "px";
-
-    onWindowResize();
-}
-
-