From 3c59dce3a6220a1d0c2ce64e55c6f9ddf16ce1b6 Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Wed, 22 Jul 2015 14:48:14 +0200 Subject: [PATCH] Corrected bugs, and prepare for tutorial --- controllers/prototype/index.js | 16 ++++++-- .../views/prototype_interactive.jade | 2 +- js/l3d/apps/prototype/ButtonManager.js | 5 --- js/l3d/apps/prototype/interactive/main.js | 5 +++ js/l3d/apps/prototype/tutorial/TutoCamera.js | 37 +++++++++++++++++++ .../apps/prototype/tutorial/TutorialSteps.js | 9 ++++- js/l3d/apps/prototype/tutorial/main.js | 3 ++ js/l3d/src/cameras/PointerCamera.js | 17 +++++---- js/l3d/src/cameras/ReplayCamera.js | 1 + js/l3d/src/scenes/initScene.js | 24 ++++++++---- js/l3d/src/utils/ObjectClicker.js | 2 +- 11 files changed, 95 insertions(+), 26 deletions(-) diff --git a/controllers/prototype/index.js b/controllers/prototype/index.js index ce5af91..3086cb6 100644 --- a/controllers/prototype/index.js +++ b/controllers/prototype/index.js @@ -139,11 +139,21 @@ module.exports.replay_index = function(req, res, next) { module.exports.tutorial = function(req, res) { + db.tryUser(req.session.user_id, function(id) { + req.session.user_id = id; - res.setHeader('Content-Type', 'text/html'); - res.render('tutorial.jade', res.lcals, function(err, result) { - res.send(result); + // 1 is the ID of peach scene + db.createExp(id, 1, function(id) { + req.session.exp_id = id; + req.session.save(); + + res.setHeader('Content-Type', 'text/html'); + res.render('tutorial.jade', res.lcals, function(err, result) { + res.send(result); + }); + }); }); + }; module.exports.clicker = function(req, res, next) { diff --git a/controllers/prototype/views/prototype_interactive.jade b/controllers/prototype/views/prototype_interactive.jade index 800e919..b7bcdbd 100644 --- a/controllers/prototype/views/prototype_interactive.jade +++ b/controllers/prototype/views/prototype_interactive.jade @@ -5,7 +5,7 @@ block title block mainjs script initMainScene = #{scene}; - script locked = #{session.locked}; + script locked = #{session.locked === undefined ? 'true' : session.locked}; script(src="/static/js/prototypeinteractive.min.js") block description diff --git a/js/l3d/apps/prototype/ButtonManager.js b/js/l3d/apps/prototype/ButtonManager.js index c8729c4..8c7a4d7 100644 --- a/js/l3d/apps/prototype/ButtonManager.js +++ b/js/l3d/apps/prototype/ButtonManager.js @@ -17,11 +17,6 @@ var ButtonManager = function(camera, recommendations, previewer) { // this.recommendationElement = document.getElementById('recommendation'); - // Default option - this.pointerLockElement.checked = window.locked;; - this.camera.shouldLock = window.locked; - this.camera.onPointerLockChange(); - (function(self) { self.undoElement.onclick = function() {self.camera.undo(); self.updateElements();}; self.redoElement.onclick = function() {self.camera.redo(); self.updateElements();}; diff --git a/js/l3d/apps/prototype/interactive/main.js b/js/l3d/apps/prototype/interactive/main.js index e02bc22..d32ddbf 100644 --- a/js/l3d/apps/prototype/interactive/main.js +++ b/js/l3d/apps/prototype/interactive/main.js @@ -85,6 +85,11 @@ function initThreeElements() { 0.01, 100000, renderer, container ); + // Get default param for camera lock + document.getElementById('lock').checked = window.locked; + camera1.shouldLock = window.locked; + camera1.onPointerLockChange(); + } function initCanvases() { diff --git a/js/l3d/apps/prototype/tutorial/TutoCamera.js b/js/l3d/apps/prototype/tutorial/TutoCamera.js index 01649dd..0a0bef8 100644 --- a/js/l3d/apps/prototype/tutorial/TutoCamera.js +++ b/js/l3d/apps/prototype/tutorial/TutoCamera.js @@ -80,6 +80,8 @@ var TutoCamera = function() { this.shouldLock = true; + this.shouldLogCameraAngles = true; + }; TutoCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype); TutoCamera.prototype.constructor = TutoCamera; @@ -114,6 +116,8 @@ TutoCamera.prototype.isLocked = function() { TutoCamera.prototype.onPointerLockChange = function() { + var event = new L3D.DB.Event.PointerLocked(); + if (this.isLocked()) { // The pointer is locked : adapt the state of the camera @@ -130,6 +134,14 @@ TutoCamera.prototype.onPointerLockChange = function() { this.tutorial.nextStep(); } + // Send event + event.locked = true; + + if (this.wasLocked !== event.locked) + event.send(); + + this.wasLocked = true; + } else { this.pointerLocked = false; @@ -147,20 +159,30 @@ TutoCamera.prototype.onPointerLockChange = function() { else this.startCanvas.clear(); + event.locked = false; + + if (this.wasLocked !== event.locked) + event.send(); + if (this.tutorial.nextAction() === 'unlock-pointer') { this.tutorial.nextStep(); } + this.wasLocked = false; + } }; // Update function TutoCamera.prototype.update = function(time) { + if (this.moving) { this.linearMotion(time); + this.shouldLogCameraAngles = false; } else if (this.movingHermite) { this.hermiteMotion(time); + this.shouldLogCameraAngles = false; } else { this.normalMotion(time); } @@ -213,6 +235,21 @@ TutoCamera.prototype.normalMotion = function(time) { this.mouseMove.y = 0; this.changed = true; + + if (this.shouldLogCameraAngles) { + + this.shouldLogCameraAngles = false; + + var self = this; + setTimeout(function() { + self.shouldLogCameraAngles = true; + }, 500); + + var event = new L3D.DB.Event.KeyboardEvent(); + event.camera = this; + event.send(); + + } } // Clamp phi and theta diff --git a/js/l3d/apps/prototype/tutorial/TutorialSteps.js b/js/l3d/apps/prototype/tutorial/TutorialSteps.js index 292c472..67255c5 100644 --- a/js/l3d/apps/prototype/tutorial/TutorialSteps.js +++ b/js/l3d/apps/prototype/tutorial/TutorialSteps.js @@ -124,8 +124,15 @@ TutorialSteps.prototype.nextStep = function() { switch (this.step) { case 0: break; case 3: this.camera.allowed.mouseRotate = true; break; - case 4: this.camera.allowed.keyboardRotate = true; break; + case 4: + this.camera.allowed.keyboardRotate = true; + break; case 5: + if (!confirm('Do you want to keep pointer lock disabled ?')) { + document.getElementById('lock').checked = true; + this.camera.shouldLock = true; + this.camera.onPointerLockChange(); + } Coin.domElement.style.display = ""; Coin.max = 1; Coin.update(); diff --git a/js/l3d/apps/prototype/tutorial/main.js b/js/l3d/apps/prototype/tutorial/main.js index 978fd08..47845d5 100644 --- a/js/l3d/apps/prototype/tutorial/main.js +++ b/js/l3d/apps/prototype/tutorial/main.js @@ -59,6 +59,9 @@ function main() { // Start rendering setInterval(render, 20); + // Log fps + setInterval(function() {logfps(stats.getFps());}, 500); + } function initThreeElements() { diff --git a/js/l3d/src/cameras/PointerCamera.js b/js/l3d/src/cameras/PointerCamera.js index 2941769..90c4b38 100644 --- a/js/l3d/src/cameras/PointerCamera.js +++ b/js/l3d/src/cameras/PointerCamera.js @@ -248,16 +248,19 @@ L3D.PointerCamera.prototype.onPointerLockChange = function() { } else { this.pointerLocked = false; - this.mousePointer.clear(); + if (this.mousePointer) + this.mousePointer.clear(); 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.startCanvas) { + if (this.shouldLock) + this.startCanvas.render(); + else + this.startCanvas.clear(); + } event.locked = false; @@ -275,14 +278,14 @@ L3D.PointerCamera.prototype.onPointerLockChange = function() { * @param {Number} time number of milliseconds between the previous and the next frame */ L3D.PointerCamera.prototype.update = function(time) { - this.shouldLogCameraAngles = false; if (this.moving) { + this.shouldLogCameraAngles = false; this.linearMotion(time); } else if (this.movingHermite) { + this.shouldLogCameraAngles = false; this.hermiteMotion(time); } else { - this.shouldLogCameraAngles = true; this.normalMotion(time); } }; diff --git a/js/l3d/src/cameras/ReplayCamera.js b/js/l3d/src/cameras/ReplayCamera.js index c6b2f3a..7deb0fe 100644 --- a/js/l3d/src/cameras/ReplayCamera.js +++ b/js/l3d/src/cameras/ReplayCamera.js @@ -94,6 +94,7 @@ L3D.ReplayCamera.prototype.nextEvent = function() { // Finished if (this.counter >= this.path.length) { this.started = false; + console.log('The replay is finished'); return; } diff --git a/js/l3d/src/scenes/initScene.js b/js/l3d/src/scenes/initScene.js index 4620791..b988b9f 100644 --- a/js/l3d/src/scenes/initScene.js +++ b/js/l3d/src/scenes/initScene.js @@ -72,20 +72,28 @@ L3D.resetPeachElements = function() { }; }; -L3D.initPeach = function(recommendation, scene, coins, clickable) { +L3D.initPeach = function(camera, scene, coins, clickable, coin_ids) { L3D.addLight(scene); var collidableObjects = []; - L3D.initPeachCastle(scene, collidableObjects, recommendation, clickable); + L3D.initPeachCastle(scene, collidableObjects, camera, clickable); - recommendation.resetElements = L3D.resetPeachElements(); - recommendation.collidableObjects = collidableObjects; + camera.resetElements = L3D.resetPeachElements(); + camera.collidableObjects = collidableObjects; - recommendation.speed = 0.001; - recommendation.reset(); - recommendation.save(); + camera.speed = 0.001; + camera.reset(); + camera.save(); - scene.add(recommendation); + scene.add(camera); + + var tmp = L3D.generateCoins(L3D.createPeachCoins(), coin_ids); + + for (var i in tmp) { + coins.push(tmp[i]); + } + + setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); });}, 1000); Coin.init(0.001); var recommendations = []; diff --git a/js/l3d/src/utils/ObjectClicker.js b/js/l3d/src/utils/ObjectClicker.js index 5255fc1..60e48b0 100644 --- a/js/l3d/src/utils/ObjectClicker.js +++ b/js/l3d/src/utils/ObjectClicker.js @@ -1,7 +1,7 @@ L3D.ObjectClicker = (function() { function pointerCheck(camera) { - return (camera instanceof L3D.PointerCamera && camera.pointerLocked); + return ((camera instanceof L3D.PointerCamera || camera instanceof TutoCamera) && camera.pointerLocked); } /**