diff --git a/js/TutoCamera.js b/js/TutoCamera.js index 151e000..3477dc8 100644 --- a/js/TutoCamera.js +++ b/js/TutoCamera.js @@ -45,19 +45,33 @@ var TutoCamera = function() { // 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('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); + + document.addEventListener('mousemove', function(event) {self.onMouseMovePointer(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); + listenerTarget.addEventListener('mouseout', onMouseUp, false); + + document.getElementById('lock').addEventListener('change', function(e) { + if (self.tutorial.nextAction() === 'uncheck-lock') { + self.tutorial.nextStep(); + } + }); this.collisions = true; @@ -65,10 +79,84 @@ var TutoCamera = function() { // Create tutorial this.tutorial = new TutorialSteps(this, scene, coins, this.onWindowResize, container_size); + + this.shouldLock = true; + } TutoCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype); TutoCamera.prototype.constructor = TutoCamera; +TutoCamera.prototype.lockPointer = function() { + + if (this.shouldLock) { + this.renderer.domElement.requestPointerLock = + this.renderer.domElement.requestPointerLock || + this.renderer.domElement.mozRequestPointerLock || + this.renderer.domElement.webkitRequestPointerLock; + + if (this.renderer.domElement.requestPointerLock) { + + this.renderer.domElement.requestPointerLock(); + + } + + } + +} + +TutoCamera.prototype.isLocked = function() { + var toto = + document.pointerLockElement === this.renderer.domElement || + document.mozPointerLockElement === this.renderer.domElement || + document.webkitPointerLockElement === this.renderer.domElement; + + return toto; + +} + +TutoCamera.prototype.onPointerLockChange = function() { + + if (this.isLocked()) { + + // The pointer is locked : adapt the state of the camera + this.pointerLocked = true; + this.mousePointer.render(); + + this.mouse.x = this.renderer.domElement.width/2; + this.mouse.y = this.renderer.domElement.height/2; + + // Remove start canvas + this.startCanvas.clear(); + + if (this.tutorial.nextAction() === 'lock-pointer') { + this.tutorial.nextStep(); + } + + } else { + + this.pointerLocked = false; + this.mousePointer.clear(); + + this.theta = this.previousTheta; + this.phi = this.previousPhi; + + this.mouseMove.x = 0; + this.mouseMove.y = 0; + + // Draw start canvas only if should lock + if (this.shouldLock) + this.startCanvas.render(); + else + this.startCanvas.clear(); + + if (this.tutorial.nextAction() === 'unlock-pointer') { + this.tutorial.nextStep(); + } + + } + +} + // Update function TutoCamera.prototype.update = function(time) { if (this.moving) { @@ -117,7 +205,7 @@ TutoCamera.prototype.normalMotion = function(time) { if (this.motion.increaseTheta) {this.theta += this.sensitivity; this.changed = true; } if (this.motion.decreaseTheta) {this.theta -= this.sensitivity; this.changed = true; } - if (this.dragging) { + if (this.isLocked() || this.dragging) { this.theta += this.mouseMove.x; this.phi -= this.mouseMove.y; @@ -365,7 +453,7 @@ TutoCamera.prototype.onMouseDown = function(event) { } TutoCamera.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; @@ -380,6 +468,26 @@ TutoCamera.prototype.onMouseMove = function(event) { } } +TutoCamera.prototype.onMouseMovePointer = function(e) { + + if (this.isLocked()) { + + // Backup theta and phi + this.previousTheta = this.theta; + this.previousPhi = this.phi; + + this.mouseMove.x = e.movementX || e.mozMovementX || e.webkitMovementX || 0; + this.mouseMove.y = e.movementY || e.mozMovementY || e.webkitMovementY || 0; + + this.mouseMove.x *= -(this.sensitivity/5); + this.mouseMove.y *= (this.sensitivity/5); + + this.mouseMoved = true; + + } + +} + TutoCamera.prototype.onMouseUp = function(event) { this.onMouseMove(event); diff --git a/js/prototype/TutorialSteps.js b/js/prototype/TutorialSteps.js index a27937e..a0372ae 100644 --- a/js/prototype/TutorialSteps.js +++ b/js/prototype/TutorialSteps.js @@ -10,8 +10,16 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container this.instructions = [ { - text:"Welcome to this tutorial ! Click on next to go to the next instruction !", - justclick:true + text:"Welcome to this tutorial ! Click on the canvas to go start !", + justclick:false + }, + { + text: "You can use your mouse to move around, and press the escape key to unlock the pointer", + justclick: false + }, + { + text: "You can also uncheck the lock pointer otion at the bottom of the page to rotate the camera via drag'n'drop !", + justclick: false }, { text:"You can use your mouse (drag'n'drop) to rotate the camera", @@ -30,7 +38,7 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container justclick: false }, { - text: "Two more !", + text: "Two more ! Feel free to select the pointer lock option you prefer", justclick: false }, { @@ -100,9 +108,9 @@ TutorialSteps.prototype.nextStep = function() { var self = this; switch (this.step) { case 0: break; - case 1: this.camera.allowed.mouseRotate = true; break; - case 2: this.camera.allowed.keyboardRotate = true; break; - case 3: + case 3: this.camera.allowed.mouseRotate = true; break; + case 4: this.camera.allowed.keyboardRotate = true; break; + case 5: Coin.max = 1; Coin.update(); this.camera.allowed.keyboardRotate = true; @@ -110,7 +118,7 @@ TutorialSteps.prototype.nextStep = function() { this.coins[this.coins.length-1].addToScene(this.scene); document.getElementById('container').appendChild(Coin.domElement); break; - case 4: + case 6: Coin.max = 4; Coin.update(); this.coins.push(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback)); @@ -120,13 +128,13 @@ TutorialSteps.prototype.nextStep = function() { this.coins.push(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback)); this.coins[this.coins.length-1].addToScene(this.scene); break; - case 7: + case 9: this.camera.move(this.camera.resetElements); break; - case 8: + case 10: this.camera.allowed.keyboardTranslate = true; break; - case 9: + case 11: Coin.max = 5; Coin.update(); this.coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback)); @@ -136,7 +144,7 @@ TutorialSteps.prototype.nextStep = function() { target: new THREE.Vector3(13.645394042405439,12.337463485871524,-35.64876053273249) }); break; - case 12: + case 14: var cam = createPeachCameras(this.container_size.width(), this.container_size.height())[2]; this.cameras.push(cam); cam.addToScene(this.scene); @@ -145,7 +153,7 @@ TutorialSteps.prototype.nextStep = function() { target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745) }); break; - case 14: + case 16: var cams = createPeachCameras(this.container_size.width(), this.container_size.height()); for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) { this.cameras.push(cams[i]); @@ -167,11 +175,14 @@ TutorialSteps.prototype.nextStep = function() { TutorialSteps.prototype.nextAction = function() { switch (this.step) { - case 2: return 'rotate-mouse'; - case 3: return 'rotate-keyboard'; - case 9: return 'translate-keyboard'; - case 11: return 'reset-camera'; - case 13: return 'recommendation'; + case 1: return 'lock-pointer'; + case 2: return 'unlock-pointer'; + case 3: return 'uncheck-lock'; + case 4: return 'rotate-mouse'; + case 5: return 'rotate-keyboard'; + case 11: return 'translate-keyboard'; + case 13: return 'reset-camera'; + case 15: return 'recommendation'; } } diff --git a/js/prototype/tutorial.js b/js/prototype/tutorial.js index 9c4e3a9..d273269 100644 --- a/js/prototype/tutorial.js +++ b/js/prototype/tutorial.js @@ -4,15 +4,8 @@ var isFullscreen = 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; - } + width: function() { return 1024; }, + height: function() { return 768; } }; var onWindowResize = (function() { @@ -71,13 +64,28 @@ function init() { stats.domElement.style.position = 'absolute'; stats.domElement.style.cssFloat = "top-left"; + var camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container); + + // Initialize pointer for pointer lock + var pointer = new MousePointer(camera1); + pointer.domElement.width = container_size.width(); + pointer.domElement.height = container_size.height(); + + // + var startCanvas = new StartCanvas(camera1); + startCanvas.domElement.width = container_size.width(); + startCanvas.domElement.height = container_size.height(); + startCanvas.render(); + // Add elements to page container.appendChild( stats.domElement ); + container.appendChild(Coin.domElement); + container.appendChild(startCanvas.domElement); + container.appendChild(pointer.domElement); container.appendChild(previewer.domElement); container.appendChild(renderer.domElement); // Initialize pointer camera - var camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container); tutorial = camera1.tutorial; cameras = new CameraContainer(camera1, []);