Monster commit

js/l3d/apps/prototype/Coin.js

@@ -3,13 +3,21 @@ var Coin = function(x,y,z, callback) {
     this.children = [];
     this.ready = false;
     this.got = false;
-    this.init(x,y,z);
+
+    if (typeof x === 'object') {
+        this.init(x.x, x.y, x.z)
+    } else {
+        this.init(x,y,z);
+    }
+
     this.rotating = true;
     if (callback) {
         this.callback = callback;
     }
 };
 
+Coin.toAdd = [];
+
 function instantToColor(instant) {
 
     var r = Math.floor(255 * instant);
@@ -204,7 +212,12 @@ Coin.prototype.raycast = function(raycaster, intersects) {
 };
 
 Coin.prototype.addToScene = function(scene) {
-    scene.add(this.mesh);
+
+    if (this.mesh === undefined) {
+        Coin.toAdd.push(this, this.mesh, scene);
+    } else {
+        scene.add(this.mesh);
+    }
 };
 
 Coin.prototype.update = function() {
@@ -307,3 +320,9 @@ Coin.init = function(scale) {
         Coin.nextSound = new Audio('/static/data/music/redcoins/1' + Coin.extension);
     }
 };
+
+Coin.Config = {
+    SOME : 1,
+    ALL : 2,
+    NONE : 3
+}

js/l3d/apps/prototype/Coin2.js

@@ -0,0 +1,210 @@
+var Coin = function(x, y, z, callback) {
+
+    THREE.Object3D.apply(this, []);
+
+    if (typeof x === 'number') {
+        this.position.x = x;
+        this.position.y = y;
+        this.position.z = z;
+    } else if (typeof x === 'object') {
+        this.position.x = x.x;
+        this.position.y = x.y;
+        this.position.z = x.z;
+
+        if (typeof y === 'number') {
+            this.scale.set(y, y, y);
+        }
+
+        if (typeof z === 'boolean') {
+            this.visible = z;
+        }
+    }
+
+    this.rotating = true;
+
+    if (typeof callback === 'function') {
+        this.callback = callback;
+    }
+
+    this.raycastable = true;
+
+    this.addChild();
+
+};
+
+Coin.prototype = Object.create(THREE.Object3D.prototype);
+Coin.constructor = Coin;
+
+// Default callback
+Coin.prototype.callback = function() {};
+
+Coin.prototype.addChild = function() {
+
+    if (Coin.BasicMesh instanceof THREE.Mesh) {
+        // if mesh is ready, clone it
+        var mesh = Coin.BasicMesh.clone();
+        mesh.material = mesh.material.clone();
+        this.add(mesh);
+    } else {
+        // Add it later
+        Coin.toAdd.push(this);
+    }
+
+}
+
+Coin.prototype.addToScene = function(scene) {
+    scene.add(this);
+};
+
+Coin.prototype.update = function() {
+
+    if (this.rotating) {
+        this.rotation.y += 0.1;
+    }
+
+    if (this.got) {
+        if (this.children[0].material.opacity > 0.02) {
+
+            // First update
+            this.rotation.y += 0.3;
+            this.position.y += 0.05;
+            this.children[0].material.opacity -= 0.05;
+
+
+        } else {
+
+            this.visible = false;
+            this.raycastable = false;
+
+        }
+
+    }
+
+};
+
+Coin.prototype.get = function() {
+
+    if (this.got) {
+        return;
+    }
+
+    this.got = true;
+
+    this.callback();
+
+    this.children[0].material.transparent = true;
+    this.children[0].material.opacity = 1;
+
+    Coin.sounds[Coin.total ++].play();
+
+    if (typeof Coin.onCoinGot === 'function')
+        Coin.onCoinGot(Coin.total);
+
+    if (Coin.total === Coin.max) {
+
+        // You got the last coin
+        var music = document.getElementById('music');
+        if (music !== null) {
+            var wasPlaying = !music.paused;
+            music.pause();
+            setTimeout(function() {
+                Coin.lastSound.play();
+                setTimeout(function() {
+                    if (wasPlaying) {
+                        music.play();
+                    }
+                }, Coin.lastSound.duration*1000);
+            }, Coin.sounds[0].duration*1000);
+        }
+    }
+
+};
+
+Coin.prototype.raycast = function(raycaster, intersects) {
+
+    if (this.children[0] !== undefined) {
+
+        var intersectsThis = [];
+        this.children[0].raycast(raycaster, intersectsThis);
+
+        // Add closest object
+        if (intersectsThis[0] !== undefined) {
+
+            intersectsThis[0].object = this;
+            intersects.push(intersectsThis[0]);
+
+        }
+
+    }
+
+};
+
+Coin.toAdd = [];
+
+Coin.init = function(scale) {
+
+    if (scale === undefined) {
+        scale = 1;
+    }
+
+    Coin.max = 8;
+
+    if (Coin.initialized === true) {
+        return;
+    }
+
+    Coin.initialized = true;
+
+    var loader = new THREE.OBJLoader();
+
+    loader.load(
+        '/static/data/coin/Coin.obj',
+        function(object) {
+            object.traverse(function(mesh) {
+                if (mesh instanceof THREE.Mesh) {
+                    mesh.raycastable = true;
+                    mesh.scale.set(scale, scale, scale);
+                    mesh.material.color.setHex(0xff0000);
+                    mesh.geometry.computeVertexNormals();
+                    Coin.BasicMesh = mesh;
+                    Coin.addEarlyArrivers();
+                }
+            });
+        }
+    );
+};
+
+Coin.addEarlyArrivers = function() {
+
+    var mesh;
+
+    for (var i = 0; i < Coin.toAdd.length; i++) {
+
+        var coin = Coin.toAdd[i];
+        mesh = Coin.BasicMesh.clone();
+        mesh.material = mesh.material.clone();
+        coin.add(mesh);
+
+    }
+
+};
+
+Coin.init();
+
+Coin.Config = { NONE : 0, SOME : 1, ALL : 2};
+
+// Sounds
+Coin.extension = (new Audio()).canPlayType("audio/x-vorbis") === "" ? ".ogg" : ".mp3";
+
+Coin.sounds = [];
+for (var i = 0; i < 8; i++) {
+
+    Coin.sounds.push(new Audio('/static/data/music/redcoins/' + (i+1) + Coin.extension));
+    Coin.sounds[Coin.sounds.length-1].preload = "auto";
+
+}
+
+Coin.lastSound = new Audio('/static/data/music/starappears' + Coin.extension);
+Coin.lastSound.preload = "auto";
+
+Coin.total = 0;

js/l3d/apps/prototype/CoinCanvas.js

@@ -0,0 +1,108 @@
+var CoinCanvas = (function() {
+
+function instantToColor(instant) {
+
+    var r = Math.floor(255 * instant);
+    var g = Math.floor(255 * (1-instant));
+
+    return 'rgb(' + r + ',' + g + ',0)';
+
+}
+
+
+var CoinCanvas = function() {
+
+    this.domElement = document.createElement('canvas');
+    this.ctx = this.domElement.getContext('2d');
+
+    this.level = 0;
+    this.blinking = false;
+    this.blinkingToRed = true;
+    this.colorInstant = 0;
+
+    this.width = 10;
+    this.height = 100;
+
+};
+
+CoinCanvas.prototype.setSize = function(w, h) {
+
+    this.domElement.width = w;
+    this.domElement.height = h;
+    this.update();
+
+};
+
+CoinCanvas.prototype.update = function() {
+
+    if (this.blinking) {
+
+        this.colorInstant += this.blinkingToRed ? 0.025 : -0.025;
+
+        if (this.colorInstant < 0 || this.colorInstant > 1) {
+
+            this.colorInstant = Math.clamp(this.colorInstant, 0, 1);
+            this.blinkingToRed = !this.blinkingToRed;
+
+        }
+
+    } else {
+
+        this.colorInstant = 0;
+        this.blinkingToRed = true;
+
+    }
+
+    // Some uggly stuff
+    if (document.getElementById('next') !== null)
+        document.getElementById('next').style.background = instantToColor(this.colorInstant);
+
+};
+
+CoinCanvas.prototype.render = function() {
+
+    var x = this.domElement.width * 4.75 / 5;
+
+    this.ctx.save();
+    this.ctx.clearRect(x-70,20,this.width+71,this.height);
+
+    this.ctx.fillStyle = instantToColor(this.colorInstant);
+    this.ctx.fillRect(x,20 + (1-this.level)*this.height,10,(this.level*this.height));
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(x,20);
+    this.ctx.lineTo(x,120);
+    this.ctx.lineTo(x+this.width,120);
+    this.ctx.lineTo(x+this.width,20);
+    this.ctx.stroke();
+
+    this.ctx.fillStyle = 'black';
+    this.ctx.font="20px Arial";
+    this.ctx.fillText('Score', x - 60, 25);
+
+    this.ctx.restore();
+
+};
+
+CoinCanvas.prototype.setLevel = function(newLevel) {
+
+    this.level += 0.01 * Math.sign(newLevel - this.level);
+
+    if (Math.abs(this.level - newLevel) > 0.005) {
+
+        var self = this;
+        setTimeout(function() { self.setLevel(newLevel); }, 50);
+
+    }
+
+};
+
+CoinCanvas.prototype.blink = function(param) {
+
+    this.blinking = param === undefined ? true : !!param;
+
+}
+
+return CoinCanvas;
+
+})();

js/l3d/apps/prototype/GlobalFunctions.js

@@ -107,6 +107,7 @@ function objectClickerOnClick(camera1, buttonManager, recommendations, coins) {
             event.send();
 
             camera1.moveHermite(obj, undefined, event.arrowId);
+
         }
 
         // Update the button manager
@@ -176,8 +177,11 @@ function appendTo(container) {
 
 }
 
-function setNextButton(target) {
-    Coin.blink();
+function setNextButton(target, coinCanvas) {
+
+    if (coinCanvas !== 'undefined')
+        coinCanvas.blink();
+
     $('#next').show();
     $('#next').click(function() {
         window.location = target;

js/l3d/apps/prototype/coin-checker/main.js

@@ -21,23 +21,23 @@ var startCanvas;
 var name;
 
 function sceneName() {
-    switch (initMainScene) {
-        case L3D.initPeach:
-            return 'L3D.initPeach';
-        case L3D.initWhomp:
-            return 'L3D.initWhomp';
-        case L3D.initBobomb:
-            return 'L3D.initBobomb';
-        case L3D.initMountain:
-            return 'L3D.initMountain';
+    switch (SceneClass) {
+        case PeachScene:
+            return 'PeachScene';
+        case Whomp:
+            return 'WhompScene';
+        case Bobomb:
+            return 'BobombScene';
+        case Mountain:
+            return 'MountainScene';
     }
 }
 
 saveCoins = function() {
 
     var tmp = 0;
-    for (var i = 0; i < coins.length; i++) {
-        if (coins[i].mesh.visible)
+    for (var i = 0; i < scene.coins.length; i++) {
+        if (scene.coins[i].visible)
             tmp++;
     }
 
@@ -48,6 +48,7 @@ saveCoins = function() {
 };
 
 function main() {
+
     // Some config
     L3D.DB.disable();
 
@@ -90,7 +91,7 @@ function main() {
 function initThreeElements() {
 
     // Initialize scene
-    scene = new THREE.Scene();
+    scene = new SceneClass();
     renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
     renderer.setClearColor(0x87ceeb);
 
@@ -101,6 +102,10 @@ function initThreeElements() {
         0.01, 100000, renderer, container
     );
 
+    scene.setCamera(camera1);
+    scene.load();
+    scene.addCoins({type: Coin.Config.ALL});
+
     camera1.collisions = false;
 
 }
@@ -128,22 +133,22 @@ function initCanvases() {
 
 function initModels() {
 
-    var i = 0;
+    // var i = 0;
 
-    // Init recommendations
-    recommendations = initMainScene(camera1, scene, coins, clickableObjects, []);
+    // // Init recommendations
+    // recommendations = initMainScene(camera1, scene, coins, clickableObjects, []);
 
-    for (i = 0; i < coins.length; i++) {
-        coins[i].rotating = true;
-        clickableObjects.push(coins[i]);
-    }
+    // for (i = 0; i < coins.length; i++) {
+    //     coins[i].rotating = true;
+    //     clickableObjects.push(coins[i]);
+    // }
 
-    setTimeout(saveCoins, 1000);
+    // setTimeout(saveCoins, 1000);
 
-    // Erase recommendations
-    for (i =0; i < recommendations.length; i++)
-        recommendations[i].traverse(function(obj) {obj.visible = false;});
-    recommendations = [];
+    // // Erase recommendations
+    // for (i =0; i < recommendations.length; i++)
+    //     recommendations[i].traverse(function(obj) {obj.visible = false;});
+    // recommendations = [];
 
 }
 
@@ -153,14 +158,14 @@ function initListeners() {
     window.addEventListener('resize', onWindowResize, false);
 
     // HTML Bootstrap buttons
-    buttonManager = new ButtonManager(camera1, recommendations, previewer);
+    buttonManager = new ButtonManager(camera1, scene.recommendations, previewer);
 
     // Object clicker for hover and clicking recommendations
     objectClicker = new L3D.ObjectClicker(
         renderer,
         camera1,
-        clickableObjects,
-        objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function
+        scene.collidableObjects,
+        objectClickerOnHover(camera1, previewer, scene.recommendations, container), // Create onHover function
 
         // onclick
         function(c, x, y, event) {
@@ -180,7 +185,7 @@ function initListeners() {
 
                 if (c.object instanceof Coin) {
 
-                    c.object.mesh.visible = false;
+                    c.object.visible = false;
                     c.object.raycastable = false;
 
                 } else {
@@ -214,7 +219,7 @@ function render() {
     objectClicker.update();
 
     // Update recommendations (set raycastable if shown)
-    recommendations.map(function(reco) {
+    scene.recommendations.map(function(reco) {
         if (reco instanceof Recommendation) {
             reco.traverse(function(elt) {
                 elt.visible = elt.raycastable = buttonManager.showArrows;
@@ -223,7 +228,7 @@ function render() {
     });
 
     // Update coins
-    coins.forEach(function(coin) { coin.update(); });
+    scene.coins.forEach(function(coin) { coin.update(); });
 
     // Update main camera
     var currentTime = Date.now() - previousTime;
@@ -231,7 +236,7 @@ function render() {
     previousTime = Date.now();
 
     // Update the recommendations
-    recommendations.map(function(reco) { reco.update(camera1);});
+    scene.recommendations.map(function(reco) { reco.update(camera1);});
 
     // Set current position of camera
     camera1.look();
@@ -246,7 +251,7 @@ function render() {
     previewer.clear();
 
     // Hide arrows in recommendation
-    recommendations.map(function(reco) { if (reco instanceof Recommendation) hide(reco); });
+    scene.recommendations.map(function(reco) { if (reco instanceof Recommendation) hide(reco); });
 
     // Update transparent elements
     THREEx.Transparency.update(camera1);
@@ -263,7 +268,7 @@ function onWindowResize() {
 
     resizeElements(renderer, container, previewer, pointer, startCanvas);
 
-    recommendations.forEach(function(reco) {
+    scene.recommendations.forEach(function(reco) {
         resetCameraAspect(reco.camera, containerSize.width(), containerSize.height());
     });
 

js/l3d/apps/prototype/interactive/main.js

@@ -14,7 +14,7 @@ L3D.ProgressiveLoader.onFinished = function() {
         coins[i].mesh.visible = true;
     }
 
-    if (initMainScene !== L3D.initSponza)
+    if (GLOB.initMainScene !== L3D.initSponza)
         loadingCanvas.clear();
 
     L3D.DB.enable();
@@ -37,6 +37,7 @@ var previousTime;
 var pointer;
 var startCanvas;
 var loadingCanvas;
+var coinCanvas;
 
 // window.onbeforeunload = function() {
 //
@@ -51,10 +52,12 @@ var loadingCanvas;
 var nextPage = '/prototype/play';
 
 Coin.onCoinGot = function(coin) {
+    coinCanvas.setLevel(Coin.total / Coin.max);
+
     if (coin === 6) {
-        setTimeout(function() { setNextButton(nextPage); }, 60*1000);
+        setTimeout(function() { setNextButton(nextPage, coinCanvas); }, 60*1000);
     } else if (coin === 8) {
-        setNextButton(nextPage);
+        setNextButton(nextPage, coinCanvas);
     }
 };
 
@@ -69,22 +72,23 @@ function main() {
     initModels();
     initListeners();
 
-    appendTo(container)(stats, Coin, startCanvas, pointer, previewer, /*loadingCanvas,*/ renderer);
-    // appendTo(container)(startCanvas, pointer, previewer, renderer);
+    if (GLOB.hideBeforeLoading === true) {
+        appendTo(container)(stats, coinCanvas, startCanvas, pointer, previewer, loadingCanvas, renderer);
+        loadingCanvas.render();
+    } else
+        appendTo(container)(startCanvas, pointer, previewer, renderer);
 
     // Set the good size of cameras
     onWindowResize();
 
-    Coin.update(true);
+    coinCanvas.update(true);
 
-    if (initMainScene !== L3D.initSponza)
-        loadingCanvas.render();
 
-    if (locked !== undefined && locked)
+    if (GLOB.locked !== undefined && GLOB.locked)
         startCanvas.render();
 
     // Some config
-    if (initMainScene !== L3D.initPeach && initMainScene !== L3D.initSponza)
+    if (GLOB.initMainScene !== L3D.initPeach && GLOB.initMainScene !== L3D.initSponza)
         setInterval(function() {logfps(stats.getFps());}, 500);
     else
         L3D.DB.disable();
@@ -113,35 +117,36 @@ function main() {
 function initThreeElements() {
 
     // Initialize scene
-    scene = new THREE.Scene();
+    scene = new GLOB.SceneClass();
+    scene.addEventListener('onload', function() { loadingCanvas.clear(); });
     renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
     renderer.setClearColor(0x87ceeb);
 
-    var loader = new THREE.OBJLoader();
+    // var loader = new THREE.OBJLoader();
 
-    loader.load(
-        '/static/data/coin/Coin.obj',
-        function(object) {
-            object.traverse(function (mesh) {
-                if (mesh instanceof THREE.Mesh) {
-                    mesh.scale.set(0.01,0.01,0.01);
-                    mesh.material.color.setHex(0xffff00);
-                    mesh.geometry.computeVertexNormals();
-                    mesh.raycastable = true;
-                    mesh.position.copy(new THREE.Vector3(-23.85237224023958,12.30017484578007,2.883526209796364));
-                    scene.add(mesh);
+    // loader.load(
+    //     '/static/data/coin/Coin.obj',
+    //     function(object) {
+    //         object.traverse(function (mesh) {
+    //             if (mesh instanceof THREE.Mesh) {
+    //                 mesh.scale.set(0.01,0.01,0.01);
+    //                 mesh.material.color.setHex(0xffff00);
+    //                 mesh.geometry.computeVertexNormals();
+    //                 mesh.raycastable = true;
+    //                 mesh.position.copy(new THREE.Vector3(-23.85237224023958,12.30017484578007,2.883526209796364));
+    //                 scene.add(mesh);
 
-                    newMesh = mesh.clone();
-                    newMesh.position.copy(new THREE.Vector3(-8.225753727064939,11.932703941399415,8.637544772060489));
-                    scene.add(newMesh);
+    //                 newMesh = mesh.clone();
+    //                 newMesh.position.copy(new THREE.Vector3(-8.225753727064939,11.932703941399415,8.637544772060489));
+    //                 scene.add(newMesh);
 
-                    newMesh.position.copy(new THREE.Vector3(18.198980821370327,2.5219742652442885,10.741621475827422));
-                    scene.add(newMesh);
+    //                 newMesh.position.copy(new THREE.Vector3(18.198980821370327,2.5219742652442885,10.741621475827422));
+    //                 scene.add(newMesh);
 
-                }
-            });
-        }
-    );
+    //             }
+    //         });
+    //     }
+    // );
 
     // Initialize pointer camera
     camera1 = new L3D.PointerCamera(
@@ -150,9 +155,19 @@ function initThreeElements() {
         0.01, 100000, renderer, container
     );
 
+    scene.setCamera(camera1);
+
+    scene.load(GLOB.prefetch, GLOB.lowRes);
+
+    scene.addRecommendations(GLOB.Recommendation);
+
+    scene.addCoins(GLOB.coinConfig);
+
+    camera1.collidableObjects = scene.collidableObjects;
+
     // Get default param for camera lock
-    document.getElementById('lock').checked = window.locked;
-    camera1.shouldLock = window.locked;
+    document.getElementById('lock').checked = GLOB.locked;
+    camera1.shouldLock = GLOB.locked;
     camera1.onPointerLockChange();
 
 }
@@ -170,28 +185,32 @@ function initCanvases() {
     stats.domElement.style.position = 'absolute';
     stats.domElement.style.cssFloat = "top-left";
 
+    // Initialize coin counter
+    coinCanvas = new CoinCanvas();
+    coinCanvas.domElement.style.position = 'absolute';
+    coinCanvas.domElement.style.cssFloat = 'top-left';
+
     // Initialize pointer for pointer lock
     pointer = new L3D.MousePointer(camera1);
 
     // Init start canvas
     startCanvas = new L3D.StartCanvas(camera1);
 
-    if (initMainScene !== L3D.initSponza)
-        loadingCanvas = new L3D.LoadingCanvas();
+    loadingCanvas = new L3D.LoadingCanvas();
 }
 
 function initModels() {
 
-    // Init recommendations
-    recommendations = initMainScene(camera1, scene, coins, clickableObjects);
+    // // Init recommendations
+    // recommendations = GLOB.initMainScene(camera1, scene, coins, clickableObjects);
 
-    // init clickable objects
-    var i;
-    for (i = 0; i < coins.length; i++)
-        clickableObjects.push(coins[i]);
+    // // init clickable objects
+    // 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]);
 
 }
 
@@ -207,9 +226,9 @@ function initListeners() {
     objectClicker = new L3D.ObjectClicker(
         renderer,
         camera1,
-        clickableObjects,
-        objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function
-        objectClickerOnClick(camera1, buttonManager, recommendations, coins), // Create onClick function
+        scene.clickableObjects,
+        objectClickerOnHover(camera1, previewer, scene.recommendations, container), // Create onHover function
+        objectClickerOnClick(camera1, buttonManager, scene.recommendations, scene.coins), // Create onClick function
         container
     );
 
@@ -223,8 +242,8 @@ function render() {
     objectClicker.update();
 
     // Update recommendations (set raycastable if shown)
-    recommendations.map(function(reco) {
-        if (reco instanceof Recommendation) {
+    scene.recommendations.map(function(reco) {
+        if (reco instanceof L3D.BaseRecommendation) {
             reco.traverse(function(elt) {
                 elt.visible = elt.raycastable = buttonManager.showArrows;
             });
@@ -232,17 +251,18 @@ function render() {
     });
 
     // Update coins
-    coins.forEach(function(coin) { coin.update(); });
+    scene.coins.forEach(function(coin) { coin.update(); });
 
     // Update main camera
     var currentTime = Date.now() - previousTime;
     camera1.update(isNaN(currentTime) ? 20 : currentTime);
     previousTime = Date.now();
 
-    Coin.update();
+    coinCanvas.update();
+    coinCanvas.render();
 
     // Update the recommendations
-    recommendations.map(function(reco) { reco.update(camera1);});
+    scene.recommendations.map(function(reco) { reco.update(camera1);});
 
     // Set current position of camera
     camera1.look();
@@ -257,7 +277,7 @@ function render() {
     previewer.clear();
 
     // Hide arrows in recommendation
-    recommendations.map(function(reco) { if (reco instanceof Recommendation) hide(reco); });
+    scene.recommendations.map(function(reco) { if (reco instanceof L3D.BaseRecommendation) hide(reco); });
 
     // Update transparent elements
     THREEx.Transparency.update(camera1);
@@ -265,6 +285,7 @@ function render() {
     // Render preview
     previewer.render(containerSize.width(), containerSize.height());
 
+
     // Finish stats
     stats.end();
 
@@ -272,9 +293,9 @@ function render() {
 
 function onWindowResize() {
 
-    resizeElements(renderer, container, previewer, Coin, pointer, startCanvas, loadingCanvas);
+    resizeElements(renderer, container, previewer, coinCanvas, pointer, startCanvas, loadingCanvas);
 
-    recommendations.forEach(function(reco) {
+    scene.recommendations.forEach(function(reco) {
         resetCameraAspect(reco.camera, containerSize.width(), containerSize.height());
     });
 

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

@@ -405,15 +405,15 @@ TutoCamera.prototype.moveHermite = function(recommendation, toSave) {
 };
 
 TutoCamera.prototype.isColliding = function(direction) {
-    this.raycaster.set(this.position, direction.clone().normalize());
-    var intersects = this.raycaster.intersectObjects(this.collidableObjects, true);
+    // this.raycaster.set(this.position, direction.clone().normalize());
+    // var intersects = this.raycaster.intersectObjects(this.collidableObjects, true);
 
-    for (var i in intersects) {
-        if (intersects[i].distance < L3D.Tools.norm(direction) + this.speed * 300 &&
-            intersects[i].object.raycastable) {
-            return intersects[i];
-        }
-    }
+    // for (var i in intersects) {
+    //     if (intersects[i].distance < L3D.Tools.norm(direction) + this.speed * 300 &&
+    //         intersects[i].object.raycastable) {
+    //         return intersects[i];
+    //     }
+    // }
 };
 
 // Look function

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

@@ -121,24 +121,26 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container
 
     this.scene = scene;
 
-    Coin.domElement.style.display = "none";
+    window.coinCanvas = this.coinCanvas = new CoinCanvas();
 };
 
 TutorialSteps.prototype.setCameras = function(cameras) {
     this.cameras = cameras;
 };
 
-TutorialSteps.prototype.addCoin = function(coin) {
-    this.coins.push(coin);
-    coin.mesh.visible = true;
-    coin.addToScene(this.scene);
-    this.clickableObjects.push(coin);
+TutorialSteps.prototype.addCoin = function(x,y,z,callback) {
+    this.scene.createCoin({x:x, y:y, z:z}, undefined, undefined, callback);
+    // this.scene.addCoin(coin);
+    // this.coins.push(coin);
+    // coin.visible = true;
+    // 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.addRecommendation = function(Class, recoId) {
+
+    this.scene.createRecommendation(Class, this.containerSize.width(), this.containerSize.height(), recoId);
+
 };
 
 TutorialSteps.prototype.nextStep = function() {
@@ -164,19 +166,25 @@ TutorialSteps.prototype.nextStep = function() {
                     this.camera.motion[key] = false;
                 }
 
-                Coin.domElement.style.display = "";
+                this.coinCanvas.domElement.style.display = "";
                 Coin.max = 1;
-                Coin.update();
+                this.coinCanvas.update();
                 this.camera.allowed.keyboardRotate    = true;
-                this.addCoin(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback));
-                document.getElementById('container').appendChild(Coin.domElement);
+                this.addCoin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback);
+
+                // Initialize coin counter
+                $('#container').prepend(this.coinCanvas.domElement);
+                // document.getElementById('container').preppendChild(this.coinCanvas.domElement);
+                this.coinCanvas.domElement.style.position = 'absolute';
+                this.coinCanvas.domElement.style.cssFloat = 'top-left';
+                this.coinCanvas.setSize(containerSize.width(), containerSize.height());
                 break;
             case 6:
                 Coin.max = 4;
-                Coin.update();
-                this.addCoin(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback));
-                this.addCoin(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback));
-                this.addCoin(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback));
+                this.coinCanvas.update();
+                this.addCoin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback);
+                this.addCoin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback);
+                this.addCoin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback);
                 break;
             case 9:
                 this.camera.move(this.camera.resetElements);
@@ -186,43 +194,40 @@ TutorialSteps.prototype.nextStep = function() {
                 break;
             case 11:
                 Coin.max = 5;
-                Coin.set();
-                this.addCoin(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
+                this.coinCanvas.setLevel(Coin.total / Coin.max);
+                this.addCoin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback);
                 this.camera.move({
                     position: new THREE.Vector3(-0.3528994281499122,-0.026355227893303856,-0.2766844454377826),
                     target: new THREE.Vector3(13.645394042405439,12.337463485871524,-35.64876053273249)
                 });
                 break;
             case 14:
-                this.firstReco = L3D.createPeachRecommendations(this.containerSize.width(), this.containerSize.height())[0];
-                this.addRecommendation(this.firstReco);
+                this.addRecommendation(L3D.ArrowRecommendation, 0);
+                this.firstReco = this.scene.recommendations[0];
                 this.camera.move({
                     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.containerSize.width(), this.containerSize.height(), L3D.ViewportRecommendation)[1];
-                this.addRecommendation(this.secondReco);
-                this.secondReco.raycastable = true;
+                this.addRecommendation(L3D.ViewportRecommendation, 1);
+                this.secondReco = this.scene.recommendations[1];
                 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.containerSize.width(), this.containerSize.height());
-                for (var i = 2; i < cams.length; i++) {
-                    this.addRecommendation(cams[i]);
+                for (var i = 2; i < PeachScene.recommendations.length; i++) {
+                    this.addRecommendation(L3D.ArrowRecommendation, i);
                 }
                 Coin.total = 0;
                 Coin.max = 8;
-                Coin.set();
-                var coins = L3D.generateCoins(L3D.createPeachCoins());
-                for (i = 0; i < coins.length; i++) {
-                    coins[i].rotating = true;
-                    coins[i].callback = callback;
-                    this.addCoin(coins[i]);
+                this.coinCanvas.setLevel(Coin.total / Coin.max);
+                var currentCoin = this.scene.coins;
+                this.scene.addCoins(GLOB.coinConfig);
+                for (i = currentCoin; i < this.scene.coins.length; i++) {
+                    this.scene.coins[i].callback = callback;
                 }
                 break;
         }

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

@@ -16,15 +16,20 @@ var coins = [];
 var previousTime;
 var pointer;
 var startCanvas;
+var coinCanvas;
+var loadingCanvas;
 var tutorial;
 
 var nextPage = '/before-begin';
 
 Coin.onCoinGot = function(val) {
+
+    coinCanvas.setLevel(Coin.total / Coin.max);
+
     if (val === 6) {
-        setTimeout(function() {setNextButton(nextPage); }, 60*1000);
+        setTimeout(function() {setNextButton(nextPage, coinCanvas); }, 60*1000);
     } else if (val === 8) {
-        setNextButton(nextPage);
+        setNextButton(nextPage, coinCanvas);
     }
 };
 
@@ -49,13 +54,13 @@ function main() {
     initModels();
     initListeners();
 
-    appendTo(container)(stats, Coin, startCanvas, pointer, previewer, renderer);
+    appendTo(container)(stats, startCanvas, pointer, previewer, loadingCanvas, renderer);
+
+    loadingCanvas.render();
 
     // Set the good size of cameras
     onWindowResize();
 
-    Coin.update(true);
-
     // Start tutorial
     tutorial.setCameras(recommendations);
     tutorial.nextStep();
@@ -87,7 +92,9 @@ function main() {
 function initThreeElements() {
 
     // Initialize scene
-    scene = new THREE.Scene();
+    scene = new PeachScene();
+    scene.addEventListener('onload', function() { loadingCanvas.clear(); });
+
     renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
     renderer.setClearColor(0x87ceeb);
 
@@ -95,9 +102,14 @@ function initThreeElements() {
     camera1 = new TutoCamera(
         50,
         containerSize.width() / containerSize.height(),
-        0.01, 100000, renderer, scene, onWindowResize, containerSize, coins, container, clickableObjects
+        0.01, 100000, renderer, scene, onWindowResize, containerSize, scene.coins, container, clickableObjects
     );
 
+    coinCanvas = camera1.tutorial.coinCanvas;
+
+    scene.setCamera(camera1);
+    scene.load();
+
     tutorial = camera1.tutorial;
 
 }
@@ -115,6 +127,9 @@ function initCanvases() {
     stats.domElement.style.position = 'absolute';
     stats.domElement.style.cssFloat = "top-left";
 
+
+    loadingCanvas = new L3D.LoadingCanvas();
+
     // Initialize pointer for pointer lock
     pointer = new L3D.MousePointer(camera1);
 
@@ -126,7 +141,7 @@ function initCanvases() {
 function initModels() {
 
     // Init recommendations
-    recommendations = L3D.initPeach(camera1, scene, coins, clickableObjects, null);
+    // recommendations = L3D.initPeach(camera1, scene, coins, clickableObjects, null);
 
     // init clickable objects
     // var i;
@@ -150,9 +165,9 @@ function initListeners() {
     objectClicker = new L3D.ObjectClicker(
         renderer,
         camera1,
-        clickableObjects,
-        objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function
-        objectClickerOnClick(camera1, buttonManager, recommendations, coins), // Create onClick function
+        scene.children,
+        objectClickerOnHover(camera1, previewer, scene.recommendations, container), // Create onHover function
+        objectClickerOnClick(camera1, buttonManager, scene.recommendations, scene.coins), // Create onClick function
         container
     );
 
@@ -166,8 +181,8 @@ function render() {
     objectClicker.update();
 
     // Update recommendations (set raycastable if shown)
-    recommendations.map(function(reco) {
-        if (reco instanceof Recommendation) {
+    scene.recommendations.map(function(reco) {
+        if (reco instanceof L3D.BaseRecommendation) {
             reco.traverse(function(elt) {
                 elt.visible = elt.raycastable = buttonManager.showArrows;
             });
@@ -175,15 +190,18 @@ function render() {
     });
 
     // Update coins
-    coins.forEach(function(coin) { coin.update(); });
+    scene.coins.forEach(function(coin) { coin.update(); });
 
     // Update main camera
     var currentTime = Date.now() - previousTime;
     camera1.update(isNaN(currentTime) ? 20 : currentTime);
     previousTime = Date.now();
 
+    coinCanvas.update();
+    coinCanvas.render();
+
     // Update the recommendations
-    recommendations.map(function(reco) { reco.update(camera1);});
+    scene.recommendations.map(function(reco) { reco.update(camera1);});
 
     // Set current position of camera
     camera1.look();
@@ -198,7 +216,7 @@ function render() {
     previewer.clear();
 
     // Hide arrows in recommendation
-    recommendations.map(function(reco) { if (reco instanceof Recommendation) hide(reco); });
+    scene.recommendations.map(function(reco) { if (reco instanceof L3D.BaseRecommendation) hide(reco); });
 
     // Update transparent elements
     THREEx.Transparency.update(camera1);
@@ -213,9 +231,9 @@ function render() {
 
 function onWindowResize() {
 
-    resizeElements(renderer, container, previewer, Coin, pointer, startCanvas);
+    resizeElements(renderer, container, previewer, coinCanvas, pointer, startCanvas);
 
-    recommendations.forEach(function(reco) {
+    scene.recommendations.forEach(function(reco) {
         resetCameraAspect(reco.camera, containerSize.width(), containerSize.height());
     });