From 0cd54a86a8d66ff0df154db96d91dd1ed90dd667 Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Fri, 29 May 2015 10:11:20 +0200 Subject: [PATCH] Finished tutorial --- js/TutoCamera.js | 8 +++++ js/prototype/Coin.js | 39 ++++++++++++--------- js/prototype/TutorialSteps.js | 65 ++++++++++++++++++++++++++++++----- js/prototype/initScene.js | 28 ++++++++++----- 4 files changed, 107 insertions(+), 33 deletions(-) diff --git a/js/TutoCamera.js b/js/TutoCamera.js index 4264472..c8503cf 100644 --- a/js/TutoCamera.js +++ b/js/TutoCamera.js @@ -169,6 +169,10 @@ TutoCamera.prototype.normalMotion = function(time) { } TutoCamera.prototype.reset = function() { + if (this.tutorial.nextAction() === 'reset-camera') { + this.tutorial.nextStep(); + } + this.resetPosition(); this.moving = false; this.movingHermite = false; @@ -226,6 +230,10 @@ TutoCamera.prototype.move = function(otherCamera, toSave) { } TutoCamera.prototype.moveHermite = function(otherCamera, toSave) { + if (this.tutorial.nextAction() === 'recommendation') { + this.tutorial.nextStep(); + } + if (toSave === undefined) toSave = true; diff --git a/js/prototype/Coin.js b/js/prototype/Coin.js index 93c3205..cd8c51d 100644 --- a/js/prototype/Coin.js +++ b/js/prototype/Coin.js @@ -12,7 +12,6 @@ var _toto = new Audio(); Coin.extension = _toto.canPlayType("audio/x-vorbis") === "" ? ".ogg" : ".mp3"; Coin.prototype.init = function(x,y,z) { - Coin.nextSound = new Audio(static_path + 'data/music/redcoins/1' + Coin.extension); if (Coin.BASIC_MESH !== null) { this.mesh = Coin.BASIC_MESH.clone(); this.mesh.position.x = x; @@ -81,22 +80,28 @@ Coin.BASIC_MESH = null; Coin._loader = new THREE.OBJLoader(); Coin.init = function(scale) { - if (scale === undefined) { - scale = 0.005; - } + if (!Coin.initialized) { + Coin.initialized = true; - Coin._loader.load( - static_path + 'data/coin/Coin.obj', - function(object) { - object.traverse(function (mesh) { - if (mesh instanceof THREE.Mesh) { - mesh.scale.set(scale,scale,scale); - mesh.material.color.setHex(0xff0000); - mesh.geometry.computeVertexNormals(); - mesh.raycastable = true; - Coin.BASIC_MESH = mesh - } - }); + if (scale === undefined) { + scale = 0.005; } - ); + + Coin._loader.load( + static_path + 'data/coin/Coin.obj', + function(object) { + object.traverse(function (mesh) { + if (mesh instanceof THREE.Mesh) { + mesh.scale.set(scale,scale,scale); + mesh.material.color.setHex(0xff0000); + mesh.geometry.computeVertexNormals(); + mesh.raycastable = true; + Coin.BASIC_MESH = mesh + } + }); + } + ); + + Coin.nextSound = new Audio(static_path + 'data/music/redcoins/1' + Coin.extension); + } } diff --git a/js/prototype/TutorialSteps.js b/js/prototype/TutorialSteps.js index 68d96cc..4c1fe04 100644 --- a/js/prototype/TutorialSteps.js +++ b/js/prototype/TutorialSteps.js @@ -47,7 +47,35 @@ var TutorialSteps = function(tutoCamera) { justclick: false }, { - text: "You got it ! I think you're ready to play !", + text: "You got it ! Try to click on reset camera !", + justclick: false + }, + { + text: "Nice ! Let me introduce you to recommendations", + justclick: true + }, + { + text: "This is a recommendation, by hovering it, you should see a preview, and by clicking on it, you should go to the recommended viewpoint", + justclick: false + }, + { + text: "The recommendation will change color once you clicked on it, just like a web link", + justclick:true + }, + { + text: "Here are some more recommendations, try to browse the scene and find the missing red coins (5/8)", + justclick:false + }, + { + text:"6/8 : you can use the arrow buttons to go to the previous / next position", + justclick: false + }, + { + text: "7/8 ! Only one more !", + justclick: false + }, + { + text: "Congratulations ! You've successfully finished the tutorial !", justclick: false } ]; @@ -65,10 +93,7 @@ TutorialSteps.prototype.nextStep = function() { case 2: this.camera.allowed.keyboardRotate = true; break; case 3: this.camera.allowed.keyboardRotate = true; - coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, function() { - self.nextStep(); - self.coins++; - })); + coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback)); coins[coins.length-1].addToScene(scene); break; case 4: @@ -87,6 +112,28 @@ TutorialSteps.prototype.nextStep = function() { coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback)); coins[coins.length-1].addToScene(scene); break; + case 12: + var cam = createPeachCameras(container_size.width(), container_size.height())[2]; + cameras.push(cam); + cam.addToScene(scene); + this.camera.move({ + position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036), + target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745) + }); + break; + case 14: + var cams = createPeachCameras(container_size.width(), container_size.height()); + for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) { + cameras.push(cams[i]); + cams[i].addToScene(scene); + } + + coins.push(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback)); + coins[coins.length-1].addToScene(scene); + coins.push(new Coin(6.694675339780243,-1.2480369397526456,-1.992336719279164, callback)); + coins[coins.length-1].addToScene(scene); + coins.push(new Coin(-2.458336118265302,-1.549510268763568,-11.186153614421212, callback)); + coins[coins.length-1].addToScene(scene); } this.step++; } @@ -97,6 +144,8 @@ TutorialSteps.prototype.nextAction = function() { case 2: return 'rotate-mouse'; case 3: return 'rotate-keyboard'; case 9: return 'translate-keyboard'; + case 11: return 'reset-camera'; + case 13: return 'recommendation'; } } @@ -113,15 +162,15 @@ TutorialSteps.prototype.alert = function(myString, justclicked) { TutorialSteps.prototype.notify = function(myString, justclick) { $('#alert-placeholder').html( - '
' + + '
' + (justclick ? '' : '') + - '' + + '' + myString + - '' + + '' + '
' ); } diff --git a/js/prototype/initScene.js b/js/prototype/initScene.js index 8c26c3a..68d998b 100644 --- a/js/prototype/initScene.js +++ b/js/prototype/initScene.js @@ -176,21 +176,33 @@ function createPeachCameras(width, height) { new THREE.Vector3(-19.756833131355208, -16.20027570329664, -33.02132017177813) )); - cams.push(createCamera( - new THREE.Vector3(1.3304975149911331, 0.4836093721106701, -8.60618907952783), - new THREE.Vector3(-1.7713635815431914, 6.271997833695163, -48.06341930106774) - )); + // cams.push(createCamera( + // new THREE.Vector3(1.3304975149911331, 0.4836093721106701, -8.60618907952783), + // new THREE.Vector3(-1.7713635815431914, 6.271997833695163, -48.06341930106774) + // )); - cams.push(createCamera( - new THREE.Vector3(1.2976081760482443, 1.1520399813234647, -10.258148122402845), - new THREE.Vector3(-26.00651734173549, -9.19681009597505, -37.596510029925945) - )); + // cams.push(createCamera( + // new THREE.Vector3(1.2976081760482443, 1.1520399813234647, -10.258148122402845), + // new THREE.Vector3(-26.00651734173549, -9.19681009597505, -37.596510029925945) + // )); cams.push(createCamera( new THREE.Vector3(0.15727187830660858, 2.7251137440572855, -5.84333603646124), new THREE.Vector3(19.33738702531091, -13.614383891308975, -36.91010284556961) )); + cams.push(createCamera( + new THREE.Vector3(-3.912436457101955,1.4571795397310319,-7.361700012948173), + new THREE.Vector3(26.60153755572943,-12.280244389383581,-29.274722938506393) + )); + + cams.push(createCamera( + new THREE.Vector3(4.734058048040269,0.9171350442568073,0.12604632828978296), + new THREE.Vector3(25.163187055614348,-27.08137327531798,-19.842284094421995) + )); + + cams.forEach(function(cam) {cam.setSize(0.2);}); + return cams; }