Everything seems to work, except viewport lines

controllers/prototype/views/prototype_reverse.jade

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

controllers/prototype/views/prototype_viewports.jade

@@ -4,7 +4,7 @@ block title
     title #{title} - Prototype - Viewports
 
 block configjs
-    script RecommendedCamera = OldFixedCamera;
+    script Recommendation = L3D.ViewportRecommendation;
 
 //-block preciseDescription
     p

js/Makefile

@@ -22,12 +22,13 @@ L3D:
 		--js l3d/src/canvases/MousePointer.js \
 		--js l3d/src/canvases/Previewer.js \
 		--js l3d/src/loaders/ProgressiveLoader.js \
-		--js l3d/src/recommendations/ViewportRecommendation.js \
 		--js l3d/src/recommendations/BaseRecommendation.js \
+		--js l3d/src/recommendations/ViewportRecommendation.js \
 		--js l3d/src/recommendations/ArrowRecommendation.js \
 		--js l3d/src/recommendations/ReverseRecommendation.js \
 		--js l3d/src/cameras/ReplayCamera.js \
 		--js l3d/src/cameras/Camera.js \
+		--js l3d/src/cameras/FixedCamera.js \
 		--js l3d/src/cameras/PointerCamera.js \
 		--js l3d/src/cameras/CameraContainer.js \
 		--js l3d/src/scenes/initScene.js \

js/l3d/apps/prototype/ButtonManager.js

@@ -1,4 +1,5 @@
-var ButtonManager = function(cameras, previewer) {
+var ButtonManager = function(camera, cameras, previewer) {
+    this.camera = camera;
     this.cameras = cameras;
     this.previewer = previewer;
 
@@ -19,8 +20,8 @@ var ButtonManager = function(cameras, previewer) {
     this.fullscreenElement.onclick = function() {fullscreen();};
 
     (function(self) {
-        self.undoElement.onclick = function() {self.cameras.mainCamera().undo(); self.updateElements();};
+        self.undoElement.onclick = function() {self.camera.undo(); self.updateElements();};
-        self.redoElement.onclick = function() {self.cameras.mainCamera().redo(); self.updateElements();};
+        self.redoElement.onclick = function() {self.camera.redo(); self.updateElements();};
 
         self.fullElement.onclick = function() {
             self.cameras.map(function(camera) {
@@ -32,15 +33,15 @@ var ButtonManager = function(cameras, previewer) {
         };
 
         self.pointerLockElement.onchange = function() {
-            self.cameras.mainCamera().shouldLock = self.pointerLockElement.checked;
+            self.camera.shouldLock = self.pointerLockElement.checked;
-            self.cameras.mainCamera().onPointerLockChange();
+            self.camera.onPointerLockChange();
         };
 
         self.showarrowsElement.onchange = function() {self.showArrows = self.showarrowsElement.checked;};
 
         self.resetElement.onclick = function() {
             // Reinit camera
-            self.cameras.mainCamera().reset();
+            self.camera.reset();
         };
 
         self.recommendationElement.onchange = function() {
@@ -52,13 +53,13 @@ var ButtonManager = function(cameras, previewer) {
 
 ButtonManager.prototype.updateElements = function() {
     // Update icon
-    if (!this.cameras.mainCamera().undoable()) {
+    if (!this.camera.undoable()) {
         this.undoElement.className = "btn btn-default navbar-btn";
     } else {
         this.undoElement.className = "btn btn-primary navbar-btn";
     }
 
-    if (!this.cameras.mainCamera().redoable()) {
+    if (!this.camera.redoable()) {
         this.redoElement.className = "btn btn-default navbar-btn";
     } else {
         this.redoElement.className = "btn btn-primary navbar-btn";

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

@@ -158,10 +158,10 @@ function initListeners() {
     document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
 
     // HTML Bootstrap buttons
-    buttonManager = new ButtonManager(cameras, previewer);
+    buttonManager = new ButtonManager(camera1, cameras, previewer);
 
     // Camera selecter for hover and clicking recommendations
-    cameraSelecter = new L3D.CameraSelecter(renderer, scene, cameras, coins, buttonManager);
+    cameraSelecter = new L3D.CameraSelecter(renderer, scene, camera1, cameras, coins, buttonManager);
 }
 
 function render() {
@@ -184,21 +184,20 @@ function render() {
 
     // Update main camera
     var currentTime = Date.now() - previousTime;
-    cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime);
+    camera1.update(isNaN(currentTime) ? 20 : currentTime);
     previousTime = Date.now();
 
     // Update the recommendations
-    cameras.update(cameras.mainCamera());
+    cameras.map(function(cam) { cam.update(camera1);});
-
 
     // Set current position of camera
-    cameras.look();
+    camera1.look();
 
     var left = 0, bottom = 0, width = container_size.width(), height = container_size.height();
     renderer.setScissor(left, bottom, width, height);
     renderer.enableScissorTest(true);
     renderer.setViewport(left, bottom, width, height);
-    renderer.render(scene, cameras.mainCamera());
+    renderer.render(scene, camera1);
 
     // Remove borders of preview
     previewer.clear();
@@ -207,7 +206,7 @@ function render() {
     cameras.map(function(camera) { if (camera instanceof Recommendation) hide(camera); });
 
     // Update transparent elements
-    THREEx.Transparency.update(cameras.mainCamera());
+    THREEx.Transparency.update(camera1);
 
     // Render preview
     previewer.render(cameraSelecter.prev, container_size.width(), container_size.height());

js/l3d/apps/prototype/replay/main.js

@@ -33,6 +33,7 @@ var cameras, cameraSelecter;
 var spheres = new Array(mesh_number);
 var visible = 0;
 var stats;
+var camera1;
 
 var loader;
 var coins = [];
@@ -71,7 +72,7 @@ function init() {
     container.appendChild(renderer.domElement);
 
     // Initialize pointer camera
-    var camera1 = new L3D.ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000, coins);
+    camera1 = new L3D.ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000, coins);
     cameras = initMainScene(camera1, scene, coins);
     camera1.cameras = cameras;
 
@@ -183,21 +184,21 @@ function render() {
 
     // Update main camera
     var currentTime = Date.now() - previousTime;
-    cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime);
+    camera1.update(isNaN(currentTime) ? 20 : currentTime);
     previousTime = Date.now();
 
     // Update the recommendations
-    cameras.update(cameras.mainCamera());
+    cameras.map(function(camera) {camera.update(camera1);});
 
 
     // Set current position of camera
-    cameras.look();
+    camera1.look();
 
     var left = 0, bottom = 0, width = container_size.width(), height = container_size.height();
     renderer.setScissor(left, bottom, width, height);
     renderer.enableScissorTest(true);
     renderer.setViewport(left, bottom, width, height);
-    renderer.render(scene, cameras.mainCamera());
+    renderer.render(scene, camera1);
 
     // Hide arrows in recommendation
     // cameras.map(function(camera) { if (camera instanceof RecommendedCamera) hide(camera); });

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

@@ -304,10 +304,12 @@ TutoCamera.prototype.anglesFromVectors = function() {
     this.theta = Math.atan2(forward.x, forward.z);
 };
 
-TutoCamera.prototype.move = function(otherCamera, toSave) {
+TutoCamera.prototype.move = function(recommendation, toSave) {
     if (toSave === undefined)
         toSave = true;
 
+    var otherCamera = recommendation.camera || recommendation;
+
     this.moving = true;
     this.new_target = otherCamera.target.clone();
     this.new_position = otherCamera.position.clone();
@@ -326,7 +328,7 @@ TutoCamera.prototype.move = function(otherCamera, toSave) {
     }
 };
 
-TutoCamera.prototype.moveHermite = function(otherCamera, toSave) {
+TutoCamera.prototype.moveHermite = function(recommendation, toSave) {
     if (this.tutorial.nextAction() === 'recommendation') {
         this.tutorial.nextStep();
     }
@@ -334,6 +336,8 @@ TutoCamera.prototype.moveHermite = function(otherCamera, toSave) {
     if (toSave === undefined)
         toSave = true;
 
+    var otherCamera = recommendation.camera;
+
     this.movingHermite = true;
     this.t = 0;
 

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

@@ -27,6 +27,7 @@ var loader;
 var coins = [];
 var previousTime;
 var tutorial;
+var camera1;
 
 init();
 animate();
@@ -64,7 +65,7 @@ function init() {
     stats.domElement.style.position = 'absolute';
     stats.domElement.style.cssFloat = "top-left";
 
-    var camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container);
+    camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container);
 
     // Initialize pointer for pointer lock
     var pointer = new L3D.MousePointer(camera1);
@@ -88,7 +89,7 @@ function init() {
     // Initialize pointer camera
     tutorial = camera1.tutorial;
 
-    cameras = new L3D.CameraContainer(camera1, []);
+    cameras = [];
     tutorial.setCameras(cameras);
 
     // Load peach scene
@@ -121,10 +122,10 @@ function initListeners() {
     document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
 
     // HTML Bootstrap buttons
-    buttonManager = new ButtonManager(cameras, previewer);
+    buttonManager = new ButtonManager(camera1, cameras, previewer);
 
     // Camera selecter for hover and clicking recommendations
-    cameraSelecter = new L3D.CameraSelecter(renderer, scene, cameras, coins, buttonManager);
+    cameraSelecter = new L3D.CameraSelecter(renderer, scene, camera1, cameras, coins, buttonManager);
 }
 
 
@@ -148,21 +149,21 @@ function render() {
 
     // Update main camera
     var currentTime = Date.now() - previousTime;
-    cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime);
+    camera1.update(isNaN(currentTime) ? 20 : currentTime);
     previousTime = Date.now();
 
     // Update the recommendations
-    cameras.update(cameras.mainCamera());
+    cameras.map(function(camera) {camera.update(camera1);});
 
     // Set current position of camera
-    cameras.look();
+    camera1.look();
 
     var left = 0, bottom = 0, width = container_size.width(), height = container_size.height();
     renderer.setScissor(left, bottom, width, height);
     renderer.enableScissorTest(true);
     renderer.setViewport(left, bottom, width, height);
-    THREEx.Transparency.update(cameras.mainCamera());
+    THREEx.Transparency.update(camera1);
-    renderer.render(scene, cameras.mainCamera());
+    renderer.render(scene, camera1);
 
     // Remove borders of preview
     previewer.clear();
@@ -193,8 +194,8 @@ function onWindowResize() {
     previewer.domElement.height = container_size.height();
 
     renderer.setSize(container_size.width(), container_size.height());
-    cameras.forEach(function(camera) {camera.aspect = container_size.width() / container_size.height();});
+    cameras.forEach(function(camera) {camera.camera.aspect = container_size.width() / container_size.height();});
-    cameras.forEach(function(camera) {camera.updateProjectionMatrix();});
+    cameras.forEach(function(camera) {camera.camera.updateProjectionMatrix();});
     render();
 }
 

js/l3d/src/cameras/CameraContainer.js

@@ -1,77 +0,0 @@
-L3D.CameraContainer = function (pointerCamera, cameras) {
-    if (cameras !== undefined) {
-        this.cameras = cameras;
-    } else {
-        this.cameras = [];
-    }
-
-    if (pointerCamera !== undefined) {
-        this.push(pointerCamera);
-    }
-};
-
-L3D.CameraContainer.prototype.mainCamera = function(id) {
-    if (id === undefined) {
-        return this.pointerCamera;
-    }
-    if (id >= cameras.length || id < 0) {
-        console.log('Warning : this camera does not exist');
-        return;
-    }
-
-    this.current_camera = id;
-};
-
-L3D.CameraContainer.prototype.forEach = function(callback) {
-    callback(this.pointerCamera);
-    this.cameras.forEach(callback);
-};
-
-L3D.CameraContainer.prototype.look = function() {
-    this.mainCamera().look();
-};
-
-L3D.CameraContainer.prototype.updateMainCamera = function(time) {
-    this.pointerCamera.update(time);
-};
-
-L3D.CameraContainer.prototype.update = function(position) {
-    this.cameras.map(function (elt) { elt.update(position); });
-};
-
-L3D.CameraContainer.prototype.push = function(camera) {
-    this.pointerCamera = camera;
-    this.push = function(camera) {
-        this.cameras.push(camera);
-    };
-};
-
-L3D.CameraContainer.prototype.get = function(i) {
-    return this.cameras[i];
-};
-
-L3D.CameraContainer.prototype.getByObject = function(object) {
-    for (var i in this.cameras) {
-        if (this.cameras[i].containsObject(object)) {
-            return this.get(i);
-        }
-    }
-};
-
-L3D.CameraContainer.prototype.setById = function(id) {
-    var i = this.getById(id);
-
-    if (i !== -1)
-        this.current_camera = i;
-};
-
-L3D.CameraContainer.prototype.nextCamera = function() {
-    if (this.cameras.length !== 0) {
-        this.current_camera++;
-        this.current_camera%=this.cameras.length;
-    }
-};
-
-L3D.CameraContainer.prototype.map = function(callback) {
-    this.cameras.map(callback);
-};

js/l3d/src/cameras/FixedCamera.js

@@ -0,0 +1,28 @@
+L3D.FixedCamera = function(arg1, arg2, arg3, arg4, position, target) {
+    THREE.PerspectiveCamera.apply(this, arguments);
+
+    if (position === undefined) {
+
+        position = new THREE.Vector3(0,0,5);
+
+    }
+
+    if (target === undefined ) {
+
+        target = new THREE.Vector3();
+
+    }
+
+    this.position.x = position.x;
+    this.position.y = position.y;
+    this.position.z = position.z;
+
+    this.target = target.clone();
+
+}
+L3D.FixedCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
+L3D.FixedCamera.prototype.constructor = L3D.FixedCamera;
+
+L3D.FixedCamera.prototype.look = function() {
+    this.lookAt(this.target);
+}

js/l3d/src/cameras/PointerCamera.js

@@ -260,15 +260,14 @@ L3D.PointerCamera.prototype.onPointerLockChange = function() {
  * @param {Number} time number of milliseconds between the previous and the next frame
  */
 L3D.PointerCamera.prototype.update = function(time) {
+    this.shouldLogCameraAngles = false;
     if (this.moving) {
         this.linearMotion(time);
+    } else if (this.movingHermite) {
+        this.hermiteMotion(time);
     } else {
-        this.shouldLogCameraAngles = false;
+        this.shouldLogCameraAngles = true;
-        if (this.movingHermite) {
+        this.normalMotion(time);
-            this.hermiteMotion(time);
-        } else {
-            this.normalMotion(time);
-        }
     }
 };
 
@@ -341,7 +340,7 @@ L3D.PointerCamera.prototype.normalMotion = function(time) {
             var self = this;
             setTimeout(function() {
                 self.shouldLogCameraAngles = true;
-            }, 100);
+            }, 500);
 
             var event = new L3D.BD.Event.KeyboardEvent();
             event.camera = this;
@@ -437,10 +436,12 @@ L3D.PointerCamera.prototype.anglesFromVectors = function() {
  * @param {Camera} camera Camera to move to
  * @param {Boolean} [toSave=true] true if you want to save the current state of the camera
  */
-L3D.PointerCamera.prototype.move = function(otherCamera, toSave) {
+L3D.PointerCamera.prototype.move = function(recommendation, toSave) {
     if (toSave === undefined)
         toSave = true;
 
+    var otherCamera = recommendation.camera;
+
     this.moving = true;
     this.new_target = otherCamera.target.clone();
     this.new_position = otherCamera.position.clone();
@@ -464,10 +465,12 @@ L3D.PointerCamera.prototype.move = function(otherCamera, toSave) {
  * @param {Camera} camera Camera to move to
  * @param {Boolean} [toSave=true] true if you want to save the current state of the camera
  */
-L3D.PointerCamera.prototype.moveHermite = function(otherCamera, toSave) {
+L3D.PointerCamera.prototype.moveHermite = function(recommendation, toSave) {
     if (toSave === undefined)
         toSave = true;
 
+    var otherCamera = recommendation.camera;
+
     this.movingHermite = true;
     this.t = 0;
 

js/l3d/src/canvases/Previewer.js

@@ -116,7 +116,7 @@ L3D.Previewer.prototype.render = function(prev, container_width, container_heigh
         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);
+        this.renderer.render(this.scene, prev.camera.camera);
 
         this.update(true);
 

js/l3d/src/recommendations/BaseRecommendation.js

@@ -2,54 +2,52 @@
  * @memberof L3D
  * @description The base class for recommendation
  * @constructor
- * @extends THREE.PerspectiveCamera
  * @abstract
  */
 L3D.BaseRecommendation = function(arg1, arg2, arg3, arg4, position, target) {
-    THREE.PerspectiveCamera.apply(this, arguments);
 
-    // Set Position
+    THREE.Object3D.apply(this);
-    if (position === undefined) {
-        this.position = new THREE.Vector3(0,0,5);
-    } else {
-        this.position.x = position.x;
-        this.position.y = position.y;
-        this.position.z = position.z;
-    }
 
-    if (target === undefined)
+    this.camera = new L3D.FixedCamera(arg1, arg2, arg3, arg4, position, target);
-        target = new THREE.Vector3(0,0,0);
+    this.add(this.camera);
 
     var direction = target.clone();
-    direction.sub(this.position);
+    direction.sub(this.camera.position);
     direction.normalize();
 
-    this.center = this.position.clone();
+    this.center = this.camera.position.clone();
     this.center.sub(direction);
 
-    this.target = this.position.clone();
-    this.target.add(L3D.Tools.mul(direction,20));
-
 
     this.arrow = new THREE.Mesh(new THREE.Geometry(), new THREE.MeshLambertMaterial({color: 0x0000ff, side:THREE.BackSide}));
+    this.add(this.arrow);
 
     this.size = 0.4;
 
     this.object3D = new THREE.Object3D();
-    this.object3D.add(this.initExtremity());
+
+    var tmp = this.initExtremity();
+
+    if (tmp !== undefined)
+        this.object3D.add(tmp);
+
     this.object3D.add(this.arrow);
 
+    this.add(this.object3D);
+
     this.fullArrow = false;
 
+    r = this;
+
 };
-L3D.BaseRecommendation.prototype = Object.create(THREE.PerspectiveCamera.prototype);
+L3D.BaseRecommendation.prototype = Object.create(THREE.Object3D.prototype);
 L3D.BaseRecommendation.prototype.constructor = L3D.BaseRecommendation;
 
 /**
  * Changes the color of the meshes like a HTML link
  */
 L3D.BaseRecommendation.prototype.check = function() {
-    this.object3D.traverse(function(obj) {
+    this.traverse(function(obj) {
         if (obj instanceof THREE.Mesh)
             obj.material.color.setHex(0x663366);
     });
@@ -61,8 +59,8 @@ L3D.BaseRecommendation.prototype.check = function() {
 L3D.BaseRecommendation.prototype.initExtremity = function() {
     var geometry = new THREE.Geometry();
 
-    var direction = this.target.clone();
+    var direction = this.camera.target.clone();
-    direction.sub(this.position);
+    direction.sub(this.camera.position);
     direction.normalize();
 
     var left = L3D.Tools.cross(direction, this.up);
@@ -74,11 +72,11 @@ L3D.BaseRecommendation.prototype.initExtremity = function() {
     left = L3D.Tools.mul(left, this.size);
     other  = L3D.Tools.mul(other, this.size);
 
-    geometry.vertices.push(L3D.Tools.sum( L3D.Tools.sum( this.position, left),  other),
+    geometry.vertices.push(L3D.Tools.sum( L3D.Tools.sum( this.camera.position, left),  other),
-                           L3D.Tools.diff(L3D.Tools.sum( this.position, other), left),
+                           L3D.Tools.diff(L3D.Tools.sum( this.camera.position, other), left),
-                           L3D.Tools.diff(L3D.Tools.diff(this.position, left),  other),
+                           L3D.Tools.diff(L3D.Tools.diff(this.camera.position, left),  other),
-                           L3D.Tools.sum( L3D.Tools.diff(this.position, other), left),
+                           L3D.Tools.sum( L3D.Tools.diff(this.camera.position, other), left),
-                           L3D.Tools.sum(this.position, direction)
+                           L3D.Tools.sum(this.camera.position, direction)
                           );
 
     geometry.faces.push(new THREE.Face3(0,2,1), // new THREE.Face3(0,2,1),
@@ -106,8 +104,8 @@ L3D.BaseRecommendation.prototype.initExtremity = function() {
  * Updates the extremity of the arrow
  */
 L3D.BaseRecommendation.prototype.updateExtremity = function() {
-    var direction = this.target.clone();
+    var direction = this.camera.target.clone();
-    direction.sub(this.position);
+    direction.sub(this.camera.position);
     direction.normalize();
 
     var left = L3D.Tools.cross(direction, this.up);
@@ -119,11 +117,11 @@ L3D.BaseRecommendation.prototype.updateExtremity = function() {
     other  = L3D.Tools.mul(other, this.size);
 
     this.mesh.geometry.vertices = [
-        L3D.Tools.sum( L3D.Tools.sum( this.position, left),  other),
+        L3D.Tools.sum( L3D.Tools.sum( this.camera.position, left),  other),
-        L3D.Tools.diff(L3D.Tools.sum( this.position, other), left),
+        L3D.Tools.diff(L3D.Tools.sum( this.camera.position, other), left),
-        L3D.Tools.diff(L3D.Tools.diff(this.position, left),  other),
+        L3D.Tools.diff(L3D.Tools.diff(this.camera.position, left),  other),
-        L3D.Tools.sum( L3D.Tools.diff(this.position, other), left),
+        L3D.Tools.sum( L3D.Tools.diff(this.camera.position, other), left),
-        L3D.Tools.sum(this.position, direction)
+        L3D.Tools.sum(this.camera.position, direction)
     ];
 
     this.mesh.geometry.computeFaceNormals();
@@ -189,18 +187,18 @@ L3D.BaseRecommendation.prototype.regenerateArrow = function(mainCamera) {
 
     // First point of curve
     var f0 = mainCamera.position.clone();
-    f0.add(L3D.Tools.mul(L3D.Tools.sum(new THREE.Vector3(0,-0.5,0), L3D.Tools.diff(this.target, this.position).normalize()),2));
+    f0.add(L3D.Tools.mul(L3D.Tools.sum(new THREE.Vector3(0,-0.5,0), L3D.Tools.diff(this.camera.target, this.camera.position).normalize()),2));
 
     // Last point of curve
-    var f1 = this.position.clone();
+    var f1 = this.camera.position.clone();
 
     // Last derivative of curve
-    var fp1 = L3D.Tools.diff(this.target, this.position);
+    var fp1 = L3D.Tools.diff(this.camera.target, this.camera.position);
     fp1.normalize();
     fp1.multiplyScalar(2);
 
     // Camera direction
-    var dir = L3D.Tools.diff(this.position, mainCamera.position);
+    var dir = L3D.Tools.diff(this.camera.position, mainCamera.position);
     dir.normalize();
 
     if (fp1.dot(dir) < -0.5) {
@@ -212,7 +210,7 @@ L3D.BaseRecommendation.prototype.regenerateArrow = function(mainCamera) {
         // new_dir.multiplyScalar(2);
         // f0.add(new_dir);
 
-        if (mainCamera.position.y > this.position.y) {
+        if (mainCamera.position.y > this.camera.position.y) {
             f0.add(new THREE.Vector3(0,2,0));
         } else {
             f0.add(new THREE.Vector3(0,-2,0));
@@ -288,7 +286,7 @@ L3D.BaseRecommendation.prototype.regenerateArrow = function(mainCamera) {
     this.arrow.geometry.dynamic = true;
     this.arrow.geometry.verticesNeedUpdate = true;
     // this.arrow.geometry.elementsNeedUpdate = true;
-    // this.arrow.geometry.groupsNeedUpdate = true;
+    // this.arrow.geometry.groupsNeedUpdate = true;en-US
     this.arrow.geometry.normalsNeedUpdate = true;
 
 };
@@ -297,7 +295,7 @@ L3D.BaseRecommendation.prototype.regenerateArrow = function(mainCamera) {
  * Look at function. Just like OpenGL gluLookAt (from position to target)
  */
 L3D.BaseRecommendation.prototype.look = function() {
-    this.lookAt(this.target);
+    this.camera.look();
 };
 
 /**
@@ -306,21 +304,4 @@ L3D.BaseRecommendation.prototype.look = function() {
  */
 L3D.BaseRecommendation.prototype.addToScene = function(scene) {
     scene.add(this);
-    scene.add(this.object3D);
-};
-
-/**
- * Apply a callback to all objects representing the camera
- * @param callback {function} callback to call on each mesh
- */
-L3D.BaseRecommendation.prototype.traverse = function(callback) {
-    this.object3D.traverse(callback);
-};
-
-/**
- * Checks if an object is contained in the representation of the camera
- * @param object {THREE.Object3D} Object that could belong the camera
- */
-L3D.BaseRecommendation.prototype.containsObject = function(object) {
-    return object.parent === this.object3D;
 };

js/l3d/src/recommendations/ReverseRecommendation.js

@@ -14,8 +14,8 @@ L3D.ReverseRecommendation.prototype.constructor = L3D.ReverseRecommendation;
 L3D.ReverseRecommendation.prototype.initExtremity = function() {
     var geometry = new THREE.Geometry();
 
-    var direction = this.target.clone();
+    var direction = this.camera.target.clone();
-    direction.sub(this.position);
+    direction.sub(this.camera.position);
     direction.normalize();
 
     var left = L3D.Tools.cross(direction, this.up);
@@ -26,18 +26,18 @@ L3D.ReverseRecommendation.prototype.initExtremity = function() {
     left = L3D.Tools.mul(left, this.size / 2 );
     other  = L3D.Tools.mul(other, this.size / 2);
 
-    var pyramidCenter = L3D.Tools.diff(this.position, L3D.Tools.mul(direction,0.25));
+    var pyramidCenter = L3D.Tools.diff(this.camera.position, L3D.Tools.mul(direction,0.25));
     geometry.vertices.push(
-        L3D.Tools.sum( L3D.Tools.sum( this.position, left),  other),
+        L3D.Tools.sum( L3D.Tools.sum( this.camera.position, left),  other),
-        L3D.Tools.diff(L3D.Tools.sum( this.position, other), left),
+        L3D.Tools.diff(L3D.Tools.sum( this.camera.position, other), left),
-        L3D.Tools.diff(L3D.Tools.diff(this.position, left),  other),
+        L3D.Tools.diff(L3D.Tools.diff(this.camera.position, left),  other),
-        L3D.Tools.sum( L3D.Tools.diff(this.position, other), left),
+        L3D.Tools.sum( L3D.Tools.diff(this.camera.position, other), left),
 
-        L3D.Tools.sum( L3D.Tools.sum( this.position, left),  other),
+        L3D.Tools.sum( L3D.Tools.sum( this.camera.position, left),  other),
-        L3D.Tools.diff(L3D.Tools.sum( this.position, other), left),
+        L3D.Tools.diff(L3D.Tools.sum( this.camera.position, other), left),
-        L3D.Tools.diff(L3D.Tools.diff(this.position, left),  other),
+        L3D.Tools.diff(L3D.Tools.diff(this.camera.position, left),  other),
-        L3D.Tools.sum( L3D.Tools.diff(this.position, other), left)
+        L3D.Tools.sum( L3D.Tools.diff(this.camera.position, other), left)
-        // L3D.Tools.diff(this.position, direction)
+        // L3D.Tools.diff(this.camera.position, direction)
     );
 
     var lambda = 0.6;
@@ -82,30 +82,30 @@ L3D.ReverseRecommendation.prototype.regenerateArrow = function(mainCamera) {
 
     // First point of curve
     var f0 = mainCamera.position.clone();
-    f0.add(L3D.Tools.mul(L3D.Tools.sum(new THREE.Vector3(0,-0.5,0), L3D.Tools.diff(this.target, this.position).normalize()),2));
+    f0.add(L3D.Tools.mul(L3D.Tools.sum(new THREE.Vector3(0,-0.5,0), L3D.Tools.diff(this.camera.target, this.camera.position).normalize()),2));
 
     // Last point of curve
-    var f1 = this.position.clone();
+    var f1 = this.camera.position.clone();
 
     // Last derivative of curve
-    var fp1 = L3D.Tools.diff(this.target, this.position);
+    var fp1 = L3D.Tools.diff(this.camera.target, this.camera.position);
     fp1.normalize();
     fp1.multiplyScalar(2);
 
     // Camera direction
-    var dir = L3D.Tools.diff(this.position, mainCamera.position);
+    var dir = L3D.Tools.diff(this.camera.position, mainCamera.position);
     dir.normalize();
 
     if (fp1.dot(dir) < -0.5) {
         // Regen polynom with better stuff
-        // var new_dir = L3D.Tools.cross(L3D.Tools.diff(this.position, mainCamera.position).normalize(), mainCamera.up);
+        // var new_dir = L3D.Tools.cross(L3D.Tools.diff(this.camera.position, mainCamera.position).normalize(), mainCamera.up);
         // new_dir.multiplyScalar(new_dir.dot(fp1) < 0 ? 1 : -1);
         // new_dir.add(dir);
         // new_dir.add(dir);
         // new_dir.multiplyScalar(2);
         // f0.add(new_dir);
 
-        if (mainCamera.position.y > this.position.y) {
+        if (mainCamera.position.y > this.camera.position.y) {
             f0.add(new THREE.Vector3(0,2,0));
         } else {
             f0.add(new THREE.Vector3(0,-2,0));
@@ -176,7 +176,7 @@ L3D.ReverseRecommendation.prototype.regenerateArrow = function(mainCamera) {
     this.arrow.geometry.computeBoundingSphere();
 
     // this.arrow.geometry.vertices[0] = new THREE.Vector3(); // mainCamera.position.clone();
-    // this.arrow.geometry.vertices[1] = this.position.clone();
+    // this.arrow.geometry.vertices[1] = this.camera.position.clone();
 
     this.arrow.geometry.dynamic = true;
     this.arrow.geometry.verticesNeedUpdate = true;

js/l3d/src/recommendations/ViewportRecommendation.js

@@ -5,26 +5,26 @@
  * @constructor
  */
 L3D.ViewportRecommendation = function(arg1, arg2, arg3, arg4, position, target) {
-    THREE.PerspectiveCamera.apply(this, arguments);
+    L3D.BaseRecommendation.apply(this, arguments);
 
     // Set Position
     if (position === undefined) {
-        this.position = new THREE.Vector3(0,0,5);
+        this.camera.position = new THREE.Vector3(0,0,5);
     } else {
-        this.position.x = position.x;
+        this.camera.position.x = position.x;
-        this.position.y = position.y;
+        this.camera.position.y = position.y;
-        this.position.z = position.z;
+        this.camera.position.z = position.z;
     }
 
     if (target === undefined)
         target = new THREE.Vector3(0,0,0);
 
     var direction = target.clone();
-    direction.sub(this.position);
+    direction.sub(this.camera.position);
     direction.normalize();
 
-    this.target = this.position.clone();
+    this.camera.target = this.camera.position.clone();
-    this.target.add(L3D.Tools.mul(direction,10));
+    this.camera.target.add(L3D.Tools.mul(direction,10));
     // this.up = new THREE.Vector3(0,0,1);
 
     // Compute corners
@@ -40,10 +40,10 @@ L3D.ViewportRecommendation = function(arg1, arg2, arg3, arg4, position, target)
     left = L3D.Tools.mul(left, 1);
     other  = L3D.Tools.mul(other, 1);
 
-    geometry.vertices.push(L3D.Tools.sum(L3D.Tools.sum(this.position, left), other),
+    geometry.vertices.push(L3D.Tools.sum(L3D.Tools.sum(this.camera.position, left), other),
-                           L3D.Tools.diff(L3D.Tools.sum(this.position, other),left),
+                           L3D.Tools.diff(L3D.Tools.sum(this.camera.position, other),left),
-                           L3D.Tools.diff(L3D.Tools.diff(this.position, left),other),
+                           L3D.Tools.diff(L3D.Tools.diff(this.camera.position, left),other),
-                           L3D.Tools.sum(L3D.Tools.diff(this.position, other), left)
+                           L3D.Tools.sum(L3D.Tools.diff(this.camera.position, other), left)
                           );
 
     geometry.faces.push(new THREE.Face3(0,1,2), // new THREE.Face3(0,2,1),
@@ -90,18 +90,28 @@ 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);
+    this.object3D.add(this.line);
+    this.add(this.object3D);
+
 };
-L3D.ViewportRecommendation.prototype = Object.create(THREE.PerspectiveCamera.prototype);
+L3D.ViewportRecommendation.prototype = Object.create(L3D.BaseRecommendation.prototype);
 L3D.ViewportRecommendation.prototype.constructor = L3D.ViewportRecommendation;
 
 L3D.ViewportRecommendation.prototype.check = function() {
     this.mesh.material.color.setHex(0x663366);
 };
 
+L3D.ViewportRecommendation.prototype.initExtremity = function() {
+
+}
+
 // Update function
 L3D.ViewportRecommendation.prototype.update = function(position) {
     // Compute distance between center of camera and position
-    dist = L3D.Tools.norm2(L3D.Tools.diff(position.position, this.position));
+    dist = L3D.Tools.norm2(L3D.Tools.diff(position.position, this.camera.position));
 
     var low_bound = 1;
     var high_bound = 5;
@@ -122,30 +132,10 @@ L3D.ViewportRecommendation.prototype.update = function(position) {
         this.mesh.material.transparent = this.mesh.visible = false;
 };
 
-// Look function
-L3D.ViewportRecommendation.prototype.look = function() {
-    this.lookAt(this.target);
-};
-
-L3D.ViewportRecommendation.prototype.addToScene = function(scene) {
-    scene.add(this);
-    scene.add(this.mesh);
-    scene.add(this.line);
-};
-
-L3D.ViewportRecommendation.prototype.traverse = function(callback) {
-    callback(this.mesh);
-    callback(this.line);
-};
-
-L3D.ViewportRecommendation.prototype.containsObject = function(object) {
-    return object === this.mesh;
-};
-
 L3D.ViewportRecommendation.prototype.setSize = function(size) {
 
-    var direction = this.target.clone();
+    var direction = this.camera.target.clone();
-    direction.sub(this.position);
+    direction.sub(this.camera.position);
     direction.normalize();
 
     var left = L3D.Tools.cross(direction, this.up);
@@ -156,10 +146,10 @@ L3D.ViewportRecommendation.prototype.setSize = function(size) {
     other  = L3D.Tools.mul(other, size);
 
     this.mesh.geometry.vertices = [
-        L3D.Tools.sum(L3D.Tools.sum(this.position, left), other),
+        L3D.Tools.sum(L3D.Tools.sum(this.camera.position, left), other),
-        L3D.Tools.diff(L3D.Tools.sum(this.position, other),left),
+        L3D.Tools.diff(L3D.Tools.sum(this.camera.position, other),left),
-        L3D.Tools.diff(L3D.Tools.diff(this.position, left),other),
+        L3D.Tools.diff(L3D.Tools.diff(this.camera.position, left),other),
-        L3D.Tools.sum(L3D.Tools.diff(this.position, other), left)
+        L3D.Tools.sum(L3D.Tools.diff(this.camera.position, other), left)
     ];
 
     this.mesh.geometry.verticesNeedUpdate = true;

js/l3d/src/scenes/initScene.js

@@ -1,5 +1,3 @@
-var Recommendation = Recommendation || L3D.ArrowRecommendation;
-
 L3D.addLight = function(scene) {
     var directional_light = new THREE.DirectionalLight(0xdddddd);
     directional_light.position.set(1, 2.5, 1).normalize();
@@ -59,7 +57,7 @@ L3D.initPeach = function(camera, scene, coins) {
 
     Coin.init(0.001);
     var otherCams = [];
-    var cameras = new L3D.CameraContainer(camera, otherCams);
+    var cameras = otherCams;
 
     return cameras;
 };
@@ -288,7 +286,7 @@ L3D.initBobomb = function(camera, scene, coins) {
     }
 
     var otherCams = L3D.createBobombCameras(container_size.width(), container_size.height());
-    var cameras = new L3D.CameraContainer(camera, otherCams);
+    var cameras = otherCams;
 
     otherCams.forEach(function(cam) {cam.addToScene(scene);});
 
@@ -460,7 +458,7 @@ L3D.initWhomp = function(camera, scene, coins) {
     }
 
     var otherCams = L3D.createWhompCameras(container_size.width(), container_size.height());
-    var cameras = new L3D.CameraContainer(camera, otherCams);
+    var cameras = otherCams;
 
     otherCams.forEach(function(cam) {cam.addToScene(scene);});
 
@@ -612,7 +610,7 @@ L3D.initMountain = function(camera, scene, coins) {
     }
 
     var otherCams = L3D.createMountainCameras(container_size.width(), container_size.height());
-    var cameras = new L3D.CameraContainer(camera, otherCams);
+    var cameras = otherCams;
 
     otherCams.forEach(function(cam) {cam.addToScene(scene);});
 
@@ -727,7 +725,7 @@ L3D.initSponza = function(camera, scene, coins) {
     }
 
     var otherCams = L3D.createSponzaCameras(container_size.width(), container_size.height());
-    var cameras = new L3D.CameraContainer(camera, otherCams);
+    var cameras = otherCams;
 
     otherCams.forEach(function(cam) {cam.addToScene(scene);});
 

js/l3d/src/utils/CameraSelecter.js

@@ -1,7 +1,8 @@
-L3D.CameraSelecter = function(renderer, scene, cameras, coins, buttonManager) {
+L3D.CameraSelecter = function(renderer, scene, camera, cameras, coins, buttonManager) {
     this.raycaster = new THREE.Raycaster();
     this.renderer = renderer;
     this.mouse = {};
+    this.camera = camera;
     this.cameras = cameras;
     this.prev = {};
     this.buttonManager = buttonManager;
@@ -15,7 +16,7 @@ L3D.CameraSelecter.prototype.pointedCamera = function() {
     var x = ( this.mouse.x / this.renderer.domElement.width ) * 2 - 1;
     var y = - (this.mouse.y / this.renderer.domElement.height) * 2 + 1;
 
-    var camera = this.cameras.mainCamera();
+    var camera = this.camera;
 
     if (camera.pointerLocked) {
 
@@ -58,8 +59,14 @@ L3D.CameraSelecter.prototype.pointedCamera = function() {
                         return this.coins[coin];
                     }
                 }
-                this.currentPointedCamera = this.cameras.getByObject(intersects[bestIndex].object);
+
-                return this.currentPointedCamera;
+                if (intersects[bestIndex].object.parent.parent instanceof L3D.BaseRecommendation) {
+
+                    this.currentPointedCamera = intersects[bestIndex].object.parent.parent;
+                    return this.currentPointedCamera;
+
+                }
+
             // }
         }
     }
@@ -87,7 +94,7 @@ L3D.CameraSelecter.prototype.update = function(event, y) {
             // log it
             e = new L3D.BD.Event.Hovered();
             e.start = true;
-            e.arrow_id = this.cameras.cameras.indexOf(this.currentPointedCamera);
+            e.arrow_id = this.cameras.indexOf(this.currentPointedCamera);
             e.send();
 
             this.prev.x = this.mouse.x;
@@ -108,8 +115,8 @@ L3D.CameraSelecter.prototype.update = function(event, y) {
 
     document.getElementById('container').style.cursor = hovered ? "pointer" : "auto";
 
-    if (this.cameras.mainCamera().pointerLocked)
+    if (this.camera.pointerLocked)
-        this.cameras.mainCamera().mousePointer.render(hovered ? L3D.MousePointer.RED : L3D.MousePointer.BLACK);
+        this.camera.mousePointer.render(hovered ? L3D.MousePointer.RED : L3D.MousePointer.BLACK);
 
 };
 
@@ -121,11 +128,11 @@ L3D.CameraSelecter.prototype.click = function(event) {
     if (newCamera !== undefined && !(newCamera instanceof Coin)) {
 
         e = new L3D.BD.Event.ArrowClicked();
-        e.arrow_id = this.cameras.cameras.indexOf(newCamera);
+        e.arrow_id = this.cameras.indexOf(newCamera);
         e.send();
 
         newCamera.check();
-        this.cameras.mainCamera().moveHermite(newCamera);
+        this.camera.moveHermite(newCamera);
         buttonManager.updateElements();
 
     } else if (newCamera instanceof Coin) {