problem of camera rotation solved

Author: celian

Rando/Rando.Builds.js

@@ -92,6 +92,7 @@ RANDO.Builds.route = function(scene, vertices, cam_b,  lin_b, sph_b, cyl_b, pan_
         );
 
         // Current position of the camera : the first point
+        scene.activeCamera.rotation = new BABYLON.Vector3.Zero();
         var position = scene.activeCamera.position;
         // Target of the camera : the fourth point 
         var target = new BABYLON.Vector3(

Rando/Rando.Utils.js

@@ -144,6 +144,8 @@ RANDO.Utils.angleFromAxis = function(A, B, axis){
             );
 
             angle = Math.acos(AH/AB);
+            //if (angle > Math.PI/2)
+                //angle = -((Math.PI/2)-angle)
             if (B.x < A.x)
                 return -angle;
             return angle;
@@ -211,7 +213,7 @@ RANDO.Utils.initCamera = function(scene){
     var camera  = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, 0), scene);
     camera.checkCollisions = true;
     camera.maxZ = 10000;
-    camera.speed = 5;
+    camera.speed = 20;
     camera.keysUp = [90]; // Touche Z
     camera.keysDown = [83]; // Touche S
     camera.keysLeft = [81]; // Touche Q
@@ -230,7 +232,7 @@ RANDO.Utils.initCamera = function(scene){
  *  return the camera
  * */
 RANDO.Utils.animateCamera = function(vertices, cam_z_off, scene){
-    var fpk = 10; // Time to go from a point to another (frame per key)
+    var fpk = 20; // Time to go from a point to another (frame per key)
     var fps = 30; // Frame per Second
     var d = 5 // Distance between the current point and the point watched
     scene.activeCamera.position.y += cam_z_off;
@@ -254,17 +256,31 @@ RANDO.Utils.animateCamera = function(vertices, cam_z_off, scene){
     );
 
     // Arrays with all animation keys
-    var keys_rot = [];  
+    var keys_rot = []; 
     var keys_tr = [];  
     for (var i = 0; i < vertices.length-d; i+=d){
-        var a = vertices[i];
-        var b = vertices[i+d];
+        var a = vertices[i],
+            b = vertices[i+d],
+            alpha1, 
+            alpha2 = RANDO.Utils.angleFromAxis(a, b, BABYLON.Axis.Y);
+            
+        if(i!=0){
+            alpha1 = keys_rot[(i/d)-1].value;
+            // Correction of a particular case
+            if(alpha1*alpha2<0 && Math.abs(alpha1) > Math.PI/2 && Math.abs(alpha2) > Math.PI/2){
+                alpha2 = (2*Math.PI - Math.abs(alpha2));
+            }
+        }
+        
+        console.log("Vertice "+ i);
+        console.log(vertices[i], vertices[i+d])
+        console.log(alpha2*180/Math.PI);
         keys_rot.push({
-            frame:  i*fpk,
-            value:  RANDO.Utils.angleFromAxis(a, b, BABYLON.Axis.Y)
+            frame : (i/d)*fpk,
+            value : alpha2
         });
         keys_tr.push({
-            frame:  i*fpk,
+            frame:  (i/d)*fpk,
             value:  new BABYLON.Vector3(
                         a.x, 
                         a.y + cam_z_off,

index.html

@@ -10,23 +10,49 @@
             height: 100%;
             padding: 0;
             margin: 0;
+            font-family: arial; 
         }
         canvas {
             display:block;
         }
+        div {
+            border-radius: 3px;
+        }
         #menu {
             position: absolute;
             top: 10px;
             left: 10px;
-            height: 100px;
-            width : 500px;
+            height: auto;
+            width: 400px;;
+            background-color: rgba(255,255,255, 0.8);
+            padding: 5px;
+            text-align: center;
+            font-size: 20px;
+            
         }
-        #menu span {
-            display: inline-block;
-            opacity: 0.8;
-            background-color: white;
+        #menu .choice {
+            float: left;
+            padding: 5px;
+            margin: 5px;
+            background-color: rgba(100,100,100, 0.8);
+            font-size: 18px;
+            color: white;
+        }
+        
+        #infos {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            height: auto;
+            width : 300px;
+            background-color: rgba(255,255,255, 0.8);
+            padding : 5px;
+            
+        }
+        #infos span{
+            float: left;
+            width: 100%;
         }
-
     </style>
     <script src="lib/jquery-1.9.1.js"></script>
     <!-- BABYLON-->
@@ -44,10 +70,17 @@
         <canvas id="canvas_renderer"></canvas>
     </div>
     <div id="menu">
-        <span data-id="903488">Le vallon de Vaccivier</span>
-        <span data-id="903469">Le refuge de la Lavey</span>
+        <span> <b>Choix du Modèle Numérique Terrain</b>  </span>
+        <span  data-id="903488" class = "choice">Le vallon de Vaccivier</span>
+        <span  data-id="903469" class = "choice">Le refuge de la Lavey</span>
     </div>
-
+    
+    <div id="infos">
+        <span><b>Q, Z, S, D </b>: se déplacer </span>
+        <span><b>Espace</b>: play/pause survol de la caméra </span>
+        <span><b>Entrée</b>: retour au départ </span>
+    </div>
+    
     <script src="index.js"></script>
  </body>
 

index.js

@@ -23,7 +23,7 @@
  *              python -m SimpleHTTPServer 
  * to launch in chromium 
  * */
-$("#menu span").click(function() {
+$("#menu .choice").click(function() {
     var id = $(this).data('id');
 
     // clear engine if it contains something
@@ -114,4 +114,4 @@ $("#menu span").click(function() {
         scene.render();
     });
 });
-$("#menu span:first").click();
+$("#menu .choice:first").click();