diff --git a/js/Makefile b/js/Makefile index 9fc5040..a98455a 100644 --- a/js/Makefile +++ b/js/Makefile @@ -53,7 +53,6 @@ Bouncing: Multisphere: $(CLOSURE) $(OPT) \ - --js StaticPath.js \ --js Camera.js \ --js Cube.js \ --js multisphere/MultiSphere.js \ @@ -61,7 +60,6 @@ Multisphere: StreamingSimulator: $(CLOSURE) $(OPT) \ - --js StaticPath.js \ --js Camera.js \ --js Cube.js \ --js ProgressiveSphere.js \ @@ -71,7 +69,7 @@ StreamingSimulator: PrototypeTools: $(CLOSURE) $(OPT) \ --js History.js \ - --js StaticPath.js \ + --js StartCanvas.js \ --js Hermite.js \ --js Camera.js \ --js PointerCamera.js \ diff --git a/js/PointerCamera.js b/js/PointerCamera.js index b5d2f50..92241c5 100644 --- a/js/PointerCamera.js +++ b/js/PointerCamera.js @@ -131,6 +131,11 @@ var PointerCamera = function() { */ this.pointerLocked = false; + /** + * + */ + this.listenerTarget = listenerTarget; + // Set events from the document var self = this; var onKeyDown = function(event) {self.onKeyDown(event);}; @@ -141,17 +146,17 @@ var PointerCamera = function() { document.addEventListener('keydown', onKeyDown, false); document.addEventListener('keyup', onKeyUp, 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); + 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); /** @@ -183,44 +188,69 @@ PointerCamera.prototype.constructor = PointerCamera; PointerCamera.prototype.lockPointer = function() { if (this.shouldLock) { - document.documentElement.requestPointerLock = - document.documentElement.requestPointerLock || - document.documentElement.mozRequestPointerLock || - document.documentElement.webkitRequestPointerLock; + this.renderer.domElement.requestPointerLock = + this.renderer.domElement.requestPointerLock || + this.renderer.domElement.mozRequestPointerLock || + this.renderer.domElement.webkitRequestPointerLock; - if (document.documentElement.requestPointerLock) { + if (this.renderer.domElement.requestPointerLock) { - document.documentElement.requestPointerLock(); - this.pointerLocked = true; - this.mousePointer.render(); + this.renderer.domElement.requestPointerLock(); - this.mouse.x = this.renderer.domElement.width/2; - this.mouse.y = this.renderer.domElement.height/2; } } } +/** + * Check that the pointer is locked or not, and updated locked attribute + * @returns true if the pointer is locked, false otherwise + */ +PointerCamera.prototype.isLocked = function() { + var toto = + document.pointerLockElement === this.renderer.domElement || + document.mozPointerLockElement === this.renderer.domElement || + document.webkitPointerLockElement === this.renderer.domElement; + + return toto; + +} + /** * Update the camera when the pointer lock changes state */ PointerCamera.prototype.onPointerLockChange = function() { - document.pointerLockElement = - document.pointerLockElement || - document.mozPointerLockElement || - document.webkitPointerLockElement; + if (this.isLocked()) { - if (!document.pointerLockElement) { + // 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(); + + } else { - this.dragging = false; 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(); + } } @@ -282,19 +312,23 @@ PointerCamera.prototype.hermiteMotion = function(time) { * @param {Number} time number of milliseconds between the previous and the next frame */ PointerCamera.prototype.normalMotion = function(time) { + // Update angles if (this.motion.increasePhi) {this.phi += this.sensitivity * time / 20; this.changed = true; } if (this.motion.decreasePhi) {this.phi -= this.sensitivity * time / 20; this.changed = true; } 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.pointerLocked || this.dragging) { - this.theta += this.mouseMove.x * 20 / time; - this.phi -= this.mouseMove.y * 20 / time; + if ( this.isLocked() || this.dragging) { + + this.theta += (this.mouseMove.x * 20 / time); + this.phi -= (this.mouseMove.y * 20 / time); this.mouseMove.x = 0; this.mouseMove.y = 0; + this.vectorsFromAngles(); + this.changed = true; if (this.shouldLogCameraAngles) { @@ -546,7 +580,9 @@ PointerCamera.prototype.onKeyUp = function(event) { * @param {event} event the event to manage */ 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; @@ -560,6 +596,7 @@ PointerCamera.prototype.onMouseDown = function(event) { * @param {event} event the event to manage */ PointerCamera.prototype.onMouseMove = function(event) { + 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; @@ -577,7 +614,11 @@ PointerCamera.prototype.onMouseMove = function(event) { */ PointerCamera.prototype.onMouseMovePointer = function(e) { - if (this.pointerLocked) { + 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; diff --git a/js/StartCanvas.js b/js/StartCanvas.js new file mode 100644 index 0000000..e194dba --- /dev/null +++ b/js/StartCanvas.js @@ -0,0 +1,44 @@ +var StartCanvas = function(camera) { + + this.domElement = document.createElement('canvas'); + this.domElement.style.position = 'absolute'; + this.domElement.style.cssFloat = 'top-left'; + this.ctx = this.domElement.getContext('2d'); + this.shown = false; + + camera.startCanvas = this; + +} + +StartCanvas.prototype.render = function() { + + if (!this.shown) { + + this.ctx.fillStyle = 'white' + this.ctx.globalAlpha = 0.7; + this.ctx.fillRect(0,0,this.domElement.width, this.domElement.height); + + this.ctx.font = '30px Verdana' + this.ctx.globalAlpha = 1; + this.ctx.fillStyle = 'black'; + this.ctx.fillText('Click here to lock the pointer !', container_size.width()/3.25, container_size.height()/2-10); + + + this.shown = true; + + } + +} + +StartCanvas.prototype.clear = function() { + + if (this.shown) { + + // Clear canvas + this.domElement.width = this.domElement.width; + + this.shown = false; + + } + +} diff --git a/js/prototype/ButtonManager.js b/js/prototype/ButtonManager.js index b9cec3f..d2e3f95 100644 --- a/js/prototype/ButtonManager.js +++ b/js/prototype/ButtonManager.js @@ -33,6 +33,7 @@ var ButtonManager = function(cameras, previewer) { self.pointerLockElement.onchange = function() { self.cameras.mainCamera().shouldLock = self.pointerLockElement.checked; + self.cameras.mainCamera().onPointerLockChange(); } self.showarrowsElement.onchange = function() {self.showArrows = self.showarrowsElement.checked;} diff --git a/js/prototype/main.js b/js/prototype/main.js index ae509b5..c81a7cb 100644 --- a/js/prototype/main.js +++ b/js/prototype/main.js @@ -110,13 +110,21 @@ function init() { 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(); + // 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(Coin.domElement); container.appendChild(renderer.domElement); + startCanvas.render(); + cameras = initMainScene(camera1, scene, static_path, coins); // cameras = initPeach(camera1, scene, static_path, coins); // cameras = initBobomb(camera1, scene, static_path, coins);