Monster commit

js/Makefile

@@ -6,7 +6,7 @@ else
 	CLOSURE=../utils/simple-compiler/compiler.sh
 endif
 
-all: L3D L3DP Socket Three Stats Bouncing Multisphere StreamingSimulator PrototypeReplay PrototypeInteractive Tutorial TestList CoinCreator CoinViewer CoinChecker StarRating
+all: L3D L3DP Socket Three Stats Bouncing Multisphere StreamingSimulator PrototypeReplay PrototypeInteractive Tutorial TestList CoinCreator CoinViewer CoinChecker StarRating Test
 
 StarRating:
 	cp star-rating.min.js ../static/js/
@@ -35,7 +35,6 @@ L3D:
 		--js l3d/src/cameras/FixedCamera.js \
 		--js l3d/src/cameras/PointerCamera.js \
 		--js l3d/src/scenes/createCoins.js \
-		--js l3d/src/scenes/initScene.js \
 		--js_output_file ../static/js/l3d.min.js
 
 TestList:
@@ -48,8 +47,18 @@ TestList:
 L3DP:
 	$(CLOSURE) $(OPT) \
 		--js l3d/apps/prototype/ButtonManager.js \
-		--js l3d/apps/prototype/Coin.js \
+		--js l3d/apps/prototype/Coin2.js \
+		--js l3d/apps/prototype/CoinCanvas.js \
 		--js l3d/apps/prototype/GlobalFunctions.js \
+		--js l3d/src/scenes/Scene.js \
+		--js l3d/src/scenes/SceneWithCoins.js \
+		--js l3d/src/scenes/PeachScene.js \
+		--js l3d/src/scenes/BobombScene.js \
+		--js l3d/src/scenes/MountainScene.js \
+		--js l3d/src/scenes/WhompScene.js \
+		--js l3d/src/scenes/SponzaScene.js \
+		--js l3d/src/scenes/Coins.js \
+		--js l3d/src/scenes/Recommendations.js \
 		--js_output_file ../static/js/l3dp.min.js
 
 Socket:
@@ -107,18 +116,23 @@ CoinChecker:
 PrototypeReplay:
 	$(CLOSURE) $(OPT) \
 		--js l3d/apps/prototype/ButtonManager.js \
-		--js l3d/apps/prototype/Coin.js \
+		\ # --js l3d/apps/prototype/Coin.js \
 		--js l3d/apps/prototype/replay/main.js \
 		--js_output_file ../static/js/replay.min.js
 
 Tutorial:
 	$(CLOSURE) $(OPT) \
 		--js l3d/apps/prototype/ButtonManager.js \
-		--js l3d/apps/prototype/Coin.js \
+		--js l3d/apps/prototype/Coin2.js \
 		--js l3d/apps/prototype/tutorial/TutoCamera.js \
 		--js l3d/apps/prototype/tutorial/TutorialSteps.js \
 		--js l3d/apps/prototype/tutorial/main.js \
 		--js_output_file ../static/js/tutorial.min.js
 
+Test:
+	$(CLOSURE) $(OPT) \
+		--js l3d/apps/prototype/test/main.js \
+		--js_output_file ../static/js/test.min.js
+
 clean:
 	rm -rf ../static/js/*

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;
+
+    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) {
+
+    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) {
+function setNextButton(target, coinCanvas) {
-    Coin.blink();
+
+    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) {
+    switch (SceneClass) {
-        case L3D.initPeach:
+        case PeachScene:
-            return 'L3D.initPeach';
+            return 'PeachScene';
-        case L3D.initWhomp:
+        case Whomp:
-            return 'L3D.initWhomp';
+            return 'WhompScene';
-        case L3D.initBobomb:
+        case Bobomb:
-            return 'L3D.initBobomb';
+            return 'BobombScene';
-        case L3D.initMountain:
+        case Mountain:
-            return 'L3D.initMountain';
+            return 'MountainScene';
     }
 }
 
 saveCoins = function() {
 
     var tmp = 0;
-    for (var i = 0; i < coins.length; i++) {
+    for (var i = 0; i < scene.coins.length; i++) {
-        if (coins[i].mesh.visible)
+        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
+    // // Init recommendations
-    recommendations = initMainScene(camera1, scene, coins, clickableObjects, []);
+    // recommendations = initMainScene(camera1, scene, coins, clickableObjects, []);
 
-    for (i = 0; i < coins.length; i++) {
+    // for (i = 0; i < coins.length; i++) {
-        coins[i].rotating = true;
+    //     coins[i].rotating = true;
-        clickableObjects.push(coins[i]);
+    //     clickableObjects.push(coins[i]);
-    }
+    // }
 
-    setTimeout(saveCoins, 1000);
+    // setTimeout(saveCoins, 1000);
 
-    // Erase recommendations
+    // // Erase recommendations
-    for (i =0; i < recommendations.length; i++)
+    // for (i =0; i < recommendations.length; i++)
-        recommendations[i].traverse(function(obj) {obj.visible = false;});
+    //     recommendations[i].traverse(function(obj) {obj.visible = false;});
-    recommendations = [];
+    // 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,
+        scene.collidableObjects,
-        objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function
+        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);
+    if (GLOB.hideBeforeLoading === true) {
-    // appendTo(container)(startCanvas, pointer, previewer, renderer);
+        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(
+    // loader.load(
-        '/static/data/coin/Coin.obj',
+    //     '/static/data/coin/Coin.obj',
-        function(object) {
+    //     function(object) {
-            object.traverse(function (mesh) {
+    //         object.traverse(function (mesh) {
-                if (mesh instanceof THREE.Mesh) {
+    //             if (mesh instanceof THREE.Mesh) {
-                    mesh.scale.set(0.01,0.01,0.01);
+    //                 mesh.scale.set(0.01,0.01,0.01);
-                    mesh.material.color.setHex(0xffff00);
+    //                 mesh.material.color.setHex(0xffff00);
-                    mesh.geometry.computeVertexNormals();
+    //                 mesh.geometry.computeVertexNormals();
-                    mesh.raycastable = true;
+    //                 mesh.raycastable = true;
-                    mesh.position.copy(new THREE.Vector3(-23.85237224023958,12.30017484578007,2.883526209796364));
+    //                 mesh.position.copy(new THREE.Vector3(-23.85237224023958,12.30017484578007,2.883526209796364));
-                    scene.add(mesh);
+    //                 scene.add(mesh);
 
-                    newMesh = mesh.clone();
+    //                 newMesh = mesh.clone();
-                    newMesh.position.copy(new THREE.Vector3(-8.225753727064939,11.932703941399415,8.637544772060489));
+    //                 newMesh.position.copy(new THREE.Vector3(-8.225753727064939,11.932703941399415,8.637544772060489));
-                    scene.add(newMesh);
+    //                 scene.add(newMesh);
 
-                    newMesh.position.copy(new THREE.Vector3(18.198980821370327,2.5219742652442885,10.741621475827422));
+    //                 newMesh.position.copy(new THREE.Vector3(18.198980821370327,2.5219742652442885,10.741621475827422));
-                    scene.add(newMesh);
+    //                 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;
+    document.getElementById('lock').checked = GLOB.locked;
-    camera1.shouldLock = window.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();
 }
 
 function initModels() {
 
-    // Init recommendations
+    // // Init recommendations
-    recommendations = initMainScene(camera1, scene, coins, clickableObjects);
+    // recommendations = GLOB.initMainScene(camera1, scene, coins, clickableObjects);
 
-    // init clickable objects
+    // // 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]);
 
 }
 
@@ -207,9 +226,9 @@ function initListeners() {
     objectClicker = new L3D.ObjectClicker(
         renderer,
         camera1,
-        clickableObjects,
+        scene.clickableObjects,
-        objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function
+        objectClickerOnHover(camera1, previewer, scene.recommendations, container), // Create onHover function
-        objectClickerOnClick(camera1, buttonManager, recommendations, coins), // Create onClick 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) {
+    scene.recommendations.map(function(reco) {
-        if (reco instanceof Recommendation) {
+        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());
+    // this.raycaster.set(this.position, direction.clone().normalize());
-    var intersects = this.raycaster.intersectObjects(this.collidableObjects, true);
+    // var intersects = this.raycaster.intersectObjects(this.collidableObjects, true);
 
-    for (var i in intersects) {
+    // for (var i in intersects) {
-        if (intersects[i].distance < L3D.Tools.norm(direction) + this.speed * 300 &&
+    //     if (intersects[i].distance < L3D.Tools.norm(direction) + this.speed * 300 &&
-            intersects[i].object.raycastable) {
+    //         intersects[i].object.raycastable) {
-            return intersects[i];
+    //         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) {
+TutorialSteps.prototype.addCoin = function(x,y,z,callback) {
-    this.coins.push(coin);
+    this.scene.createCoin({x:x, y:y, z:z}, undefined, undefined, callback);
-    coin.mesh.visible = true;
+    // this.scene.addCoin(coin);
-    coin.addToScene(this.scene);
+    // this.coins.push(coin);
-    this.clickableObjects.push(coin);
+    // coin.visible = true;
+    // coin.addToScene(this.scene);
+    // this.clickableObjects.push(coin);
 };
 
-TutorialSteps.prototype.addRecommendation = function(reco) {
+TutorialSteps.prototype.addRecommendation = function(Class, recoId) {
-    this.cameras.push(reco);
+
-    reco.addToScene(this.scene);
+    this.scene.createRecommendation(Class, this.containerSize.width(), this.containerSize.height(), recoId);
-    this.clickableObjects.push(reco);
+
 };
 
 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));
+                this.addCoin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback);
-                document.getElementById('container').appendChild(Coin.domElement);
+
+                // 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.coinCanvas.update();
-                this.addCoin(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback));
+                this.addCoin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback);
-                this.addCoin(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback));
+                this.addCoin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback);
-                this.addCoin(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, 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.coinCanvas.setLevel(Coin.total / Coin.max);
-                this.addCoin(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
+                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(L3D.ArrowRecommendation, 0);
-                this.addRecommendation(this.firstReco);
+                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(L3D.ViewportRecommendation, 1);
-                this.addRecommendation(this.secondReco);
+                this.secondReco = this.scene.recommendations[1];
-                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.containerSize.width(), this.containerSize.height());
+                for (var i = 2; i < PeachScene.recommendations.length; i++) {
-                for (var i = 2; i < cams.length; i++) {
+                    this.addRecommendation(L3D.ArrowRecommendation, i);
-                    this.addRecommendation(cams[i]);
                 }
                 Coin.total = 0;
                 Coin.max = 8;
-                Coin.set();
+                this.coinCanvas.setLevel(Coin.total / Coin.max);
-                var coins = L3D.generateCoins(L3D.createPeachCoins());
+                var currentCoin = this.scene.coins;
-                for (i = 0; i < coins.length; i++) {
+                this.scene.addCoins(GLOB.coinConfig);
-                    coins[i].rotating = true;
+                for (i = currentCoin; i < this.scene.coins.length; i++) {
-                    coins[i].callback = callback;
+                    this.scene.coins[i].callback = callback;
-                    this.addCoin(coins[i]);
                 }
                 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,
+        scene.children,
-        objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function
+        objectClickerOnHover(camera1, previewer, scene.recommendations, container), // Create onHover function
-        objectClickerOnClick(camera1, buttonManager, recommendations, coins), // Create onClick 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) {
+    scene.recommendations.map(function(reco) {
-        if (reco instanceof Recommendation) {
+        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());
     });
 

js/l3d/src/loaders/ProgressiveLoader.js

@@ -208,7 +208,6 @@ var ProgressiveLoader = function(path, scene, camera, callback, log, laggy, pref
         this.camera._moveHermite = this.camera.moveHermite;
 
         this.camera.moveHermite = function() {
-            console.log(arguments);
             self.socket.emit('reco', arguments[2]);
             self.camera._moveHermite.apply(self.camera, arguments);
         };
@@ -282,36 +281,16 @@ ProgressiveLoader.prototype.load = function(callback) {
  * Will return a list representation of the camera (to be sent to the server)
  */
 ProgressiveLoader.prototype.getCamera = function() {
-    if (this.camera === null)
+    if (this.camera === null || typeof this.camera.toList !== 'function')
         return null;
 
     return this.camera.toList();
 };
 
-/**
+ProgressiveLoader.prototype.addElement = function(elt) {
- * Initializes the socket.io functions so that it can discuss with the server
- */
-ProgressiveLoader.prototype.initIOCallbacks = function() {
 
     var self = this;
 
-    this.socket.on('ok', function() {
-        self.socket.emit('materials');
-    });
-
-    this.socket.on('elements', function(arr) {
-
-        // process.stderr.write('Received ' + arr.length + '\n');
-
-        for (var i = 0; i < arr.length; i++) {
-
-            if (typeof self.log === 'function' && self.numberOfFacesReceived % self.modulus === 0) {
-                self.log(self.numberOfFacesReceived, self.numberOfFaces);
-            }
-
-            var elt = _parseList(arr[i]);
-
-            // console.log(elts);
     if (elt.type === 'vertex') {
 
         // New vertex arrived
@@ -420,17 +399,58 @@ ProgressiveLoader.prototype.initIOCallbacks = function() {
 
         }
 
-
-
     } else if (elt.type === 'global') {
 
         self.numberOfFaces = elt.numberOfFaces;
         self.modulus = Math.floor(self.numberOfFaces / 200);
 
     }
+}
+
+ProgressiveLoader.prototype.addElements = function(arr, callback) {
+
+    var self = this;
+
+    var currentTime = Date.now();
+    for (var i = 0; i < 100; i++) {
+
+        if (typeof self.log === 'function' && self.numberOfFacesReceived % self.modulus === 0) {
+            self.log(self.numberOfFacesReceived, self.numberOfFaces);
+        }
+
+        if (arr.length === 0) {
+            // console.log('Time to add : ' + (Date.now() - currentTime) + 'ms');
+            callback();
+            return;
+        }
+
+        elt = _parseList(arr.shift());
+        this.addElement(elt);
 
     }
 
+    // console.log('Time to add : ' + (Date.now() - currentTime) + 'ms');
+    setTimeout(function() { self.addElements(arr, callback); }, 50);
+
+};
+
+/**
+ * Initializes the socket.io functions so that it can discuss with the server
+ */
+ProgressiveLoader.prototype.initIOCallbacks = function() {
+
+    var self = this;
+
+    this.socket.on('ok', function() {
+        self.socket.emit('materials');
+    });
+
+    this.socket.on('elements', function(arr) {
+
+        // process.stderr.write('Received ' + arr.length + '\n');
+
+        self.addElements(arr, function() {
+
             var param;
             if (typeof self.onBeforeEmit === 'function') {
 
@@ -443,9 +463,12 @@ ProgressiveLoader.prototype.initIOCallbacks = function() {
                 if (!self.laggy) {
                     self.socket.emit('next', self.getCamera(), param);
                 } else {
-                setTimeout(function() { self.socket.emit('next', self.getCamera());}, 100);
+                    self.socket.emit('next', self.getCamera());
+                    // setTimeout(function() { self.socket.emit('next', self.getCamera());}, 100);
                 }
             }
+
+        });
     });
 
     this.socket.on('disconnect', function() {
@@ -457,6 +480,10 @@ ProgressiveLoader.prototype.initIOCallbacks = function() {
             L3D.ProgressiveLoader.onFinished();
         }
 
+        if (typeof self.onFinished === 'function') {
+            self.onFinished();
+        }
+
         if (typeof self._callback === 'function') {
             self._callback();
         }

js/l3d/src/recommendations/ViewportRecommendation.js

@@ -107,7 +107,6 @@ L3D.ViewportRecommendation = function(arg1, arg2, arg3, arg4, position, target)
     });
 
     this.mesh = new THREE.Mesh(geometry, material);
-    this.mesh.raycastable = true;
 
     this.object3D = new THREE.Object3D();
     this.object3D.add(this.mesh);

js/l3d/src/scenes/BobombScene.js

@@ -0,0 +1,69 @@
+var BobombScene = function() {
+
+    SceneWithCoins.apply(this, arguments);
+
+};
+
+BobombScene.prototype = Object.create(SceneWithCoins.prototype);
+BobombScene.prototype.constructor = BobombScene;
+BobombScene.super = SceneWithCoins;
+
+BobombScene.prototype.setCamera = function(camera) {
+
+    BobombScene.super.prototype.setCamera.apply(this, arguments);
+    this.camera.speed = 0.005;
+
+};
+
+BobombScene.prototype.load = function(prefetch, lowRes) {
+
+    if (prefetch !== undefined) {
+        this.prefetchType = prefetch;
+    }
+
+    var self = this;
+
+    var path = lowRes === true ?
+        '/static/data/bobomb/bobomb battlefeild.obj' :
+        '/static/data/bobomb/bobomb battlefeild_sub.obj';
+
+    this.loader = new L3D.ProgressiveLoader(
+        path,
+        this,
+        this.camera,
+        function(object) {
+            self.clickableObjects.push(object);
+            object.raycastable = true;
+            if (object.material.name === 'Material.071_574B138E_c.bmp' ||
+                    object.material.name === 'Material.070_41A41EE3_c.bmp') {
+                THREEx.Transparency.push(object);
+            }
+        },
+        L3D.LogFunction,
+        false,
+        this.prefetchType
+    );
+
+    this.loader.onFinished = function() { self.finish(); };
+    this.loader.load();
+
+    this.collidableObjects.push(this.loader.obj);
+    this.clickableObjects.push(this.loader.obj);
+    this.loader.obj.raycastable = true;
+
+};
+
+BobombScene.prototype.getResetElements = function() {
+
+    return {
+        position: new THREE.Vector3(38.115627509754646,10.829803024792419,-19.862035691341315),
+        target: new THREE.Vector3(-1.4518898576752122,5.048214777643772,-18.869661407832535)
+    };
+
+};
+
+BobombScene.prototype.addRecommendations = function(ClassToInstanciate, width, height) {
+
+    BobombScene.super.prototype.addRecommendations.apply(this, [ClassToInstanciate, width, height, 0.2]);
+
+};

js/l3d/src/scenes/Coins.js

@@ -0,0 +1,226 @@
+(function() {
+
+var createCoin = function(x,y,z) { return {x:x, y:y, z:z}; };
+
+Object.defineProperty(BobombScene, 'coins', { value : [
+
+    createCoin(22.280706560196638,13.725108184127997,32.63987169581496),
+    createCoin(33.68386996752998,9.149049511822032,-18.87096639845466),
+    createCoin(33.31162234976524,12.32414579919045,-6.836946838344371),
+    createCoin(-6.542226291552578,12.307520787648738,-3.8865111962674517),
+    createCoin(-17.588830805070085,23.841405751686263,-15.642444636400247),
+    createCoin(-28.08790862463989,23.535010121780253,9.705135663221972),
+    createCoin(-29.379335879791288,29.636026393280783,19.362115621994782),
+    createCoin(-8.706913128046958,21.207848302770593,27.483816887890935),
+    createCoin(-24.72548063753392,20.591109464902217,34.0541482945568),
+    createCoin(6.07341534686721,12.796185940101592,17.78236645564636),
+    createCoin(4.357016920017262,8.472802125274415,-30.529199236505924),
+    createCoin(7.075416030408761,11.236188008723378,-28.279153104743983),
+    createCoin(-17.85785378833318,13.42081721395066,-32.92376411375154),
+    createCoin(-21.894165638010683,11.814166555266736,-5.255205616513877),
+    createCoin(-17.22580655861263,23.787648282246952,-10.519501738826268),
+    createCoin(-11.658290156106773,14.96199347508685,5.941345304662627),
+    createCoin(-25.78117011943424,26.43994174870813,30.057819724644368),
+    createCoin(-37.46335021251167,18.01317284378782,8.350450287883726),
+    createCoin(30.641812668973245,13.456701531305129,8.78531092401407),
+    createCoin(34.99690318172231,6.599314283860151,-19.51747437058566),
+    createCoin(39.78548920384964,8.504766617451741,-10.92760447388268),
+    createCoin(-2.597109598251529,8.486971700465249,-24.582584510999702),
+    createCoin(5.805447133294366,8.693790412992014,-35.94597942222797),
+    createCoin(3.848839227682862,10.057495260813212,-28.91957364641709),
+    createCoin(-34.91410097274436,12.948256334605215,4.639977902891882),
+    createCoin(-17.580776942006928,12.158645450855936,-2.00530419124142),
+    createCoin(-23.633086203984814,20.946576756366067,-7.724484122444523),
+    createCoin(12.060059346958012,8.454084767964286,-3.1277304735459244),
+    createCoin(14.36250035919264,8.73166126857175,1.4477492534911822),
+    createCoin(-16.218272307448657,16.936996249183704,8.964553311468345),
+    createCoin(-14.787118771841405,22.28956331520163,5.701170858620489),
+    createCoin(-19.49674968718237,16.823373907723905,3.00129002841727),
+    createCoin(-18.274615486675373,18.11169567980372,5.413192710005695),
+    createCoin(-40.05855121079914,16.296361694121863,24.89608565964226),
+    createCoin(2.085287403927479,12.313014580177642,24.716973896402656),
+    createCoin(10.084140015471446,8.393366602594998,26.82201810514725),
+    createCoin(7.369218514755171,8.386909613073172,25.59443057728086),
+    createCoin(19.54661324732174,12.517796184205938,22.909169932036246),
+    createCoin(-13.279393664666722,27.159104129475203,25.15379848363141),
+    createCoin(-6.466792705490424,17.217423390347943,16.66922516489268),
+    createCoin(-23.90730055520542,21.2916198624003,5.675908440265029),
+    createCoin(-33.63971840380508,12.692441946606664,-23.501869637528955),
+    createCoin(-33.189652720672896,19.481560373595773,19.21235891953393),
+    createCoin(-15.465717624639543,27.567776547579495,23.421347833030055)
+
+]});
+
+Object.defineProperty(MountainScene, 'coins', { value : [
+
+    createCoin(-26.77972359627476,-19.23929063656664,23.6807547145596),
+    createCoin(-24.921450642761087,-18.790469255696,12.598715548243229),
+    createCoin(-27.462924457464283,-2.307453076982202,27.675888071372412),
+    createCoin(-23.805440095101684,-0.1719164638306439,14.159121596734865),
+    createCoin(-20.56923064468872,6.566093724474566,3.2759960140734043),
+    createCoin(-25.840046212444445,3.0154379627539645,-12.129077180554676),
+    createCoin(-0.12415848898914678,-17.24941169186156,-24.089012115869895),
+    createCoin(20.648080318582544,-17.306545828389865,-14.154882378054586),
+    createCoin(-16.003631234123016,18.504382214049656,-9.02703983024753),
+    createCoin(5.577967875069705,3.1178514503821235,-1.6601071460354084),
+    createCoin(22.806035443552588,-3.0971670654445695,18.953290393314937),
+    createCoin(-6.700701005799521,-1.2267676080840322,28.07123771418613),
+    createCoin(4.055603794907487,3.025509693082835,12.990565917776475),
+    createCoin(2.4669988262462175,11.025589439642443,17.30534563503105),
+    createCoin(12.51818382505787,-9.440727474351826,8.645243996001899),
+    createCoin(-26.076074016668006,-18.87840571816059,32.002286013087854),
+    createCoin(1.8429647422443338,-2.455198049692979,-10.80308353746292),
+    createCoin(-6.21747892581496,-0.5257501180103216,-16.89711795671381),
+    createCoin(-21.49095086819052,3.7275512296245252,-8.44226482363607),
+    createCoin(-14.58598309525653,22.806713675854727,4.568200569926353),
+    createCoin(-8.603785339194546,25.062399119985514,4.48232206645006),
+    createCoin(-11.815100786173247,18.466863109134373,10.128654272554414),
+    createCoin(-12.787271723363242,18.40228976812093,5.566216789152769),
+    createCoin(-17.220480098677484,19.47976935335984,2.9799902027464245),
+    createCoin(-10.674099520815707,19.346742690346296,16.93799634481946),
+    createCoin(-8.639340307313672,17.692716982078288,15.259729023727008),
+    createCoin(4.3234663022220285,3.4336965169129283,3.1679443942435466),
+    createCoin(6.290686214265615,11.806255003988033,1.5636193947234425),
+    createCoin(2.233761057975329,-1.446823000016173,22.993089068680725),
+    createCoin(6.047746047986064,9.759240680469746,-0.3481826858222927),
+    createCoin(9.24608339412142,-2.0739994580633447,1.397081592489799),
+    createCoin(15.978225737202049,-12.555909289569446,-2.544415095587984),
+    createCoin(20.602359244606333,-18.578212012875266,-3.709413959526993),
+    createCoin(21.481883153040474,-19.84520127953089,-5.935726448733311),
+    createCoin(9.624753116227113,-17.30756271726202,-10.359104979485439),
+    createCoin(-8.755271572959066,-7.6507235940364975,-16.199127652743055),
+    createCoin(2.5192303065667567,-19.82819988785104,-7.3369260979084645),
+    createCoin(-7.022727886702514,-11.872857265966088,-15.712138822238375),
+    createCoin(-14.154724198037664,-15.003426075695085,-9.873076641728474),
+    createCoin(-15.716916979988882,-18.423093747206085,-15.472213704667796),
+    createCoin(-24.480069450971794,-17.442577902786574,-20.749219217152703),
+    createCoin(4.3201251132637655,-17.460792435122254,-17.02033011304245),
+    createCoin(-16.496321109266706,-16.343353356378277,18.07293963067476),
+    createCoin(-20.172973006076457,-13.100614083179892,-0.49832953806372876),
+    createCoin(-20.06547322464019,-18.95241746748273,-0.5845240203285288),
+    createCoin(-22.007491760798473,-19.591501271302555,18.477850729222254),
+    createCoin(-22.854665667080386,-16.884639064171605,28.119639649805954),
+    createCoin(-17.29769085333132,-17.151818042801608,30.993589950883457),
+    createCoin(4.852943329227945,-17.535873997327858,26.102584332535134),
+    createCoin(2.593261220769162,-15.395461057611403,25.829152965347365),
+    createCoin(-6.908562178033699,32.80106638936682,4.85365533648689),
+    createCoin(21.09827595444349,-3.544890014535089,25.492155941505793),
+    createCoin(16.890530158892666,-2.9712184775053916,-5.31585260818673),
+    createCoin(-1.2285753132761636,-17.811003980753824,-9.999557691760348),
+    createCoin(-24.07237635277186,-18.934481721030046,8.57395700519537),
+    createCoin(-20.722934565692547,-7.118167856354356,7.974377074791513),
+    createCoin(20.561714283330357,-18.6341310784065,18.39805527882214),
+    createCoin(24.259986388961835,-12.319846691054217,4.917763469897616),
+    createCoin(-19.245096366069788,-0.8405834573654645,28.57153151038993),
+    createCoin(8.896627505662142,-2.0950174205636345,-4.0364039672340954),
+    createCoin(-9.172914017885867,20.94860963300559,-0.9781739897586929),
+    createCoin(-20.232460477765102,17.280387232905237,-7.149223019820442),
+    createCoin(28.585469214270816,-5.216478965606472,17.548380390046493),
+    createCoin(13.559937473254282,-17.718591633441097,-16.649117259984816),
+    createCoin(16.930705171759417,-3.323889301031676,16.024660211914526),
+    createCoin(-14.466017654387972,9.437335214635507,23.3708374112292)
+
+]});
+
+Object.defineProperty(PeachScene, 'coins', { value : [
+
+    createCoin(-5.235079904099125,0.07417208986595411,-8.599114448384936),
+    createCoin(-5.413573667252937,0.19509035740202668,-1.1941904950328774),
+    createCoin(1.6988486739201933,0.4340094146515885,-8.231743908517105),
+    createCoin(4.059418339215546,-0.39753959647229464,-3.743007737798272),
+    createCoin(5.359520735057971,-1.0460829831125231,-5.929936710590241),
+    createCoin(3.4171209844522807,-0.3115318913043405,-7.849159339922742),
+    createCoin(6.41062656545732,-0.03964424070287551,-6.445933178302108),
+    createCoin(-0.02228694178575394,-0.15414844320311738,-1.4228652604536483),
+    createCoin(8.757734361004703,-0.29458111538940124,-3.3125913130702878),
+    createCoin(8.302585268565899,0.5007248161435802,-9.477574353301717),
+    createCoin(1.0403238273317053,0.5157597438067554,-5.758876821657185),
+    createCoin(-3.911676426275694,0.6629865621989456,-11.94799528543801),
+    createCoin(0.4006795688979661,2.73126733573882,-8.621849519941263),
+    createCoin(-1.1567000602429496,0.1828061701367549,-2.667327870723106),
+    createCoin(2.3493996403524253,2.933219948717814,-9.746003678221635),
+    createCoin(1.6284936230963587,1.0700991700466012,-8.233756483213208),
+    createCoin(0.8305866793484089,0.3868270229656463,-8.168979242471513),
+    createCoin(3.702537417257961,-0.7039890131781925,-3.3737023929373584),
+    createCoin(7.074425111212573,-1.7161022225132794,-0.12831816415053726),
+    createCoin(1.3410467484809172,-0.8393585053751593,-6.114677390816905),
+    createCoin(-1.9009579901289306,2.2052128135729396,-8.774087650346281),
+    createCoin(-4.1062114100261145,-0.5212143749458535,-11.706921113910104),
+    createCoin(-2.970948124863709,-1.172944637817793,-8.604431155541283),
+    createCoin(-2.426469598129824,2.072137600699806,-12.218729718965506),
+    createCoin(0.7794664249340597,2.7925839439404854,-10.302177482332139),
+    createCoin(5.233981068386757,1.9710415796271412,-12.274504680729338),
+    createCoin(7.213881245186379,0.6307638436405294,-12.537711969963615),
+    createCoin(4.970356964298655,0.02123190408881173,-8.298321539991543),
+    createCoin(4.984840392222638,0.15529437823205672,-11.372024537645034),
+    createCoin(7.215292338113747,0.36400343947202285,-10.264677357750287),
+    createCoin(0.8597446122999708,-0.1823413609337341,-0.42165089410814194),
+    createCoin(-5.67367276889721,-0.19935110278537033,-3.4448373356576645),
+    createCoin(-1.7232239695669291,0.12547731162803566,-7.762430057088325),
+    createCoin(-4.52233010062471,-0.6747016925374065,-9.879426222859843),
+    createCoin(-3.0899991739423087,1.950429485986166,-11.539535391107139),
+    createCoin(6.211008829792989,-1.599100319706354,-1.6038993962799513),
+    createCoin(-5.570607447671947,-0.12951310999668228,-5.6057736630037205),
+    createCoin(-2.2968843650849298,-0.01952254512159006,-0.05624149941075671),
+    createCoin(4.469158872953901,2.1986881921063888,-8.889915974722207),
+    createCoin(-1.242486274073825,2.2177836261799553,-8.442815806273458),
+    createCoin(-5.8186922804859575,1.9702855951309464,-11.82608205655542)
+
+]});
+
+Object.defineProperty(WhompScene, 'coins', { value : [
+
+    createCoin(-2.4157344935197114,1.017684060480547,-10.032591045262926),
+    createCoin(-7.341855309456012,1.1322896589120628,-9.769992599277385),
+    createCoin(-7.374331362558681,1.071547044674478,-0.9477389539605262),
+    createCoin(-5.531214982794241,2.702752805023566,1.0736370269223623),
+    createCoin(-5.925659207559994,2.6735848591423297,6.201237637253563),
+    createCoin(-3.686901895813493,9.163140436197086,0.6166726517030389),
+    createCoin(6.339153235208609,2.6318224943463466,-6.90745566001803),
+    createCoin(-4.840844060245297,2.643852426502599,-6.93916012316247),
+    createCoin(-1.2058237342540437,5.90897251643025,-4.322584118335105),
+    createCoin(3.46998114130984,11.923929408851594,0.6137825641039436),
+    createCoin(3.4371863972100134,8.112582596318575,-1.0093070710469552),
+    createCoin(5.894548538781485,5.8943079704392645,4.81148179622459),
+    createCoin(9.330045462937534,1.2651897609824323,3.0471521646724025),
+    createCoin(5.354169622560676,5.932807029059612,-1.2963396047827296),
+    createCoin(3.267000322138261,8.101398508812348,4.364560415205406),
+    createCoin(-3.6671752808717626,2.6944515363902846,8.992233386085244),
+    createCoin(1.3251238380535852,5.915046469714194,4.084935001469486),
+    createCoin(-3.1695195141885413,5.3435578992270685,2.4975385711013085),
+    createCoin(-5.39267342545507,2.7397917960977662,4.542043994699594),
+    createCoin(-6.439756017669449,0.9834415739967381,2.1812912475789505),
+    createCoin(1.3054180709194472,5.827111832823774,-3.0174796591889828),
+    createCoin(-2.9068088519798336,2.4384097235035496,-5.419457981107549),
+    createCoin(0.5872953570878909,2.9968881108310317,7.244648626938897),
+    createCoin(-0.7303921910625175,8.082369989289576,8.10859994367294),
+    createCoin(-3.712594192843321,3.0354710464456245,-2.075192718384734),
+    createCoin(4.750883877134339,2.3765650015846362,-7.227006951142427),
+    createCoin(6.888028429427133,1.6249674522342827,-7.034274360989681),
+    createCoin(8.346645675612127,5.268199077912552,1.2583119087414565),
+    createCoin(7.843144921488525,3.189976629369368,2.2328791835670136),
+    createCoin(7.687980504643147,2.523493764687646,1.9139248747816608),
+    createCoin(8.29007903578872,0.599951549567498,-0.12846716248209517),
+    createCoin(8.36414409131107,0.42107435288073297,-7.384013493132161),
+    createCoin(5.466544200946806,3.4156214963051776,-4.471576540017009),
+    createCoin(1.775196366604497,4.743460226884647,-2.1080645679759566),
+    createCoin(3.2843757008467436,5.4909726135077,-2.7670061730564823),
+    createCoin(-0.45663913304075676,2.4091753278394554,-1.4530805884652183),
+    createCoin(-4.261936997867127,1.5914618381086423,-7.021532292817562),
+    createCoin(-3.4446874236240483,1.0365138328590928,-7.53252041752962),
+    createCoin(-6.160832657287003,0.9611933309610868,-5.374085178961723),
+    createCoin(-5.100776810493556,1.3193371108329706,3.0141953620683513),
+    createCoin(-5.127240293504252,1.1430036231168172,4.681002618280349),
+    createCoin(-5.261552236164637,0.8722361644815634,5.6980571067376395),
+    createCoin(-5.179788127809143,1.3527324493310366,7.901798621987345),
+    createCoin(-1.3201857545486406,7.451389950146559,7.942855799620597),
+    createCoin(-4.26083725171931,3.594275698691473,6.1486699485563205),
+    createCoin(-2.6554924638785335,2.6945916603986295,8.107304396134491),
+    createCoin(8.437853105641839,5.849798326562984,1.6422421297259788),
+    createCoin(4.82505453574448,4.853759129360047,-2.0638688795920395),
+    createCoin(2.8343523269584723,13.209181042199527,1.6755138550486925),
+    createCoin(7.889237207270521,4.24944490880045,1.0821639403210213)
+
+]});
+
+})();

js/l3d/src/scenes/MountainScene.js

@@ -0,0 +1,78 @@
+var MountainScene = function() {
+
+    SceneWithCoins.apply(this, arguments);
+
+};
+
+MountainScene.prototype = Object.create(SceneWithCoins.prototype);
+MountainScene.prototype.constructor = MountainScene;
+MountainScene.super = SceneWithCoins;
+
+MountainScene.prototype.setCamera = function(camera) {
+
+    MountainScene.super.prototype.setCamera.apply(this, arguments);
+    this.camera.speed = 0.005;
+
+};
+
+MountainScene.prototype.load = function(prefetch, lowRes) {
+
+    if (prefetch !== undefined) {
+        this.prefetchType = prefetch;
+    }
+
+    var self = this;
+
+    var path = lowRes === true ?
+        '/static/data/mountain/coocoolmountain.obj':
+        '/static/data/mountain/coocoolmountain_sub.obj';
+
+
+    this.loader = new L3D.ProgressiveLoader(
+        path,
+        this,
+        this.camera,
+        function(object) {
+            // object.rotation.x = -Math.PI/2;
+            // object.rotation.z = Math.PI/2;
+            self.clickableObjects.push(object);
+            object.raycastable = true;
+            if (object.material.name === 'Material.070_13F025D5_c2.png' ||
+                object.material.name === 'Material.068_5972FC88_c.bmp' ||
+                object.material.name === 'Material.073_76F611AD_c.bmp' ||
+                object.material.name === 'Material.071_76F611AD_c.bmp' ||
+                object.material.name === 'Material.072_1723CCC7_c.bmp' ||
+                object.material.name === 'Material.069_78B64DC7_c.bmp' ||
+                object.material.name === 'Material.070_13F025D5_c.bmp' ||
+                object.material.name === 'Material.078_3165B23A_c.bmp' ||
+                object.material.name === 'Material.067_1723CCC7_c.bmp' ||
+                object.material.name === 'Material.066_36DB292F_c.bmp') {
+                THREEx.Transparency.push(object);
+            } else if (object.material.name === 'Material.082_6DAF90F6_c.bmp') {
+                THREEx.Transparency.push(object);
+                object.material.opacity = 0.5;
+            }
+
+        },
+        L3D.LogFunction,
+        false,
+        this.prefetchType
+    );
+
+    this.loader.onFinished = function() { self.finish(); };
+    this.loader.load();
+
+    this.collidableObjects.push(this.loader.obj);
+    this.clickableObjects.push(this.loader.obj);
+    this.loader.obj.raycastable = true;
+
+};
+
+MountainScene.prototype.getResetElements = function() {
+
+    return {
+        position : new THREE.Vector3(-20.558328115300082,23.601312087942762,-10.220633604814038),
+        target : new THREE.Vector3(11.025356711105232,11.969889531789319,11.393733425161644)
+    };
+
+};

js/l3d/src/scenes/PeachScene.js

@@ -0,0 +1,102 @@
+var PeachScene = function() {
+
+    SceneWithCoins.apply(this, arguments);
+
+    this.coinScale = 0.001;
+
+};
+
+PeachScene.prototype = Object.create(SceneWithCoins.prototype);
+PeachScene.prototype.constructor = PeachScene;
+PeachScene.super = SceneWithCoins;
+
+PeachScene.prototype.load = function(prefetch) {
+
+    if (prefetch !== undefined) {
+        this.prefetchType = prefetch;
+    }
+
+    var self = this;
+
+    this.loader = new L3D.ProgressiveLoader(
+        '/static/data/castle/princess peaches castle (outside).obj',
+        this,
+        this.camera,
+        function(object) {
+            self.clickableObjects.push(object);
+            object.raycastable = true;
+
+            if (object.material.name === 'Material.103_princess_peaches_cast') {
+                THREEx.Transparency.push(object);
+            } else if (object.material.name === 'Material.136_princess_peaches_cast' ||
+                       object.material.name === 'Material.135_princess_peaches_cast') {
+                THREEx.Transparency.push(object);
+                object.material.opacity = 0.5;
+                object.raycastable = false;
+                object.material.side = THREE.FrontSide;
+            }
+        },
+        L3D.LogFunction,
+        false,
+        this.prefetchType
+    );
+
+    this.loader.onFinished = function() { self.finish(); };
+    this.loader.load();
+
+    this.collidableObjects.push(this.loader.obj);
+    this.clickableObjects.push(this.loader.obj);
+    this.loader.obj.raycastable = true;
+
+};
+
+PeachScene.prototype.setCamera = function(camera) {
+
+    PeachScene.super.prototype.setCamera.apply(this, arguments);
+    this.camera.speed = 0.001;
+
+}
+
+PeachScene.prototype.getResetElements = function() {
+
+    return {
+        position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036),
+        target: new THREE.Vector3(0.24120226734232672,0.20096245470190008,-40.5998422840047)
+    };
+
+};
+
+PeachScene.prototype.addCoins = function(coinConfig) {
+
+    PeachScene.super.prototype.addCoins.apply(this, [coinConfig, 0.001]);
+
+};
+
+PeachScene.prototype.createCoin = function(position, scale, visible, callback) {
+
+    if (scale === undefined)
+        scale = this.coinScale;
+
+    if (visible === undefined)
+        visible = true;
+
+    var coin = new Coin(position, scale, visible, callback);
+    coin.addToScene(this);
+    coin.visible = visible;
+    this.coins.push(coin);
+    this.collidableObjects.push(coin);
+    this.clickableObjects.push(coin);
+
+};
+
+PeachScene.prototype.addRecommendations = function(ClassToInstanciate, width, height) {
+
+    PeachScene.super.prototype.addRecommendations.apply(this, [ClassToInstanciate, width, height, 0.2]);
+
+};
+
+PeachScene.prototype.createRecommendation = function(ClassToInstanciate, width, height, id) {
+
+    PeachScene.super.prototype.createRecommendation.apply(this, [ClassToInstanciate, width, height, 0.2, id]);
+
+};

js/l3d/src/scenes/Recommendations.js

@@ -0,0 +1,178 @@
+(function() {
+
+var createReco = function(a,b,c,d,e,f) { return {position:{x:a,y:b,z:c}, target:{x:d,y:e,z:f}}; };
+
+Object.defineProperty(BobombScene, 'recommendations', { value : [
+
+    createReco(
+            22.81974561274774,23.728166674516967,-23.50757340835654,
+            27.45807332015761,4.665400463440239,11.350666083340474)
+        ,
+        createReco(
+            4.512241856806823,19.542184465749266,-21.6277607809511,
+            -16.322542559288507,6.552211144388629,9.95027512132075)
+        ,
+        createReco(
+            3.7236872166568786,11.547542009941035,7.743737673292326,
+            11.778234958188895,3.590700880634021,46.107951987185814)
+        ,
+        createReco(
+            17.51280189401515,22.651733665113007,32.1344270612909,
+            -17.09689080040822,6.202382514300329,20.663244981189692)
+        ,
+        createReco(
+            -12.00887621348721,25.979463024729398,37.05007506157123,
+            -6.018501236275041,9.054329353511584,1.3057712098552159)
+        ,
+        createReco(
+            -9.467050533255307,30.088761873923442,28.727671886170505,
+            -39.96888839418932,10.735797300746938,11.549178083317258)
+        ,
+        createReco(
+            -30.2051081707108,44.36298906887656,35.77746943907231,
+            -16.54652438711394,19.924260316887796,7.208401795672)
+        ,
+        createReco(
+            -52.44058113318328,27.688845222097196,28.78379753054363,
+            -21.760754138048632,11.37128676599093,8.972550684871294)
+        ,
+        createReco(
+            -32.51800140864256,30.21720398723899,-2.2695677339908484,
+            -4.161205509090522,12.002869652965245,-23.813247806588592)
+        ,
+        createReco(
+            -24.869080810307878,24.29489455015078,-48.36061039882109,
+            -16.792809571743753,4.99108388972596,-14.270483721620096)
+        ,
+        createReco(
+            24.213548666073923,19.67561630411922,-34.50857509027397,
+            35.82557966946029,-3.7247748037464845,-4.21695195820471)
+
+]});
+
+Object.defineProperty(MountainScene, 'recommendations', { value : [
+
+ createReco(
+            -32.55470573684094,29.55322138048939,-17.59574199842915,
+            -2.6530082773148784,13.825746134447998,3.8176886333992925)
+        ,
+        createReco(
+            12.100158831224025,26.077021046580555,-23.46706423961512,
+            -13.67308964482135,11.574392013301521,3.4664356093669397)
+        ,
+        createReco(
+            16.801072439731502,20.09189357317027,14.011145351254608,
+            -13.195470192683612,-4.443428210365667,4.1002717732066145)
+        ,
+        createReco(
+            -16.879597154353956,28.027328987174787,23.2120994633039,
+            -6.922498345966725,7.02598138495819,-9.342463691665415)
+        ,
+        createReco(
+            24.007103291390404,-10.579535956547192,-30.14734612569218,
+            5.7117612503958135,-23.76440846717267,2.8895967789043198)
+        ,
+        createReco(
+            -12.257327932010769,-12.526038797341444,-36.05191812094985,
+            0.19983861525745894,-20.375474197075437,1.1395508675026633)
+        ,
+        createReco(
+            16.426221516558684,4.064315972012067,-19.84262328062327,
+            -16.71831968665397,-6.887503610208118,-0.3106741646994493)
+        ,
+        createReco(
+            44.96685545730114,-6.205815468014633,-0.5730193999373548,
+            7.154826082461277,-13.661034435943513,10.135395267812534)
+        ,
+        createReco(
+            -33.00196818869413,20.41721604790279,38.566026084656386,
+            -11.64931778228043,-1.846673249080439,13.102649364489118)
+        ,
+        createReco(
+            -53.183958472088925,-8.39869666868559,28.102017801758063,
+            -15.679778341058253,-11.462793205152831,14.53559656716515)
+        ,
+        createReco(
+            27.528666741865862,-9.63536430265764,46.43021804402408,
+            1.1519844626168592,-18.896564555304533,17.820765028981576)
+
+]});
+
+Object.defineProperty(PeachScene, 'recommendations', { value : [
+
+createReco(
+            -4.318087280217455,2.8007613084859253,1.5193437897009336,
+            19.04561491034525,-11.893857635144567,-27.432436709124897)
+        ,
+         createReco(
+            -6.257935852456958,2.093463399444844,-7.017904350052701,
+            25.88235261144178,-14.928107421416371,-23.669270187358173)
+        ,
+         createReco(
+            9.807915641060413,1.599662719763407,1.3278972044453563,
+            -16.404678696813406,-19.467671402046243,-20.330065097629618)
+        ,
+         createReco(
+            8.593027849546461,2.341563400341173,-10.381814971692629,
+            -23.363783342561,-18.42997444113019,1.755130036517576)
+        ,
+         createReco(
+            6.422879729593868,3.06821771913114,-4.664407524854438,
+            -15.171947266786782,-24.05662912371069,-24.6119921091785)
+        ,
+         createReco(
+            10.155340138717236,6.631665534350463,-5.574670324070963,
+            -20.721131232754608,-9.966488352174423,-24.839789145555535)
+        ,
+         createReco(
+            -6.548087435820877,6.193523907010158,-3.627483164733988,
+            16.752484674681824,-11.466024392567634,-30.926268727065203)
+
+]});
+
+Object.defineProperty(WhompScene, 'recommendations', { value : [
+
+    createReco(
+            -9.183036772081453,3.0766349039394916,-10.631680881366988,
+            23.306020365359252,-17.647069934844886,0.09162197153512075)
+        ,
+        createReco(
+            -11.38099373489364,4.5301496570861906,-8.680448599715064,
+            14.218919789700848,-9.33335658285769,18.75033014002037)
+        ,
+        createReco(
+            -2.989815984700766,4.808626217924975,-10.034026966216151,
+            10.476586340125928,-16.676909597940817,20.90183828968142)
+        ,
+        createReco(
+            8.739544533019469,4.57426117700506,-10.246457362075027,
+            -7.420839007222124,-3.599225856368915,25.419157921381895)
+        ,
+        createReco(
+            11.215995865644405,5.100092599462174,5.157320142222007,
+            -17.739835597264776,-0.18398638725505378,-21.92843872759245)
+        ,
+        createReco(
+            -7.511384733151988,6.569117611729606,13.141669794236272,
+            11.160164249947218,-9.709441800002363,-18.26504544391685)
+        ,
+        createReco(
+            0.6846182375474082,13.717750177060871,-3.878598405225172,
+            14.749877291524962,-2.4709024675402205,29.886709431324352)
+        ,
+        createReco(
+            -5.628153398727744,10.292624364958618,-0.15423059405658932,
+            21.830921092510273,-1.2953399806023977,26.523818630177338)
+        ,
+        createReco(
+            -3.2817952119549387,8.014848779391615,-6.822708271111021,
+            13.01307852868053,-12.339101451861252,23.511988031315184)
+        ,
+        createReco(
+            7.805400745480024,9.185305503970957,11.919240783005307,
+            -9.777424733344784,-5.603738432878275,-20.8241314870455)
+
+
+]});
+
+})();

js/l3d/src/scenes/Scene.js

@@ -0,0 +1,174 @@
+/**
+ * Class that represents a scene that can contain recommendations
+ * @constructor
+ * @augments THREE.Scene
+ */
+L3D.Scene = function() {
+
+    THREE.Scene.apply(this, arguments);
+
+    /**
+     * The objects that the camera can collide
+     * @type {THREE.Object3D[]}
+     */
+    this.collidableObjects = [];
+
+    /**
+     * The objects that the click can collide. Every object that could hide
+     * another from the click should be in this array
+     * @type {THREE.Object3D[]}
+     */
+    this.clickableObjects = [];
+
+    /**
+     * The pointer camera associated with the scene (and the loading)
+     * @type {L3D.PointerCamera}
+     * @private
+     */
+    this.camera = null;
+
+    /**
+     * The progressive loader that will load the elements from the scene
+     * @type {L3D.ProgressiveLoader}
+     *@private
+     */
+    this.loader = null;
+
+    /**
+     * Default prefetching policy
+     * @type {String}
+     */
+    this.prefetchType = 'NV-PN';
+
+    /**
+     * Array for recommendations
+     * @type {L3D.BaseRecommendation[]}
+     */
+    this.recommendations = [];
+
+    /**
+     * Functions to call when loading is finished
+     * @type {function[]}
+     */
+    this.onLoad = [];
+
+
+    var directionalLight = new THREE.DirectionalLight(0x777777);
+    directionalLight.position.set(1, 1, 0).normalize();
+    directionalLight.castShadow = false;
+    this.add(directionalLight);
+
+    var ambientLight = new THREE.AmbientLight(0xbbbbbb);
+    this.add(ambientLight);
+
+};
+
+L3D.Scene.prototype = Object.create(THREE.Scene.prototype);
+L3D.Scene.prototype.constructor = L3D.Scene;
+
+/**
+ * Sets the camera of the scene
+ * @param camera {L3D.PointerCamera} the camera associated with the loading of the scene
+ */
+L3D.Scene.prototype.setCamera = function(camera) {
+
+    this.camera = camera;
+    this.camera.resetElements = this.getResetElements();
+    this.camera.reset();
+
+    if (this.loader instanceof L3D.ProgressiveLoader)
+        this.loader.camera = camera;
+
+};
+
+/**
+ * Loads the models from the scene
+ * @param {String} prefetch prefetching policy
+ */
+L3D.Scene.prototype.load = function(prefetch) {
+
+    // Nothing to load for an empty scene
+
+};
+
+/**
+ * Gets the reset elements of the scene
+ * @return {Object} an object containing position and target, two THREE.Vector3
+ */
+L3D.Scene.prototype.getResetElements = function() {
+
+    return {
+        position: new THREE.Vector3(),
+        target:   new THREE.Vector3()
+    };
+
+};
+
+L3D.Scene.prototype.addRecommendations = function(ClassToInstanciate, width, height, recoSize) {
+
+    var createRecommendation = function() {
+        return new ClassToInstanciate(
+            50,
+            width/height,
+            1,
+            100000,
+            new THREE.Vector3().copy(arguments[0].position),
+            new THREE.Vector3().copy(arguments[0].target)
+        );
+    };
+
+    for (var i = 0; i < this.constructor.recommendations.length; i++) {
+
+        var reco = createRecommendation(this.constructor.recommendations[i]);
+        this.recommendations.push(reco);
+        reco.addToScene(this);
+        this.clickableObjects.push(reco);
+
+        if (recoSize !== undefined)
+            reco.setSize(recoSize);
+
+    }
+
+};
+
+L3D.Scene.prototype.createRecommendation = function(ClassToInstanciate, width, height, recoSize, id) {
+
+    var createRecommendation = function() {
+        return new ClassToInstanciate(
+            50,
+            width/height,
+            1,
+            100000,
+            new THREE.Vector3().copy(arguments[0].position),
+            new THREE.Vector3().copy(arguments[0].target)
+        );
+    };
+
+    var reco = createRecommendation(this.constructor.recommendations[id]);
+    this.recommendations.push(reco);
+    reco.addToScene(this);
+    this.clickableObjects.push(reco);
+
+    if (recoSize !== undefined)
+        reco.setSize(recoSize);
+};
+
+L3D.Scene.prototype.addEventListener = function(event, callback) {
+
+    switch (event) {
+        case 'onload':
+            this.onLoad.push(callback);
+            break;
+        default:
+            console.warn('Event ignored');
+            break;
+    }
+
+};
+
+L3D.Scene.prototype.finish = function() {
+
+    console.log(this.onLoad);
+    this.onLoad.map(function(f) { f(); });
+
+};

js/l3d/src/scenes/SceneWithCoins.js

@@ -0,0 +1,71 @@
+/**
+ * Class that represents a scene that can contains recommendations and coins
+ * @constructor
+ * @augments {L3D.Scene}
+ */
+var SceneWithCoins = function() {
+
+    L3D.Scene.apply(this, arguments);
+
+    this.coins = [];
+    this.coinScale = 0.005;
+
+};
+
+SceneWithCoins.prototype = Object.create(L3D.Scene.prototype);
+SceneWithCoins.prototype.constructor = SceneWithCoins;
+
+/**
+ * Adds coins to the scene
+ * @param {Object} coinConfig Object that contains a type attribute (being Coin.Config.{NONE, SOME, ALL}) and a ids attribute being an array of ids of coins
+ */
+SceneWithCoins.prototype.addCoins = function (coinConfig, coinScale) {
+
+    if (typeof coinScale === 'number') {
+        this.coinScale = coinScale;
+    }
+
+    if (typeof coinConfig.visible !== 'boolean') {
+        coinConfig.visible = true;
+    }
+
+    switch (coinConfig.type) {
+
+        case Coin.Config.NONE:
+
+            // No coin to add
+            break;
+
+        case Coin.Config.SOME:
+        case Coin.Config.ALL:
+
+            var arr;
+            if (coinConfig.type === Coin.Config.SOME) {
+                // Get only the coordinates for ids that are requested
+                var self = this;
+                arr = coinConfig.ids.map(function(i) {return self.constructor.coins[i];});
+            } else {
+                // Get all coins coordinates
+                arr = this.constructor.coins;
+            }
+
+            // Add coins to scene
+            for (var i = 0; i < arr.length; i++) {
+                var coin = new Coin(arr[i], this.coinScale);
+                coin.addToScene(this);
+                coin.visible = coinConfig.visible;
+                this.coins.push(coin);
+                this.clickableObjects.push(coin);
+            }
+
+            break;
+
+    }
+
+};
+
+SceneWithCoins.prototype.setCoinsVisibility = function(b) {
+
+    this.coins.forEach(function(c) { c.visible = b; });
+
+};

js/l3d/src/scenes/SponzaScene.js

@@ -0,0 +1,102 @@
+var SponzaScene = function() {
+
+    SceneWithCoins.apply(this, arguments);
+
+};
+
+SponzaScene.prototype = Object.create(SceneWithCoins.prototype);
+SponzaScene.prototype.constructor = SponzaScene;
+SponzaScene.super = SceneWithCoins;
+
+SponzaScene.prototype.setCamera = function(camera) {
+
+    SponzaScene.super.prototype.setCamera.apply(this, arguments);
+    this.camera.speed = 0.002;
+
+};
+
+SponzaScene.prototype.load = function(prefetch) {
+
+    if (prefetch !== undefined) {
+        this.prefetchType = prefetch;
+    }
+
+    var self = this;
+
+    this.loader = new L3D.ProgressiveLoader(
+        '/static/data/sponza/sponza.obj',
+        this,
+        this.camera,
+        function(object) {
+
+            self.clickableObjects.push(object);
+
+            if (object.material.name === 'chain' ||
+                object.material.name === 'leaf'  ||
+                object.material.name === 'Material__57') {
+
+                THREEx.Transparency.push(object);
+
+            }
+
+            object.raycastable = true;
+
+        },
+        L3D.LogFunction,
+        false,
+        this.prefetchType
+    );
+
+    this.loader.onFinished = function() { self.finish(); };
+    this.loader.load();
+
+    this.collidableObjects.push(this.loader.obj);
+    this.clickableObjects.push(this.loader.obj);
+    this.loader.obj.raycastable = true;
+
+};
+
+SponzaScene.prototype.getResetElements = function() {
+
+    return {
+        position: new THREE.Vector3(9.298373669520107,6.08877777990862,1.1130138641670737),
+        target: new THREE.Vector3(5.376696417668598,5.609739213575453,0.4877382575136091)
+    };
+
+};
+
+SponzaScene.prototype.addRecommendations = function(ClassToInstanciate, width, height) {
+
+    this.createRecommendations.apply(this, arguments);
+
+    for (var i = 0; i < this.recommendations.length; i++) {
+
+        this.recommendations[i].addToScene(this);
+        this.collidableObjects.push(this.recommendations[i]);
+        this.clickableObjects.push(this.recommendations[i]);
+
+    }
+
+};
+
+SponzaScene.prototype.createRecommendations = function(ClassToInstanciate, width, height) {
+
+    var createRecommendation = function(position, target) {
+        return new ClassToInstanciate(
+            50,
+            width/height,
+            1,
+            100000,
+            position,
+            target
+        );
+    };
+
+    this.recommendations.push(
+        createRecommendation(
+            new THREE.Vector3(1.3571661176961554,4.934280286310308,-4.294700794239404),
+            new THREE.Vector3(-31.49512083496389,15.286798072464663,16.04129235749628)
+        )
+    );
+
+};

js/l3d/src/scenes/WhompScene.js

@@ -0,0 +1,86 @@
+var WhompScene = function() {
+
+    SceneWithCoins.apply(this, arguments);
+
+};
+
+WhompScene.prototype = Object.create(SceneWithCoins.prototype);
+WhompScene.prototype.constructor = WhompScene;
+WhompScene.super = SceneWithCoins;
+
+WhompScene.prototype.setCamera = function(camera) {
+
+    WhompScene.super.prototype.setCamera.apply(this, arguments);
+    this.camera.speed = 0.002;
+
+};
+
+WhompScene.prototype.load = function(prefetch, lowRes) {
+
+    if (prefetch !== undefined) {
+        this.prefetchType = prefetch;
+    }
+
+    var self = this;
+
+    var path = lowRes === true ?
+        '/static/data/whomp/Whomps Fortress.obj':
+        '/static/data/whomp/Whomps Fortress_sub.obj';
+
+    this.loader = new L3D.ProgressiveLoader(
+        path,
+        this,
+        this.camera,
+        function(object) {
+
+            self.clickableObjects.push(object);
+            object.raycastable = true;
+            if (object.material.name === 'Shape_088' ||
+                object.material.name === 'Shape_089') {
+                object.raycastable = false;
+                THREEx.Transparency.push(object);
+            } else if (object.material.name === 'Shape_113') {
+                THREEx.Transparency.push(object);
+                object.raycastable = false;
+                object.material.opacity = 0.5;
+            } else if (object.material.name === 'Shape_076' ||
+                       object.material.name === 'Shape_098' ||
+                       object.material.name === 'Shape_092') {
+                object.visible = false;
+            }
+
+        },
+        L3D.LogFunction,
+        false,
+        this.prefetchType
+    );
+
+    this.loader.onFinished = function() { self.finish(); };
+    this.loader.load();
+
+    this.collidableObjects.push(this.loader.obj);
+    this.clickableObjects.push(this.loader.obj);
+    this.loader.obj.raycastable = true;
+
+};
+
+WhompScene.prototype.getResetElements = function() {
+
+    return {
+        position : new THREE.Vector3(-6.725817925071645,1.4993570618328055,-10.356480813212423),
+        target : new THREE.Vector3(-4.8541705829784604,1.3192268872752742,-6.825972443720941)
+    };
+
+};
+
+WhompScene.prototype.addCoins = function(coinConfig) {
+
+    WhompScene.super.prototype.addCoins.apply(this, [coinConfig, 0.002]);
+
+};
+
+WhompScene.prototype.addRecommendations = function(ClassToInstanciate, width, height) {
+
+    WhompScene.super.prototype.addRecommendations.apply(this, [ClassToInstanciate, width, height, 0.2]);
+
+}

js/l3d/src/scenes/initScene.js

@@ -200,10 +200,24 @@ L3D.resetBobombElements = function() {
     };
 };
 
-L3D.generateCoins = function(totalCoins, coinIds) {
+L3D.generateCoins = function(totalCoins, coinConfig) {
+
+    // return [];
+
+    if (coinConfig === undefined) {
 
         return [];
 
+    }
+
+    switch (coinConfig.type) {
+
+        case Coin.Config.SOME: return coinConfig.ids;
+        case Coin.Config.ALL:  return [];
+        case Coin.Config.NONE: return [];
+
+    }
+
     var i = 0;
     var tmp = [];
 
@@ -248,7 +262,7 @@ L3D.generateCoins = function(totalCoins, coinIds) {
     var indices = [];
     var coins = [];
 
-    var bound = (coinIds instanceof Array && coinIds.length === 0) ? totalCoins.length : 8;
+    var bound = (coinIds instanceof Array && coinIds.length === 0) ? 0 : 8;
 
     for (i = 0; i < bound; i++) {
         coins.push(totalCoins[i].coin);

server/controllers/demo/index.js

@@ -12,9 +12,9 @@ module.exports.demo = function(req, res) {
     res.setHeader('Content-Type', 'text/html');
 
     switch (req.query.scene) {
-        case '2': res.locals.scene = 'L3D.initBobomb'; break;
+        case '2': res.locals.scene = 'BobombScene'; break;
-        case '3': res.locals.scene = 'L3D.initMountain'; break;
+        case '3': res.locals.scene = 'MountainScene'; break;
-        case '4': res.locals.scene = 'L3D.initWhomp'; break;
+        case '4': res.locals.scene = 'WhompScene'; break;
     }
 
     switch (req.query.bookmark) {

server/controllers/demo/views/demo.jade

@@ -4,17 +4,22 @@ block title
     title #{title} - Prototype
 
 block prepend js
-    script BD_DISABLED = true;
+    script.
+        GLOB = typeof GLOB !== 'undefined' ? GLOB : {};
+        GLOB.BD_DISABLED = true;
 
 block extrajs
     script(src="/static/js/l3dp.min.js")
+    script.
+        GLOB = typeof GLOB !== 'undefined' ? GLOB : {};
+        GLOB.SceneClass = #{scene};
+        GLOB.Recommendation = #{bookmark};
+        GLOB.prefetch = "#{prefetch}";
+        GLOB.locked = #{session.locked === undefined ? 'true' : session.locked};
     block configjs
     script.
-        initMainScene = #{scene};
+        GLOB = typeof GLOB !== 'undefined' ? GLOB : {};
-        Recommendation = #{bookmark};
+        GLOB.coinConfig={ids:[], type: Coin.Config.NONE};
-        prefetch = "#{prefetch}";
-        locked = #{session.locked === undefined ? 'true' : session.locked};
-        coinsId=[];
 
     script(src="/static/js/prototypeinteractive.min.js")
     script document.getElementById('music').volume = 0.5;

server/controllers/prototype/index.js

@@ -14,13 +14,13 @@ module.exports.index = function(req, res) {
 var sceneToFunction = function(scene) {
     switch (scene) {
         case 2:
-            return 'L3D.initBobomb';
+            return 'BobombScene';
         case 3:
-            return 'L3D.initMountain';
+            return 'MountainScene';
         case 4:
-            return 'L3D.initWhomp';
+            return 'WhompScene';
         default:
-            return 'L3D.initPeach';
+            return 'PeachScene';
     }
 };
 
@@ -110,6 +110,8 @@ module.exports.play = function(req, res) {
         req.session.expId = expId;
         req.session.save();
 
+        res.locals.lowRes = true;
+
         // Prepare next experiment
         module.exports.game(req, null);
 
@@ -225,10 +227,10 @@ function editorHelper(templateName) {
 
         switch (scene) {
 
-            case 'peach':            res.locals.scene = "L3D.initPeach";    break;
+            case 'peach':            res.locals.scene = "PeachScene";    break;
-            case 'coolcoolmountain': res.locals.scene = "L3D.initMountain"; break;
+            case 'coolcoolmountain': res.locals.scene = "MountainScene"; break;
-            case 'whomp':            res.locals.scene = "L3D.initWhomp";    break;
+            case 'whomp':            res.locals.scene = "WhompScene";    break;
-            case 'bobomb':           res.locals.scene = "L3D.initBobomb";   break;
+            case 'bobomb':           res.locals.scene = "BobombScene";   break;
             default:
                 // 404
                 var err = new Error('Incorrect scene');

server/controllers/prototype/views/prototype.jade

@@ -9,7 +9,7 @@ block extrajs
     block mainjs
     script document.getElementById('music').volume = 0.5;
 
-block extrahead
+block append extrahead
     link(rel="stylesheet" href="/static/css/prototype.css")
 
 block content

server/controllers/prototype/views/prototype_checker.jade

@@ -4,8 +4,8 @@ block title
     title #{title} - Prototype
 
 block mainjs
-    script initMainScene = #{scene};
+    script GLOB.SceneClass = #{scene};
-    script Recommendation = L3D.ArrowRecommendation;
+    script GLOB.Recommendation = L3D.ArrowRecommendation;
 
     script(src="/static/js/coinchecker.min.js")
 

server/controllers/prototype/views/prototype_clicker.jade

@@ -4,8 +4,8 @@ block title
     title #{title} - Prototype
 
 block mainjs
-    script initMainScene = #{scene};
+    script GLOB.SceneClass = #{scene};
-    script Recommendation = L3D.ArrowRecommendation;
+    script GLOB.Recommendation = L3D.ArrowRecommendation;
 
     script(src="/static/js/coincreator.min.js")
 

server/controllers/prototype/views/prototype_interactive.jade

@@ -4,8 +4,8 @@ block title
     title #{title} - Prototype
 
 block mainjs
-    script initMainScene = #{scene};
+    script GLOB.SceneClass = #{scene};
-    script locked = #{session.locked === undefined ? 'true' : session.locked};
+    script GLOB.locked = #{session.locked === undefined ? 'true' : session.locked};
     script(src="/static/js/prototypeinteractive.min.js")
 
 block description

server/controllers/prototype/views/prototype_recommendation.jade

@@ -4,7 +4,9 @@ block title
     title #{title} - Prototype - Arrows
 
 block configjs
-    script Recommendation = #{recommendationStyle}; coinsId = [#{coins}];
+    script GLOB.Recommendation = #{recommendationStyle}; GLOB.coinConfig = {type : Coin.Config.SOME, ids : [#{coins}]};
+    if (lowRes === true)
+        script GLOB.lowRes = true; GLOB.hideBeforeLoading = true;
 
 block lastbutton
     button#next.btn.btn-success.navbar-btn(style={'margin-right':'10px', 'margin-bottom':'10px', 'display':'none'})

server/controllers/prototype/views/prototype_reverse.jade

@@ -4,7 +4,7 @@ block title
     title #{title} - Prototype - Reverse
 
 block configjs
-    script Recommendation = L3D.ReverseRecommendation;
+    script GLOB.Recommendation = L3D.ReverseRecommendation;
 
 //-block preciseDescription
     p

server/controllers/prototype/views/prototype_viewer.jade

@@ -4,8 +4,8 @@ block title
     title #{title} - Prototype
 
 block mainjs
-    script initMainScene = #{scene};
+    script GLOB.SceneClass = #{scene};
-    script Recommendation = L3D.ArrowRecommendation;
+    script GLOB.Recommendation = L3D.ArrowRecommendation;
 
     script(src="/static/js/coinviewer.min.js")
 

server/controllers/prototype/views/sponza.jade

@@ -7,9 +7,9 @@ block prepend js
     script window.DB_DISABLED = true;
 
 block mainjs
-    script locked = false;
+    script GLOB.locked = false;
     script(src="/static/js/prototypeinteractive.min.js")
-    script initMainScene = L3D.initSponza
+    script GLOB.SceneClass = SponzaScene;
 
 block configjs
     script Recommendation = L3D.ArrowRecommendation;

server/controllers/prototype/views/tutorial.jade

@@ -7,7 +7,7 @@ block title
     title #{title} - Prototype - Tutorial
 
 block configjs
-    script Recommendation = L3D.ArrowRecommendation; coinsId = [#{coins}];
+    script GLOB.Recommendation = L3D.ArrowRecommendation; GLOB.coinConfig = {type : Coin.Config.SOME, ids : [#{coins}]};
     script(src="/static/js/tutorial.min.js")
 
 block lastbutton

server/geo/ConfigGenerators/V_PD.js

@@ -54,7 +54,7 @@ geo.V_PD_Generator.prototype.generateMainConfig = function(cameraFrustum, recomm
  * Generates a configuration with only the camera frustum, with proportion of 1
  * @returns {Object[]} an array with one element corresponding to the camera frustum
  */
-geo.V_PD_Generator.prototype.generateFillingConfig = function() {
+geo.V_PD_Generator.prototype.generateFillingConfig = function(a,b,cameraFrustum) {
 
     return [{proportion:1, frustum: cameraFrustum}];
 

server/geo/MeshStreamer.js

@@ -306,6 +306,7 @@ geo.MeshStreamer.prototype.start = function(socket) {
                 self.predictionTable = predictionTables[3];
         };
 
+        console.log(prefetch);
         self.generator = geo.ConfigGenerator.createFromString(prefetch, self);
         self.backupGenerator = new geo.ConfigGenerator(self);
 

server/views/withjs.jade

@@ -1,5 +1,8 @@
 extends ./main
 
+block append extrahead
+    script GLOB = typeof GLOB !== 'undefined' ? GLOB : {};
+
 block js
     script(src="/static/js/three.min.js")
     script(src="/static/js/stats.min.js")