From 5316efcc21a82876a5cfc03069e76fa2fbb9bd79 Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Wed, 22 Jul 2015 17:56:47 +0200 Subject: [PATCH] Tutorial finished --- js/l3d/apps/prototype/tutorial/TutoCamera.js | 2 ++ .../apps/prototype/tutorial/TutorialSteps.js | 29 ++++++++++++++----- js/l3d/apps/prototype/tutorial/main.js | 10 +++---- js/l3d/src/canvases/Previewer.js | 1 - .../recommendations/ViewportRecommendation.js | 5 ++-- js/l3d/src/scenes/initScene.js | 5 ++-- 6 files changed, 34 insertions(+), 18 deletions(-) diff --git a/js/l3d/apps/prototype/tutorial/TutoCamera.js b/js/l3d/apps/prototype/tutorial/TutoCamera.js index 0a0bef8..23a4d71 100644 --- a/js/l3d/apps/prototype/tutorial/TutoCamera.js +++ b/js/l3d/apps/prototype/tutorial/TutoCamera.js @@ -82,6 +82,8 @@ var TutoCamera = function() { this.shouldLogCameraAngles = true; + glob = this; + }; TutoCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype); TutoCamera.prototype.constructor = TutoCamera; diff --git a/js/l3d/apps/prototype/tutorial/TutorialSteps.js b/js/l3d/apps/prototype/tutorial/TutorialSteps.js index 1efb75d..a962932 100644 --- a/js/l3d/apps/prototype/tutorial/TutorialSteps.js +++ b/js/l3d/apps/prototype/tutorial/TutorialSteps.js @@ -74,6 +74,10 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container text: "The recommendation will change color once you clicked on it, just like a web link", justclick:true }, + { + text: "Recommendations can be displayed as arrows, or as viewports", + justclick: false + }, { text: "Here are some more recommendations, try to browse the scene and find the missing red coins", justclick:false @@ -183,23 +187,32 @@ TutorialSteps.prototype.nextStep = function() { }); break; case 14: - var cam = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height())[2]; - this.addRecommendation(cam); + this.firstReco = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height())[0]; + this.addRecommendation(this.firstReco); this.camera.move({ - position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036), - target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745) + position: new THREE.Vector3(-9.157274598933608,3.6852142459329533,2.1820896816244444), + target: new THREE.Vector3(28.719309042259358,-7.287186618613339,-4.523939765031559) }); break; case 16: + this.secondReco = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height(), L3D.ViewportRecommendation)[1]; + this.addRecommendation(this.secondReco); + this.secondReco.raycastable = true; + this.camera.move({ + position: new THREE.Vector3(-4.450089930098798,1.9849620256150362,-6.290933967410013), + target: new THREE.Vector3(-41.36549967804652,3.333580368597787,-21.63478458275742) + }); + break; + case 17: var cams = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height()); - for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) { + for (var i = 2; i < cams.length; i++) { this.addRecommendation(cams[i]); } Coin.total = 1; Coin.max = 8; Coin.update(); var coins = L3D.generateCoins(L3D.createPeachCoins()); - for (var i = 0; i < coins.length; i++) { + for (i = 0; i < coins.length; i++) { coins[i].rotating = true; coins[i].callback = callback; this.addCoin(coins[i]); @@ -219,7 +232,9 @@ TutorialSteps.prototype.nextAction = function() { case 5: return 'rotate-keyboard'; case 11: return 'translate-keyboard'; case 13: return 'reset-camera'; - case 15: return 'recommendation'; + case 15: // Fallthrough + case 16: // Fallthrough + case 17: return 'recommendation'; } }; diff --git a/js/l3d/apps/prototype/tutorial/main.js b/js/l3d/apps/prototype/tutorial/main.js index 2d2aadb..7650e0e 100644 --- a/js/l3d/apps/prototype/tutorial/main.js +++ b/js/l3d/apps/prototype/tutorial/main.js @@ -109,12 +109,12 @@ function initModels() { recommendations = L3D.initPeach(camera1, scene, coins, clickableObjects, null); // init clickable objects - var i; - for (i = 0; i < coins.length; i++) - clickableObjects.push(coins[i]); + // var i; + // for (i = 0; i < coins.length; i++) + // clickableObjects.push(coins[i]); - for (i =0; i < recommendations.length; i++) - clickableObjects.push(recommendations[i]); + // for (i =0; i < recommendations.length; i++) + // clickableObjects.push(recommendations[i]); } diff --git a/js/l3d/src/canvases/Previewer.js b/js/l3d/src/canvases/Previewer.js index 4f91bc6..1f2f3bd 100644 --- a/js/l3d/src/canvases/Previewer.js +++ b/js/l3d/src/canvases/Previewer.js @@ -142,7 +142,6 @@ L3D.Previewer.prototype.render = function(container_width, container_height) { */ L3D.Previewer.prototype.clear = function() { if (this.clearNeeded) { - console.log("Clear"); this.domElement.width = this.domElement.width; this.clearNeeded = false; } diff --git a/js/l3d/src/recommendations/ViewportRecommendation.js b/js/l3d/src/recommendations/ViewportRecommendation.js index 2447215..19b8659 100644 --- a/js/l3d/src/recommendations/ViewportRecommendation.js +++ b/js/l3d/src/recommendations/ViewportRecommendation.js @@ -145,7 +145,7 @@ L3D.ViewportRecommendation.prototype.update = function(position) { // Compute distance between center of camera and position dist = L3D.Tools.norm2(L3D.Tools.diff(position.position, this.camera.position)); - var low_bound = 1; + var low_bound = 0.5; var high_bound = 5; var new_value; var max_value = 0.5; @@ -160,8 +160,7 @@ L3D.ViewportRecommendation.prototype.update = function(position) { this.mesh.material.transparent = new_value < 0.9; this.mesh.material.opacity = new_value; - if (new_value < 0.1) - this.raycastable = this.mesh.material.transparent = this.mesh.visible = false; + this.raycastable = this.line.visible = this.mesh.material.transparent = this.mesh.visible = new_value > 0.1; }; L3D.ViewportRecommendation.prototype.setSize = function(size) { diff --git a/js/l3d/src/scenes/initScene.js b/js/l3d/src/scenes/initScene.js index 8967487..773b018 100644 --- a/js/l3d/src/scenes/initScene.js +++ b/js/l3d/src/scenes/initScene.js @@ -130,11 +130,12 @@ L3D.initZeldaScene = function(scene, collidableObjects, loader) { }; -L3D.createPeachRecommendations = function(width, height) { +L3D.createPeachRecommendations = function(width, height, rec) { var recos = []; + var Reco = rec !== undefined ? rec : Recommendation; var createRecommendation = function(position, target) { - return new Recommendation( + return new Reco( 50, width / height, 1,