Added fluid movement from camera to recommendation

js/CameraContainer.js

@@ -39,11 +39,10 @@ CameraContainer.prototype.getById = function(id) {
     for (var i in this.cameras) {
         if (this.cameras[i].mesh !== undefined) {
             if (this.cameras[i].mesh.id == id) {
-                return i;
+                return this.get(i);
             }
         }
     }
-    return -1;
 }
 
 CameraContainer.prototype.setById = function(id) {

js/PointerCamera.js

@@ -7,11 +7,11 @@ var PointerCamera = function() {
     this.phi = Math.PI;
 
     // this.keyboard = undefined;
+    this.moving = false;
 
     this.dragging = false;
-
     this.mouse = {x: 0, y: 0};
-    this.move = {x: 0, y: 0};
+    this.mouseMove = {x: 0, y: 0};
 
 
     // Stuff for rendering
@@ -49,6 +49,31 @@ PointerCamera.prototype.constructor = PointerCamera;
 
 // Update function
 PointerCamera.prototype.update = function() {
+    if (this.moving) {
+        var position_direction = Tools.diff(this.new_position, this.position);
+        var target_direction = Tools.diff(this.new_target, this.target);
+
+        this.position.add(Tools.mul(position_direction, 0.05));
+        this.target.add(Tools.mul(target_direction, 0.05));
+
+        if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 1 &&
+            Tools.norm2(Tools.diff(this.target, this.new_target))  < 1){
+            // this.position = this.new_position.clone();
+            // this.target = this.new_target.clone();
+            this.moving = false;
+
+            // Update phi and theta so that return to reality does not hurt
+            var forward = Tools.diff(this.new_target, this.new_position);
+            forward.normalize();
+
+            this.phi = Math.asin(forward.z);
+
+            // Don't know why this line works...
+            this.theta = Math.atan(forward.y / forward.x) + Math.PI;
+
+        }
+
+    } else {
         // Update angles
         if (this.increasePhi)   this.phi   += this.sensitivity;
         if (this.decreasePhi)   this.phi   -= this.sensitivity;
@@ -56,15 +81,16 @@ PointerCamera.prototype.update = function() {
         if (this.decreaseTheta) this.theta -= this.sensitivity;
 
         if (this.dragging) {
-        this.theta += this.move.x;
-        this.phi   -= this.move.y;
+            this.theta += this.mouseMove.x;
+            this.phi   -= this.mouseMove.y;
 
-        this.move.x = 0;
-        this.move.y = 0;
+            this.mouseMove.x = 0;
+            this.mouseMove.y = 0;
         }
 
-    // Clamp phi
+        // Clamp phi and theta
         this.phi = Math.min(Math.max(-(Math.PI/2-0.1),this.phi), Math.PI/2-0.1);
+        this.theta = ((this.theta - Math.PI) % (2*Math.PI)) + Math.PI;
 
         var delta = 0.1;
 
@@ -93,6 +119,15 @@ PointerCamera.prototype.update = function() {
         this.target.add(forward);
     }
 
+
+}
+
+PointerCamera.prototype.move = function(otherCamera) {
+    this.moving = true;
+    this.new_target = otherCamera.target.clone();
+    this.new_position = otherCamera.position.clone();
+}
+
 // Look function
 PointerCamera.prototype.look = function() {
     this.lookAt(this.target);
@@ -144,8 +179,8 @@ PointerCamera.prototype.onMouseMove = function(event) {
         this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
         this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
 
-        this.move.x = this.mouse.x - mouse.x;
-        this.move.y = this.mouse.y - mouse.y;
+        this.mouseMove.x = this.mouse.x - mouse.x;
+        this.mouseMove.y = this.mouse.y - mouse.y;
     }
 }
 

js/Tools.js

@@ -31,3 +31,11 @@ Tools.mul = function(v1, lambda) {
 Tools.equals = function(v1, v2) {
     return v1.x == v2.x && v1.y == v2.y && v1.z == v2.z;
 }
+
+Tools.norm2 = function(v) {
+    return v.x * v.x + v.y * v.y + v.z * v.z;
+}
+
+Tools.norm = function(v) {
+    return Math.sqrt(Tools.norm2(v));
+}

scene/js/main.js

@@ -177,7 +177,6 @@ function show(object) {
 }
 
 function click(event) {
-    if (cameras.mainCamera() == cameras.get(0)) {
     var mouse = {
         x:   ((event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.width ) * 2 - 1,
         y: - ((event.clientY - renderer.domElement.offsetTop)  / renderer.domElement.height) * 2 + 1
@@ -205,20 +204,21 @@ function click(event) {
                 }
             }
         }
+
         if (bestIndex !== undefined) {
-                cameras.setById(intersects[bestIndex].object.id);
+            if (cameras.getById(intersects[bestIndex].object.id) !== undefined) {
+                cameras.get(0).move(cameras.getById(intersects[bestIndex].object.id));
+            }
         }
 
         // Looking for objects
         for (o in objects) {
             if ( intersects[bestIndex].object.id == objects[o].id) {
-                    cameras.mainCamera(objects[o].seen_by[0]);
+                cameras.get(0).move(cameras.get(objects[o].seen_by[0]));
+                break;
             }
         }
     }
-    } else {
-        cameras.mainCamera(0);
-    }
 
     // var pos = cameras.mainCamera().position;
     // var target = cameras.mainCamera().target