Tutorial finished

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;

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.firstReco = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height())[0];
-                this.addRecommendation(cam);
+                this.addRecommendation(this.firstReco);
                 this.camera.move({
-                    position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036),
+                    position: new THREE.Vector3(-9.157274598933608,3.6852142459329533,2.1820896816244444),
-                    target:  new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745)
+                    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';
     }
 };
 

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;
+    // var i;
-    for (i = 0; i < coins.length; i++)
+    // for (i = 0; i < coins.length; i++)
-        clickableObjects.push(coins[i]);
+    //     clickableObjects.push(coins[i]);
 
-    for (i =0; i < recommendations.length; i++)
+    // for (i =0; i < recommendations.length; i++)
-        clickableObjects.push(recommendations[i]);
+    //     clickableObjects.push(recommendations[i]);
 
 }
 

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;
     }

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.line.visible = this.mesh.material.transparent = this.mesh.visible = new_value > 0.1;
-        this.raycastable = this.mesh.material.transparent = this.mesh.visible = false;
 };
 
 L3D.ViewportRecommendation.prototype.setSize = function(size) {

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,