Some cleaning, and lot of bugs corrected

js/Makefile

@@ -14,6 +14,7 @@ L3D:
 		--js l3d/src/math/Tools.js \
 		--js l3d/src/math/Hermite.js \
 		--js l3d/src/utils/List.js \
+		--js l3d/src/utils/ObjectClicker.js \
 		--js l3d/src/utils/CameraSelecter.js \
 		--js l3d/src/utils/Logger.js \
 		--js l3d/src/utils/Objects.js \

js/l3d/apps/prototype/Coin.js

@@ -1,4 +1,6 @@
 var Coin = function(x,y,z, callback) {
+    this.raycastable = true;
+    this.children = [];
     this.ready = false;
     this.got = false;
     this.init(x,y,z);
@@ -81,6 +83,24 @@ Coin.prototype.init = function(x,y,z) {
     }
 };
 
+Coin.prototype.raycast = function(raycaster, intersects) {
+    if (this.mesh !== undefined) {
+
+        var intersectsThis = [];
+        this.mesh.raycast(raycaster, intersectsThis);
+
+        // Add closest object
+        if (intersectsThis[0] !== undefined) {
+
+            intersectsThis[0].object = this;
+            intersects.push(intersectsThis[0]);
+
+        }
+
+    }
+
+};
+
 Coin.prototype.addToScene = function(scene) {
     scene.add(this.mesh);
 };

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

@@ -32,7 +32,8 @@ var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0};
 var bigmesh;
 var raycaster;
 var objects = [];
-var cameras, cameraSelecter;
+var clickableObjects = [];
+var recommendations, objectClicker;
 var spheres = new Array(mesh_number);
 var visible = 0;
 // stats;
@@ -41,6 +42,7 @@ var camera1;
 var loader;
 var coins = [];
 var previousTime;
+var hoveredCamera = null;
 
 window.onbeforeunload = function() {
 
@@ -128,12 +130,20 @@ function init() {
 
     startCanvas.render();
 
-    cameras = initMainScene(camera1, scene, coins);
+    recommendations = initMainScene(camera1, scene, coins, clickableObjects);
-    // cameras = L3D.initPeach(camera1, scene, coins);
+    // recommendations = L3D.initPeach(camera1, scene, coins, clickableObjects);
-    // cameras = L3D.initBobomb(camera1, scene, coins);
+    // recommendations = L3D.initBobomb(camera1, scene, coins, clickableObjects);
-    // cameras = L3D.initWhomp(camera1, scene, , coins);
+    // recommendations = L3D.initWhomp(camera1, scene, , coins, clickableObjects);
-    // cameras = L3D.initMountain(camera1, scene, coins);
+    // recommendations = L3D.initMountain(camera1, scene, coins, clickableObjects);
-    // cameras = L3D.initSponza(camera1, scene, coins);
+    // recommendations = L3D.initSponza(camera1, scene, coins, clickableObjects);
+
+    // init clickable objects
+    var i;
+    for (i = 0; i < coins.length; i++)
+        clickableObjects.push(coins[i]);
+
+    for (i =0; i < recommendations.length; i++)
+        clickableObjects.push(recommendations[i]);
 
     // Add listeners
     initListeners();
@@ -145,38 +155,100 @@ function init() {
 function initListeners() {
     window.addEventListener('resize', onWindowResize, false);
 
-    // Transmit click event to camera selecter
-    container.addEventListener('mousedown', function(event) {
-        if (event.which == 1)
-            cameraSelecter.click(event);
-        }, false
-    );
-
-    // Update camera selecter when mouse moved
-    container.addEventListener('mousemove', function(event) {
-        cameraSelecter.update(event);
-    });
-
     // Escape key to exit fullscreen mode
     document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
 
     // HTML Bootstrap buttons
-    buttonManager = new ButtonManager(camera1, cameras, previewer);
+    buttonManager = new ButtonManager(camera1, recommendations, previewer);
 
-    // Camera selecter for hover and clicking recommendations
+    // Object clicker for hover and clicking recommendations
-    cameraSelecter = new L3D.CameraSelecter(renderer, scene, camera1, cameras, coins, buttonManager);
+    objectClicker = new L3D.ObjectClicker(renderer, camera1, clickableObjects,
+        function onHover(obj,x,y) {
+
+            // Check if the object is clickable
+            var ok = obj instanceof Coin || obj instanceof L3D.BaseRecommendation;
+
+            // Little graphic stuff so the user knows that it's clickable
+            container.style.cursor = ok ? "pointer" : "auto";
+            if (camera1.pointerLocked)
+                camera1.mousePointer.render(ok ? L3D.MousePointer.RED : L3D.MousePointer.BLACK);
+
+            // Set previewer for preview
+            previewer.setCamera(obj instanceof L3D.BaseRecommendation ? obj.camera : null)
+            previewer.setPosition(x,y);
+
+            // Manage the hover camera event
+            if (hoveredCamera !== obj) {
+
+                var event = new L3D.BD.Event.Hovered();
+
+                if (obj instanceof L3D.BaseRecommendation) {
+                    // The newly hovered object is different and is a recommendation
+
+                    event.arrow_id = recommendations.indexOf(obj);
+                    event.start = true;
+                    event.send();
+
+                    hoveredCamera = obj
+
+                } else if (hoveredCamera instanceof L3D.BaseRecommendation) {
+                    // The newly hovered object is not a recommendation,
+                    // but the previous one is : we must log
+
+                    // Unhovered
+                    event.arrow_id = 0;
+                    event.start = false;
+                    event.send();
+
+                    hoveredCamera = null;
+
+                }
+
+            }
+
+        },
+
+        function onClick(obj) {
+
+            var event;
+
+            // Do stuff for click
+            if (obj instanceof Coin) {
+
+                obj.get();
+
+                // Send event to DB
+                event = new L3D.BD.Event.CoinClicked();
+                event.coin_id = coins.indexOf(obj);
+                event.send();
+
+            } else if (obj instanceof L3D.BaseRecommendation) {
+                camera1.moveHermite(obj);
+
+                // Send event to DB
+                event = new L3D.BD.Event.ArrowClicked();
+                event.arrow_id = recommendations.indexOf(obj);
+                event.send();
+            }
+
+            // Update the button manager
+            buttonManager.updateElements();
+
+        },
+        container
+    );
 }
 
 function render() {
-    cameraSelecter.update();
+    objectClicker.update();
 
     // Update recommendations (set raycastable if shown)
     var transform = buttonManager.showArrows ? show : hide;
-    cameras.map(function(camera) {
+    recommendations.map(function(reco) {
-        if (camera instanceof Recommendation) {
+        if (reco instanceof Recommendation) {
-            transform(camera);
+            transform(reco);
 
-            camera.traverse(function(elt) {
+            reco.traverse(function(elt) {
                 elt.raycastable = buttonManager.showArrows;
             });
         }
@@ -191,7 +263,7 @@ function render() {
     previousTime = Date.now();
 
     // Update the recommendations
-    cameras.map(function(cam) { cam.update(camera1);});
+    recommendations.map(function(reco) { reco.update(camera1);});
 
     // Set current position of camera
     camera1.look();
@@ -206,13 +278,13 @@ function render() {
     previewer.clear();
 
     // Hide arrows in recommendation
-    cameras.map(function(camera) { if (camera instanceof Recommendation) hide(camera); });
+    recommendations.map(function(reco) { if (reco instanceof Recommendation) hide(reco); });
 
     // Update transparent elements
     THREEx.Transparency.update(camera1);
 
     // Render preview
-    previewer.render(cameraSelecter.prev, container_size.width(), container_size.height());
+    previewer.render(container_size.width(), container_size.height());
 }
 
 function animate() {
@@ -234,8 +306,8 @@ function onWindowResize() {
     previewer.domElement.height = container_size.height();
 
     renderer.setSize(container_size.width(), container_size.height());
-    cameras.forEach(function(camera) {camera.camera.aspect = container_size.width() / container_size.height();});
+    recommendations.forEach(function(reco) {reco.camera.aspect = container_size.width() / container_size.height();});
-    cameras.forEach(function(camera) {camera.camera.updateProjectionMatrix();});
+    recommendations.forEach(function(reco) {reco.camera.updateProjectionMatrix();});
     render();
 }
 

js/l3d/src/cameras/PointerCamera.js

@@ -146,20 +146,20 @@ L3D.PointerCamera = function() {
     var onMouseUp = function(event) {if (event.which === 1) self.onMouseUp(event); };
     var onMouseMove = function(event) {self.onMouseMove(event); };
 
-    document.addEventListener('keydown', onKeyDown, false);
+    document.addEventListener('keydown', onKeyDown);
-    document.addEventListener('keyup', onKeyUp, false);
+    document.addEventListener('keyup', onKeyUp);
 
-    document.addEventListener('pointerlockchange', function(event) { self.onPointerLockChange(event); }, false);
+    document.addEventListener('pointerlockchange', function(event) { self.onPointerLockChange(event); });
-    document.addEventListener('mozpointerlockchange', function(event) { self.onPointerLockChange(event); }, false);
+    document.addEventListener('mozpointerlockchange', function(event) { self.onPointerLockChange(event); });
-    document.addEventListener('webkitpointerlockchange', function(event) { self.onPointerLockChange(event); }, false);
+    document.addEventListener('webkitpointerlockchange', function(event) { self.onPointerLockChange(event); });
 
-    document.addEventListener('mousemove', function(event) {self.onMouseMovePointer(event);}, false);
+    document.addEventListener('mousemove', function(event) {self.onMouseMovePointer(event);});
 
-    listenerTarget.addEventListener('mousedown', function() {self.lockPointer();}, false);
+    listenerTarget.addEventListener('click', function() {self.lockPointer();});
-    listenerTarget.addEventListener('mousedown', onMouseDown, false);
+    listenerTarget.addEventListener('mousedown', onMouseDown);
-    listenerTarget.addEventListener('mousemove', onMouseMove, false);
+    listenerTarget.addEventListener('mousemove', onMouseMove);
-    listenerTarget.addEventListener('mouseup', onMouseUp, false);
+    listenerTarget.addEventListener('mouseup', onMouseUp);
-    listenerTarget.addEventListener('mouseout', onMouseUp, false);
+    listenerTarget.addEventListener('mouseout', onMouseUp);
 
     /**
      * Option to enable or disable the collisions
@@ -228,7 +228,7 @@ L3D.PointerCamera.prototype.onPointerLockChange = function() {
 
         // The pointer is locked : adapt the state of the camera
         this.pointerLocked = true;
-        this.mousePointer.render();
+        this.mousePointer.render(L3D.MousePointer.BLACK);
 
         this.mouse.x = this.renderer.domElement.width/2;
         this.mouse.y = this.renderer.domElement.height/2;
@@ -241,9 +241,6 @@ L3D.PointerCamera.prototype.onPointerLockChange = function() {
         this.pointerLocked = false;
         this.mousePointer.clear();
 
-        this.theta = this.previousTheta;
-        this.phi = this.previousPhi;
-
         this.mouseMove.x = 0;
         this.mouseMove.y = 0;
 
@@ -263,6 +260,7 @@ L3D.PointerCamera.prototype.onPointerLockChange = function() {
  */
 L3D.PointerCamera.prototype.update = function(time) {
     this.shouldLogCameraAngles = false;
+
     if (this.moving) {
         this.linearMotion(time);
     } else if (this.movingHermite) {
@@ -624,10 +622,6 @@ L3D.PointerCamera.prototype.onMouseMovePointer = function(e) {
 
     if (this.isLocked()) {
 
-        // Backup theta and phi
-        this.previousTheta = this.theta;
-        this.previousPhi = this.phi;
-
         this.mouseMove.x = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
         this.mouseMove.y = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
 

js/l3d/src/cameras/ReplayCamera.js

@@ -103,6 +103,8 @@ L3D.ReplayCamera.prototype.nextEvent = function() {
 
     this.event = this.path[this.counter];
 
+    console.log(this.event.type);
+
     if (this.event.type == 'camera') {
         this.move(this.event);
     } else if (this.event.type == 'coin') {

js/l3d/src/canvases/MousePointer.js

@@ -103,7 +103,7 @@ L3D.MousePointer.toColor = function(style) {
  * Re-renders the canvas
  * For performance reasons, the rendering is done only if the style changed.
  * @param {Number} style the L3D.MousePointer style you want to render
- * @param {Boolean} force force the re-rendering (even if the style did not change)
+ * @param {Boolean} [force=false] force the re-rendering (even if the style did not change)
  *
  */
 L3D.MousePointer.prototype.render = function(style, force) {

js/l3d/src/canvases/Previewer.js

@@ -54,6 +54,8 @@ L3D.Previewer = function(renderer, scene) {
      * @description true if the rendering was done before
      */
     this.drawnBefore = false;
+
+    this.mouse = {x: null, y: null};
 };
 
 /**
@@ -68,15 +70,15 @@ L3D.Previewer = function(renderer, scene) {
  * @param {Number} container_width width of the container
  * @param {Number} container_height height of the container
  */
-L3D.Previewer.prototype.render = function(prev, container_width, container_height) {
+L3D.Previewer.prototype.render = function(container_width, container_height) {
     var width, height, left, bottom;
 
-    if (prev.go) {
+    if (this.camera) {
         width  = Math.floor(container_width / 5);
         height = Math.floor(container_height / 5);
         if (!this.fixed) {
-            left = Math.floor(prev.x - width/2);
+            left = Math.floor(this.mouse.x - width/2);
-            bottom = Math.floor(this.renderer.domElement.height - prev.y + height/5);
+            bottom = Math.floor(this.renderer.domElement.height - this.mouse.y + height/5);
 
             // Translate box if too high
             if (bottom + height > this.renderer.domElement.height) {
@@ -112,19 +114,19 @@ L3D.Previewer.prototype.render = function(prev, container_width, container_heigh
         this.ctx.stroke();
 
         // Do render in previsualization
-        prev.camera.look();
+        this.camera.look();
         this.renderer.setScissor(left, bottom, width, height);
         this.renderer.enableScissorTest(true);
         this.renderer.setViewport(left, bottom, width, height);
-        this.renderer.render(this.scene, prev.camera.camera);
+        this.renderer.render(this.scene, this.camera);
 
         this.update(true);
 
-        if (this.prevCamera !== prev.camera) {
+        if (this.prevCamera !== this.camera) {
             this.clearNeeded = true;
         }
 
-        this.prevCamera = prev.camera;
+        this.prevCamera = this.camera;
     } else {
         this.update(false);
     }
@@ -162,3 +164,12 @@ L3D.Previewer.prototype.update = function(arg) {
     this.drawnBefore = this.drawn;
     this.drawn = arg;
 };
+
+L3D.Previewer.prototype.setCamera = function(camera) {
+    this.camera = camera;
+}
+
+L3D.Previewer.prototype.setPosition = function(x, y) {
+    this.mouse.x = x;
+    this.mouse.y = y;
+}

js/l3d/src/recommendations/BaseRecommendation.js

@@ -61,6 +61,21 @@ L3D.BaseRecommendation = function(arg1, arg2, arg3, arg4, position, target) {
 L3D.BaseRecommendation.prototype = Object.create(THREE.Object3D.prototype);
 L3D.BaseRecommendation.prototype.constructor = L3D.BaseRecommendation;
 
+L3D.BaseRecommendation.prototype.raycast = function(raycaster, intersects) {
+
+    var intersectsThis = [];
+    this.object3D.traverse(function(elt) {elt.raycast(raycaster, intersectsThis);});
+
+    // Add closest object
+    if (intersectsThis[0] !== undefined) {
+
+        intersectsThis[0].object = this;
+        intersects.push(intersectsThis[0]);
+
+    }
+
+}
+
 /**
  * Changes the color of the meshes like a HTML link
  */
@@ -182,13 +197,14 @@ L3D.BaseRecommendation.prototype.update = function(mainCamera) {
     }
 
     // Update opacity
+    var self = this;
     this.object3D.traverse(function(elt) {
         if (elt instanceof THREE.Mesh) {
             elt.material.transparent =   new_value < 0.9;
             elt.material.opacity = new_value;
 
             if (new_value < 0.1)
-                elt.raycastable = elt.material.transparent = elt.visible = false;
+                self.raycastable = elt.raycastable = elt.material.transparent = elt.visible = false;
         }
     });
 

js/l3d/src/recommendations/ReverseRecommendation.js

@@ -163,3 +163,40 @@ L3D.ReverseRecommendation.prototype.regenerateArrow = function(mainCamera) {
     this.arrow.geometry.normalsNeedUpdate = true;
 
 };
+
+L3D.BaseRecommendation.prototype.updateExtremity = function() {
+    var direction = this.camera.target.clone();
+    direction.sub(this.camera.position);
+    direction.normalize();
+
+    var left = L3D.Tools.cross(direction, this.up);
+    var other = L3D.Tools.cross(direction, left);
+
+    left.normalize();
+    other.normalize();
+    left = L3D.Tools.mul(left, this.size / 2 );
+    other  = L3D.Tools.mul(other, this.size / 2);
+
+    var pyramidCenter = L3D.Tools.diff(this.camera.position, L3D.Tools.mul(direction,0.25));
+    this.mesh.geometry.vertices = [
+        L3D.Tools.sum( L3D.Tools.sum( this.camera.position, left),  other),
+        L3D.Tools.diff(L3D.Tools.sum( this.camera.position, other), left),
+        L3D.Tools.diff(L3D.Tools.diff(this.camera.position, left),  other),
+        L3D.Tools.sum( L3D.Tools.diff(this.camera.position, other), left),
+
+        L3D.Tools.sum( L3D.Tools.sum( this.camera.position, left),  other),
+        L3D.Tools.diff(L3D.Tools.sum( this.camera.position, other), left),
+        L3D.Tools.diff(L3D.Tools.diff(this.camera.position, left),  other),
+        L3D.Tools.sum( L3D.Tools.diff(this.camera.position, other), left)
+        // L3D.Tools.diff(this.camera.position, direction)
+    ];
+
+    var lambda = 0.6;
+    for (var i = 0; i < 4; i++)
+        this.mesh.geometry.vertices[i] = L3D.Tools.mul(L3D.Tools.diff(this.mesh.geometry.vertices[i], L3D.Tools.mul(pyramidCenter,lambda)), 1/(1-lambda));
+
+    this.mesh.geometry.computeFaceNormals();
+
+    this.mesh.geometry.normalsNeedUpdate = true;
+    this.mesh.geometry.verticesNeedUpdate = true;
+};

js/l3d/src/recommendations/ViewportRecommendation.js

@@ -89,6 +89,20 @@ L3D.ViewportRecommendation = function(arg1, arg2, arg3, arg4, position, target)
 L3D.ViewportRecommendation.prototype = Object.create(L3D.BaseRecommendation.prototype);
 L3D.ViewportRecommendation.prototype.constructor = L3D.ViewportRecommendation;
 
+L3D.ViewportRecommendation.prototype.raycast = function(raycaster, intersects) {
+
+    var intersectsThis = [];
+    this.mesh.raycast(raycaster, intersectsThis);
+
+    if (intersectsThis[0] !== undefined) {
+
+        intersectsThis[0].object = this;
+        intersects.push(intersectsThis[0]);
+
+    }
+
+};
+
 L3D.ViewportRecommendation.prototype.check = function() {
     this.mesh.material.color.setHex(0x663366);
 };
@@ -118,7 +132,7 @@ L3D.ViewportRecommendation.prototype.update = function(position) {
     this.mesh.material.opacity = new_value;
 
     if (new_value < 0.1)
-        this.mesh.material.transparent = this.mesh.visible = false;
+        this.raycastable = this.mesh.material.transparent = this.mesh.visible = false;
 };
 
 L3D.ViewportRecommendation.prototype.setSize = function(size) {

js/l3d/src/scenes/initScene.js

@@ -17,13 +17,15 @@ L3D.addLight = function(scene) {
     scene.add(ambient_light);
 };
 
-L3D.initPeachCastle = function(scene, collidableObjects, recommendation) {
+L3D.initPeachCastle = function(scene, collidableObjects, recommendation, clickable) {
 
     var loader = new L3D.ProgressiveLoader(
         '/static/data/castle/princess peaches castle (outside).obj',
         scene,
         null,
         function(object) {
+            if (clickable !== undefined)
+                clickable.push(object);
             object.raycastable = true;
             if (object.material.name === 'Material.103_princess_peaches_cast') {
                 THREEx.Transparency.push(object);
@@ -50,11 +52,11 @@ L3D.resetPeachElements = function() {
     };
 };
 
-L3D.initPeach = function(recommendation, scene, coins) {
+L3D.initPeach = function(recommendation, scene, coins, clickable) {
     L3D.addLight(scene);
 
     var collidableObjects = [];
-    L3D.initPeachCastle(scene, collidableObjects, recommendation);
+    L3D.initPeachCastle(scene, collidableObjects, recommendation, clickable);
 
     recommendation.resetElements = L3D.resetPeachElements();
     recommendation.collidableObjects = collidableObjects;
@@ -159,13 +161,15 @@ L3D.createPeachRecommendations = function(width, height) {
     return recos;
 };
 
-L3D.initBobombScene = function(scene, collidableObjects, recommendation) {
+L3D.initBobombScene = function(scene, collidableObjects, recommendation, clickable) {
 
     var loader = new L3D.ProgressiveLoader(
         '/static/data/bobomb/bobomb battlefeild.obj',
         scene,
         null,
         function(object) {
+            if (clickable !== undefined)
+                clickable.push(object);
             object.raycastable = true;
             if (object.material.name === 'Material.071_574B138E_c.bmp' ||
                 object.material.name === 'Material.070_41A41EE3_c.bmp') {
@@ -273,11 +277,11 @@ L3D.createBobombRecommendations = function(width, height) {
 
 };
 
-L3D.initBobomb = function(recommendation, scene, coins) {
+L3D.initBobomb = function(recommendation, scene, coins, clickable) {
     L3D.addLight(scene);
 
     var collidableObjects = [];
-    L3D.initBobombScene(scene, collidableObjects, recommendation);
+    L3D.initBobombScene(scene, collidableObjects, recommendation, clickable);
 
     recommendation.resetElements = L3D.resetBobombElements();
     recommendation.collidableObjects = collidableObjects;
@@ -304,13 +308,15 @@ L3D.initBobomb = function(recommendation, scene, coins) {
     return recommendations;
 };
 
-L3D.initWhompScene = function(scene, collidableObjects, recommendation) {
+L3D.initWhompScene = function(scene, collidableObjects, recommendation, clickable) {
 
     var loader = new L3D.ProgressiveLoader(
         '/static/data/whomp/Whomps Fortress.obj',
         scene,
         null,
         function(object) {
+            if (clickable !== undefined)
+                clickable.push(object);
             object.raycastable = true;
             if (object.material.name === 'Shape_088' ||
                 object.material.name === 'Shape_089') {
@@ -445,11 +451,11 @@ L3D.resetWhompElements = function() {
     };
 };
 
-L3D.initWhomp = function(recommendation, scene, coins) {
+L3D.initWhomp = function(recommendation, scene, coins, clickable) {
     L3D.addLight(scene);
 
     var collidableObjects = [];
-    L3D.initWhompScene(scene, collidableObjects, recommendation);
+    L3D.initWhompScene(scene, collidableObjects, recommendation, clickable);
 
     recommendation.resetElements = L3D.resetWhompElements();
     recommendation.collidableObjects = collidableObjects;
@@ -476,7 +482,7 @@ L3D.initWhomp = function(recommendation, scene, coins) {
     return recommendations;
 };
 
-L3D.initMountainScene = function(scene, collidableObjects, recommendation) {
+L3D.initMountainScene = function(scene, collidableObjects, recommendation, clickable) {
 
     var loader = new L3D.ProgressiveLoader(
         '/static/data/mountain/coocoolmountain.obj',
@@ -485,6 +491,8 @@ L3D.initMountainScene = function(scene, collidableObjects, recommendation) {
         function(object) {
             // object.rotation.x = -Math.PI/2;
             // object.rotation.z = Math.PI/2;
+            if (clickable !== undefined)
+                clickable.push(object);
             object.raycastable = true;
             if (object.material.name === 'Material.070_13F025D5_c2.png' ||
                 object.material.name === 'Material.068_5972FC88_c.bmp' ||
@@ -597,11 +605,11 @@ L3D.resetMountainElements = function() {
     };
 };
 
-L3D.initMountain = function(recommendation, scene, coins) {
+L3D.initMountain = function(recommendation, scene, coins, clickable) {
     L3D.addLight(scene);
 
     var collidableObjects = [];
-    L3D.initMountainScene(scene, collidableObjects, recommendation);
+    L3D.initMountainScene(scene, collidableObjects, recommendation, clickable);
 
     recommendation.resetElements = L3D.resetMountainElements();
     recommendation.collidableObjects = collidableObjects;
@@ -627,13 +635,15 @@ L3D.initMountain = function(recommendation, scene, coins) {
     return recommendations;
 };
 
-L3D.initSponzaScene = function(scene, collidableObjects, recommendation) {
+L3D.initSponzaScene = function(scene, collidableObjects, recommendation, clickable) {
 
     var loader = new L3D.ProgressiveLoader(
         '/static/data/sponza/sponza.obj',
         scene,
         recommendation,
         function(obj) {
+            if (clickable !== undefined)
+                clickable.push(obj);
             if (obj.material.name === 'chain' ||
                 obj.material.name === 'leaf'  ||
                 obj.material.name === 'Material__57') {
@@ -711,12 +721,12 @@ L3D.resetSponzaElements = function() {
     };
 };
 
-L3D.initSponza = function(recommendation, scene, coins) {
+L3D.initSponza = function(recommendation, scene, coins, clickable) {
 
     L3D.addLight(scene);
 
     var collidableObjects = [];
-    L3D.initSponzaScene(scene, collidableObjects, recommendation);
+    L3D.initSponzaScene(scene, collidableObjects, recommendation, clickable);
 
     recommendation.resetElements = L3D.resetSponzaElements();
     recommendation.collidableObjects = collidableObjects;

js/l3d/src/utils/ObjectClicker.js

@@ -0,0 +1,98 @@
+L3D.ObjectClicker = (function() {
+
+function pointerCheck(camera) {
+    return (camera instanceof L3D.PointerCamera && camera.pointerLocked);
+}
+
+var ObjectClicker = function(renderer, camera, objects, onHover, onClick, domElement) {
+
+    this.renderer = renderer;
+    this.objects = objects;
+    this.onHover = onHover;
+    this.onClick = onClick;
+    this.camera = camera;
+
+    this.mouse = {x: null, y: null};
+
+    this.domElement = domElement || document;
+
+    this.hoveredElement = null;
+
+    this.raycaster = new THREE.Raycaster();
+
+    this.currentPointedObject = null;
+    this.previousPointedObject = null;
+
+    // Add event listeners
+    var self = this;
+    this.domElement.addEventListener('mousemove', function(event) { self.update(event); });
+    this.domElement.addEventListener('click', function(event) { self.click(event); });
+
+};
+
+ObjectClicker.prototype.getPointedObject = function() {
+
+    // Compute x and y for unprojection
+    var x = ( this.mouse.x / this.renderer.domElement.width ) * 2 - 1;
+    var y = - (this.mouse.y / this.renderer.domElement.height) * 2 + 1;
+
+    if (pointerCheck(this.camera)) {
+
+        x = 0;
+        y = 0;
+
+    }
+
+    var vector = new THREE.Vector3(x,y,0.5);
+    vector.unproject(this.camera);
+
+    // Set raycaster
+    this.raycaster.set(this.camera.position, vector.sub(this.camera.position).normalize());
+
+    // Compute intersections
+    var intersects = this.raycaster.intersectObjects(this.objects, false);
+
+    // Avoid non-raycastable objects
+    for (var i = 0; i < intersects.length && !intersects[i].object.raycastable; i++){};
+
+    // Objects are sorted by distance in intersects, the best is the first
+    return intersects[i] !== undefined ? intersects[i].object : undefined;
+
+};
+
+ObjectClicker.prototype.update = function(event) {
+
+    // Set mouse position
+    if (event !== undefined) {
+
+        this.mouse.x = event.offsetX || event.layerX;
+        this.mouse.y = event.offsetY || event.layerY;
+
+    }
+
+    // Update current pointed object
+    this.previousPointedObject = this.currentPointedObject;
+    this.currentPointedObject = this.getPointedObject();
+
+    // If those two objects are different, call onHover
+    if (this.previousPointedObject !== this.currentPointedObject) {
+        var p = pointerCheck(this.camera);
+        this.onHover(
+            this.currentPointedObject,
+            p ? this.renderer.domElement.width  / 2 : this.mouse.x,
+            p ? this.renderer.domElement.height / 2 : this.mouse.y
+        );
+
+    }
+
+};
+
+ObjectClicker.prototype.click = function() {
+
+    this.onClick(this.currentPointedObject, this.mouse.x, this.mouse.y);
+
+}
+
+return ObjectClicker;
+
+})();