From 38d2b1a4e04bb51b0e192314f73d55368429beb3 Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Fri, 19 Jun 2015 17:45:52 +0200 Subject: [PATCH] PointerLock should now work correctly --- controllers/prototype/views/sponza.jade | 3 +- js/Makefile | 1 + js/PointerCamera.js | 18 +- js/prototype/main.js | 26 ++- js/prototype/raycasterTools.js | 37 +++- js/prototype/sponza.js | 248 ------------------------ 6 files changed, 70 insertions(+), 263 deletions(-) delete mode 100644 js/prototype/sponza.js diff --git a/controllers/prototype/views/sponza.jade b/controllers/prototype/views/sponza.jade index 40dd646..84b63c1 100644 --- a/controllers/prototype/views/sponza.jade +++ b/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; diff --git a/js/Makefile b/js/Makefile index e5da56a..d444cbb 100644 --- a/js/Makefile +++ b/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 \ diff --git a/js/PointerCamera.js b/js/PointerCamera.js index d93d651..8f3dc2e 100644 --- a/js/PointerCamera.js +++ b/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; @@ -132,7 +136,7 @@ PointerCamera.prototype.linearMotion = function(time) { if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.01 && Tools.norm2(Tools.diff(this.target, this.new_target)) < 0.01) { this.moving = false; - this.anglesFromVectors(); + this.anglesFromVectors(); } } @@ -354,15 +358,17 @@ PointerCamera.prototype.onKeyUp = function(event) { } PointerCamera.prototype.onMouseDown = function(event) { - 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; + 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; + 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; diff --git a/js/prototype/main.js b/js/prototype/main.js index 0add11a..682d7b5 100644 --- a/js/prototype/main.js +++ b/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) @@ -106,9 +119,8 @@ function initListeners() { // Update camera selecter when mouse moved container.addEventListener('mousemove', function(event) { - cameraSelecter.update(event); - }, false - ); + cameraSelecter.update(event); + }); // Escape key to exit fullscreen mode document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false); diff --git a/js/prototype/raycasterTools.js b/js/prototype/raycasterTools.js index 4ee610a..e355978 100644 --- a/js/prototype/raycasterTools.js +++ b/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(); + } + } +} diff --git a/js/prototype/sponza.js b/js/prototype/sponza.js deleted file mode 100644 index 7361fc1..0000000 --- a/js/prototype/sponza.js +++ /dev/null @@ -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(); -} - -