Added reset button

js/PointerCamera.js

@@ -65,20 +65,8 @@ PointerCamera.prototype.update = function() {
 
         if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.01 &&
             Tools.norm2(Tools.diff(this.target, this.new_target))  < 0.01) {
-            // this.position = this.new_position.clone();
-            // this.target = this.new_target.clone();
             this.moving = false;
-
+            this.anglesFromVectors();
-            // Update phi and theta so that return to reality does not hurt
-            var forward = Tools.diff(this.target, this.position);
-            forward.normalize();
-
-            this.phi = Math.asin(forward.y);
-
-            // Don't know why this line works... But thanks Thierry-san and
-            // Bastien because it seems to work...
-            this.theta = Math.atan2(forward.x, forward.z);
-
         }
 
         // Hermite polynom version
@@ -124,17 +112,11 @@ PointerCamera.prototype.update = function() {
         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;
 
+        // Compute vectors (position and target)
+        this.vectorsFromAngles();
+
+        // Update with events
         var delta = 0.1;
-
-        // Update direction
-        this.forward.y = Math.sin(this.phi);
-
-        var cos = Math.cos(this.phi);
-        this.forward.z = cos * Math.cos(this.theta);
-        this.forward.x = cos * Math.sin(this.theta);
-        this.forward.normalize();
-
-        // Update
         var forward = this.forward.clone();
         forward.multiplyScalar(400.0 * delta);
         var left = this.up.clone();
@@ -152,8 +134,35 @@ PointerCamera.prototype.update = function() {
         this.target = this.position.clone();
         this.target.add(forward);
     }
+}
 
+PointerCamera.prototype.reset = function() {
+    this.position.copy(new THREE.Vector3(-8.849933489419644, 9.050627639459208, 0.6192960680432451));
+    this.target.copy(new THREE.Vector3(17.945323228767702, -15.156828589982375, -16.585740412769756));
+    this.anglesFromVectors();
+}
 
+PointerCamera.prototype.vectorsFromAngles = function() {
+    // Update direction
+    this.forward.y = Math.sin(this.phi);
+
+    var cos = Math.cos(this.phi);
+    this.forward.z = cos * Math.cos(this.theta);
+    this.forward.x = cos * Math.sin(this.theta);
+    this.forward.normalize();
+
+}
+
+PointerCamera.prototype.anglesFromVectors = function() {
+    // Update phi and theta so that return to reality does not hurt
+    var forward = Tools.diff(this.target, this.position);
+    forward.normalize();
+
+    this.phi = Math.asin(forward.y);
+
+    // Don't know why this line works... But thanks Thierry-san and
+    // Bastien because it seems to work...
+    this.theta = Math.atan2(forward.x, forward.z);
 }
 
 PointerCamera.prototype.move = function(otherCamera) {

prototype/index.html

@@ -5,13 +5,17 @@
                 camera with the arrow keys of your keyboard, and change the
                 angle of the camera by dragging and dropping the scene around
                 it (you can also use your numpad, 2 to look lower, 8 to look
-                higher, 4 to look on the left and 6 to look on the right).
+                higher, 4 to look on the left and 6 to look on the right, but
+                if you're more comfortable with non-numpad keys, you can also
+                use i for up, j for left, k for down, and l for right).
             </p>
             <p>
-                Recommended views are displayed with a transparent red screen.
+                Recommended views are displayed with a transparent red arrow.
-                By clicking on this screen, your camera will move to the
+                They disappear when you come closer to them, and you can
-                recommended viewpoint.
+                automatically move to them by clicking on them. You can reset
+                the camera at anytime by clicking on the reset button.
             </p>
+            <button id="reset" style="margin-bottom:10px">Reset camera</button>
             <div style="border-width:1px; border-style: solid;" id="container"></div>
 #
         </section>

prototype/js/main.js

@@ -16,6 +16,9 @@ init();
 animate();
 
 function init() {
+    // Add the listener on the button
+    document.getElementById('reset').onclick = function() { cameras.mainCamera().reset(); };
+
     // on initialise le moteur de rendu
     container = document.getElementById('container');
     container.style.height = container_size.height + 'px';
@@ -51,8 +54,7 @@ function init() {
     // on initialise la camera que l’on place ensuite sur la scène
     var camera1 = new PointerCamera(50, container_size.width / container_size.height, 0.01, 100000, container);
     camera1.speed = 0.001;
-    camera1.position = new THREE.Vector3(0,2,0);
+    camera1.reset();
-    camera1.phi = -0.1;
     scene.add(camera1);
     cameras.push(camera1);