Tutorial is now clean (well.. let's say cleaner)

js/l3d/apps/prototype/GlobalFunctions.js

@@ -96,6 +96,7 @@ function objectClickerOnClick(camera1, buttonManager, recommendations, coins) {
 
         } else if (obj instanceof L3D.BaseRecommendation) {
 
+            obj.check();
             camera1.moveHermite(obj);
 
             // Send event to DB

js/l3d/apps/prototype/tutorial/TutoCamera.js

@@ -76,7 +76,7 @@ var TutoCamera = function() {
     this.collisions = true;
 
     // Create tutorial
-    this.tutorial = new TutorialSteps(this, scene, coins, this.onWindowResize, container_size);
+    this.tutorial = new TutorialSteps(this, scene, coins, this.onWindowResize, container_size, arguments[10]);
 
     this.shouldLock = true;
 

js/l3d/apps/prototype/tutorial/TutorialSteps.js

@@ -1,5 +1,5 @@
 var nextStep;
-var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container_size) {
+var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container_size, clickableObjects) {
     this.camera = tutoCamera;
     this.step = 0;
     this.coinNumber = 0;
@@ -7,6 +7,7 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container
     this.onWindowResize = onWindowResize;
     this.container_size = container_size;
     this.coins = coins;
+    this.clickableObjects = clickableObjects;
 
     this.instructions = [
         {
@@ -103,6 +104,18 @@ TutorialSteps.prototype.setCameras = function(cameras) {
     this.cameras = cameras;
 };
 
+TutorialSteps.prototype.addCoin = function(coin) {
+    this.coins.push(coin);
+    coin.addToScene(this.scene);
+    this.clickableObjects.push(coin);
+}
+
+TutorialSteps.prototype.addRecommendation = function(reco) {
+    this.cameras.push(reco);
+    reco.addToScene(this.scene);
+    this.clickableObjects.push(reco);
+}
+
 TutorialSteps.prototype.nextStep = function() {
     if (this.step < this.instructions.length) {
         this.alert(this.instructions[this.step].text, this.instructions[this.step].justclick);
@@ -117,19 +130,15 @@ TutorialSteps.prototype.nextStep = function() {
                 Coin.max = 1;
                 Coin.update();
                 this.camera.allowed.keyboardRotate    = true;
-                this.coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback));
+                this.addCoin(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback));
-                this.coins[this.coins.length-1].addToScene(this.scene);
                 document.getElementById('container').appendChild(Coin.domElement);
                 break;
             case 6:
                 Coin.max = 4;
                 Coin.update();
-                this.coins.push(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback));
+                this.addCoin(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback));
-                this.coins[this.coins.length-1].addToScene(this.scene);
+                this.addCoin(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback));
-                this.coins.push(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback));
+                this.addCoin(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback));
-                this.coins[this.coins.length-1].addToScene(this.scene);
-                this.coins.push(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback));
-                this.coins[this.coins.length-1].addToScene(this.scene);
                 break;
             case 9:
                 this.camera.move(this.camera.resetElements);
@@ -140,8 +149,7 @@ TutorialSteps.prototype.nextStep = function() {
             case 11:
                 Coin.max = 5;
                 Coin.update();
-                this.coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
+                this.addCoin(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
-                this.coins[this.coins.length-1].addToScene(this.scene);
                 this.camera.move({
                     position: new THREE.Vector3(-0.3528994281499122,-0.026355227893303856,-0.2766844454377826),
                     target: new THREE.Vector3(13.645394042405439,12.337463485871524,-35.64876053273249)
@@ -149,8 +157,7 @@ TutorialSteps.prototype.nextStep = function() {
                 break;
             case 14:
                 var cam = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height())[2];
-                this.cameras.push(cam);
+                this.addRecommendation(cam);
-                cam.addToScene(this.scene);
                 this.camera.move({
                     position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036),
                     target:  new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745)
@@ -159,17 +166,13 @@ TutorialSteps.prototype.nextStep = function() {
             case 16:
                 var cams = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height());
                 for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) {
-                    this.cameras.push(cams[i]);
+                    this.addRecommendation(cams[i]);
-                    cams[i].addToScene(this.scene);
                 }
                 Coin.max = 8;
                 Coin.update();
-                this.coins.push(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback));
+                this.addCoin(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback));
-                this.coins[this.coins.length-1].addToScene(this.scene);
+                this.addCoin(new Coin(6.694675339780243,-1.2480369397526456,-1.992336719279164, callback));
-                this.coins.push(new Coin(6.694675339780243,-1.2480369397526456,-1.992336719279164, callback));
+                this.addCoin(new Coin(-2.458336118265302,-1.549510268763568,-11.186153614421212, callback));
-                this.coins[this.coins.length-1].addToScene(this.scene);
-                this.coins.push(new Coin(-2.458336118265302,-1.549510268763568,-11.186153614421212, callback));
-                this.coins[this.coins.length-1].addToScene(this.scene);
                 break;
         }
         this.step++;

js/l3d/apps/prototype/tutorial/main.js

@@ -1,63 +1,76 @@
-var beenFullscreen = false;
+// Let's be sure we avoid using global variables
-var isFullscreen = false;
-
-var main_section = document.getElementById('main-section');
-
-var container_size = {
-        width: function() { return 1134; },
-            height: function() { return 768; }
-};
-
 var onWindowResize = (function() {
 
 // Disable scrolling
 window.onscroll = function () { window.scrollTo(0, 0); };
 
-var mesh_number = 25;
+window.onload = main;
-var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0};
+
-var bigmesh;
-var raycaster;
-var objects = [];
-var cameras, cameraSelecter;
-var spheres = new Array(mesh_number);
-var visible = 0;
 var stats;
+var renderer, scene, container;
+var clickableObjects = [];
+var recommendations, objectClicker;
 var previewer;
-var loader;
+var camera1;
 var coins = [];
 var previousTime;
+var pointer;
+var startCanvas;
 var tutorial;
-var camera1;
 
-init();
+function main() {
-animate();
+
+    // Main container that holds everything
+    container = document.getElementById('container');
+
+    // Initialization
+    initThreeElements();
+    initCanvases();
+    initModels();
+    initListeners();
+
+    appendTo(container)(stats, Coin, startCanvas, pointer, previewer, renderer);
+
+    // Set the good size of cameras
+    onWindowResize();
+
+    Coin.update();
+
+    // Start tutorial
+    tutorial.setCameras(recommendations);
+    tutorial.nextStep();
+
+    startCanvas.render(L3D.StartCanvas.Black);
+
+    // Start rendering
+    setInterval(render, 20);
+
+}
+
+function initThreeElements() {
 
-function init() {
     // Initialize scene
     scene = new THREE.Scene();
-
-    // Disable log for this time
-    L3D.BD.disable();
-
-    // Collidable objects to prevent camera from traversing objects
-    var collidableObjects = [];
-
-    // Initialize renderer
-    container = document.getElementById('container');
-    container.style.height = container_size.height() + 'px';
-    container.style.width = container_size.width() + 'px';
     renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
-    renderer.setSize(container_size.width(), container_size.height());
-    // renderer.setSize(container_size.width(), container_size.height());
-    renderer.shadowMapEnabled = true;
     renderer.setClearColor(0x87ceeb);
 
+    // Initialize pointer camera
+    camera1 = new TutoCamera(
+        50,
+        container_size.width() / container_size.height(),
+        0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container, clickableObjects
+    );
+
+    tutorial = camera1.tutorial;
+
+}
+
+function initCanvases() {
+
     // Initialize previewer
     previewer = new L3D.Previewer(renderer, scene);
     previewer.domElement.style.position ="absolute";
     previewer.domElement.style.cssFloat = 'top-left';
-    previewer.domElement.width = container_size.width();
-    previewer.domElement.height = container_size.height();
 
     // Initialize stats counter
     stats = new Stats();
@@ -65,81 +78,61 @@ function init() {
     stats.domElement.style.position = 'absolute';
     stats.domElement.style.cssFloat = "top-left";
 
-    camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container);
-
     // Initialize pointer for pointer lock
-    var pointer = new L3D.MousePointer(camera1);
+    pointer = new L3D.MousePointer(camera1);
-    pointer.domElement.width = container_size.width();
-    pointer.domElement.height = container_size.height();
 
-    //
+    // Init start canvas
-    var startCanvas = new L3D.StartCanvas(camera1);
+    startCanvas = new L3D.StartCanvas(camera1);
-    startCanvas.domElement.width = container_size.width();
-    startCanvas.domElement.height = container_size.height();
-    startCanvas.render();
 
-    // 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(renderer.domElement);
 
-    // Initialize pointer camera
+function initModels() {
-    tutorial = camera1.tutorial;
 
-    cameras = [];
+    // Init recommendations
-    tutorial.setCameras(cameras);
+    recommendations = L3D.initPeach(camera1, scene, coins, clickableObjects);
 
-    // Load peach scene
+    // init clickable objects
-    L3D.initPeach(camera1, scene);
+    var i;
+    for (i = 0; i < coins.length; i++)
+        clickableObjects.push(coins[i]);
 
-    initListeners();
+    for (i =0; i < recommendations.length; i++)
+        clickableObjects.push(recommendations[i]);
 
-    tutorial.nextStep();
-
-    setInterval(animate, 20);
 }
 
 function initListeners() {
+
+    // Add listeners
     window.addEventListener('resize', onWindowResize, false);
 
-    // Transmit click event to camera selecter
-    container.addEventListener('mousedown', function(event) {
-        if (event.which == 1)
-            cameraSelecter.click(event);
-        }, false
-    );
-
-    // Update camera selecter when mouse moved
-    container.addEventListener('mousemove', function(event) {
-            cameraSelecter.update(event);
-        }, false
-    );
-
-    // Escape key to exit fullscreen mode
-    document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
-
     // HTML Bootstrap buttons
-    buttonManager = new ButtonManager(camera1, cameras, previewer);
+    buttonManager = new ButtonManager(camera1, recommendations, previewer);
+
+    // Object clicker for hover and clicking recommendations
+    objectClicker = new L3D.ObjectClicker(
+        renderer,
+        camera1,
+        clickableObjects,
+        objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function
+        objectClickerOnClick(camera1, buttonManager, recommendations, coins), // Create onClick function
+        container
+    );
 
-    // Camera selecter for hover and clicking recommendations
-    cameraSelecter = new L3D.CameraSelecter(renderer, scene, camera1, cameras, coins, buttonManager);
 }
 
-
 function render() {
-    cameraSelecter.update();
+
+    // Stats for render
+    stats.begin();
+
+    objectClicker.update();
 
     // Update recommendations (set raycastable if shown)
-    var transform = buttonManager.showArrows ? show : hide;
+    recommendations.map(function(reco) {
-    cameras.map(function(camera) {
+        if (reco instanceof Recommendation) {
-        if (camera instanceof Recommendation) {
+            reco.traverse(function(elt) {
-            transform(camera);
+                elt.visible = elt.raycastable = buttonManager.showArrows;
-
-            camera.traverse(function(elt) {
-                elt.raycastable = buttonManager.showArrows;
             });
         }
     });
@@ -153,7 +146,7 @@ function render() {
     previousTime = Date.now();
 
     // Update the recommendations
-    cameras.map(function(camera) {camera.update(camera1);});
+    recommendations.map(function(reco) { reco.update(camera1);});
 
     // Set current position of camera
     camera1.look();
@@ -162,87 +155,38 @@ function render() {
     renderer.setScissor(left, bottom, width, height);
     renderer.enableScissorTest(true);
     renderer.setViewport(left, bottom, width, height);
-    THREEx.Transparency.update(camera1);
     renderer.render(scene, camera1);
 
     // Remove borders of preview
     previewer.clear();
 
     // Hide arrows in recommendation
-    cameras.map(function(camera) { if (camera instanceof Recommendation) hide(camera); });
+    recommendations.map(function(reco) { if (reco instanceof Recommendation) hide(reco); });
+
+    // Update transparent elements
+    THREEx.Transparency.update(camera1);
 
     // Render preview
-    previewer.render(cameraSelecter.prev, container_size.width(), container_size.height());
+    previewer.render(container_size.width(), container_size.height());
-}
 
-function animate() {
+    // Finish stats
-    // Render each frame
-    // requestAnimationFrame(animate);
-
-    // stats count the number of frames per second
-    stats.begin();
-    render();
     stats.end();
+
 }
 
 function onWindowResize() {
 
-    container.style.width = container_size.width() + "px";
+    resizeElements(renderer, container, previewer, Coin, pointer, startCanvas);
-    container.style.height = container_size.height() + "px";
 
-    previewer.domElement.width = container_size.width();
+    recommendations.forEach(function(reco) {
-    previewer.domElement.height = container_size.height();
+        resetCameraAspect(reco.camera, container_size.width(), container_size.height());
+    });
 
-    renderer.setSize(container_size.width(), container_size.height());
-    cameras.forEach(function(camera) {camera.camera.aspect = container_size.width() / container_size.height();});
-    cameras.forEach(function(camera) {camera.camera.updateProjectionMatrix();});
     render();
+
 }
 
-function hide(object) {
+// onWindowResize will be the only global function
-    object.traverse(function(object) {object.visible = false;});
-}
-
-function show(object) {
-    object.traverse(function(object) {object.visible = true;});
-}
-
 return onWindowResize;
 
 })();
-
-function fullscreen() {
-    isFullscreen = true;
-
-    if (!beenFullscreen) {
-        beenFullscreen = true;
-        alert('To quit fullscren mode, type ESC key');
-    }
-
-    container.style.position = "absolute";
-    container.style.cssFloat = "top-left";
-    container.style.top = "50px";
-    container.style.bottom = "0px";
-    container.style.left = "0px";
-    container.style.right = "0px";
-    container.style.width="";
-    container.style.height="";
-    container.style.overflow = "hidden";
-
-    onWindowResize();
-}
-
-function stopFullscreen() {
-    isFullscreen = false;
-
-    container.style.position = "";
-    container.style.cssFloat = "";
-    container.style.top = "";
-    container.style.bottom = "";
-    container.style.left = "";
-    container.style.right = "";
-    container.style.width = container_size.width() + "px";
-    container.style.height = container_size.height() + "px";
-
-    onWindowResize();
-}