Merge pull request #1985 from sbtron/master

Add Camera Toggle

sandbox/index-local.html

@@ -36,6 +36,9 @@
                 <li id="btnFullscreen">
                     <img src="./Assets/BtnFullscreen.png" alt="Switch the scene to full screen" title="Switch the scene to full screen" />
                 </li>
+                <li id="btnCamera">
+                    <img src="./Assets/BtnCamera.png" alt="Toggle the camera" title="Toggle the camera" />
+                </li>
                 <li id="btnPerf">
                     <img src="./Assets/BtnPerf.png" alt="Display inspector" title="Display inspector" />
                 </li>

sandbox/index.css

@@ -62,6 +62,7 @@ a {
 }
 
 .help {
+    display: none;
     position: absolute;
     background-color: #988DB5;
     right: 0;
@@ -80,9 +81,11 @@ a {
     .help.shown {
         transform: translateX(-100px);
         -webkit-transform: translateX(-100px);
+        display: inline;
     }
 
  .help2 {
+    display: none;
     position: absolute;
     background-color: #988DB5;
     right: 0;
@@ -101,6 +104,7 @@ a {
     .help2.shown {
         transform: translateX(0px);
         -webkit-transform: translateX(0px);
+        display: inline;
     }
 
 #helpArrow {
@@ -173,12 +177,11 @@ a {
     position: relative;
     text-align: right;    
     -moz-opacity:0 ;
-    filter:alpha(opacity: 0);
     opacity: 0;
     z-index: 2;
     width:100%;
     height:100%;
-    
+    filter:alpha(opacity=0);
 }
 
 #logo {
@@ -188,10 +191,7 @@ a {
     background-position: center;
 }
 
-#btnFullscreen {
-}
-
-#btnFullscreen {
+#btnFullscreen , #btnCamera {
     margin-top: 10px;
     margin-right: 25px;
 }
@@ -253,12 +253,12 @@ li {
     -webkit-transform: translateX(120%);
 }
 
-#btnFullscreen, #btnPerf, #btnFiles {
+#btnFullscreen, #btnCamera, #btnPerf, #btnFiles {
      -webkit-transition: -webkit-transform 0.15s ease-in-out;
      transition: transform 0.15s ease-in-out;
 }
 
-#btnFullscreen:hover, #btnPerf:hover, #btnFiles:hover {
+#btnFullscreen:hover, #btnCamera:hover, #btnPerf:hover, #btnFiles:hover {
     -webkit-transform: scale(0.9);
     transform: scale(0.9);
 }

sandbox/index.html

@@ -32,6 +32,9 @@
                 <li id="btnFullscreen">
                     <img src="./Assets/BtnFullscreen.png" alt="Switch the scene to full screen" title="Switch the scene to full screen" />
                 </li>
+                <li id="btnCamera">
+                    <img src="./Assets/BtnCamera.png" alt="Toggle the camera" title="Toggle the camera" />
+                </li>
                 <li id="btnPerf">
                     <img src="./Assets/BtnPerf.png" alt="Display debug & performance layer" title="Display debug & performance layer" />
                 </li>

sandbox/index.js

@@ -17,6 +17,9 @@ if (BABYLON.Engine.isSupported()) {
     var currentHelpCounter;
     var currentScene;
     var enableDebugLayer = false;
+    var enableArcRotateCamera = false;
+    var arcRotateCamera;
+    var defaultCamera;
 
     currentHelpCounter = localStorage.getItem("helpcounter");
 
@@ -68,6 +71,19 @@ if (BABYLON.Engine.isSupported()) {
                 currentScene.activeCamera.keysRight.push(69); // E
                 currentScene.activeCamera.keysRight.push(68); // D
             }
+            defaultCamera = currentScene.activeCamera;
+            var worldExtends = currentScene.getWorldExtends();
+            var worldCenter = worldExtends.min.add(worldExtends.max.subtract(worldExtends.min).scale(0.5));
+            arcRotateCamera = new BABYLON.ArcRotateCamera("arcRotateCamera", 0, 0, 10, BABYLON.Vector3.Zero(), currentScene);
+            arcRotateCamera.setPosition(new BABYLON.Vector3(worldCenter.x, worldCenter.y, worldExtends.min.z - (worldExtends.max.z - worldExtends.min.z)));
+            arcRotateCamera.setTarget(worldCenter);
+            arcRotateCamera.wheelPrecision = 100.0;
+            arcRotateCamera.minZ = 0.1;
+            arcRotateCamera.maxZ = 1000;
+            if(enableArcRotateCamera){
+                currentScene.activeCamera = arcRotateCamera;
+                currentScene.activeCamera.attachControl(canvas);
+            }
         }
     };
 
@@ -81,6 +97,26 @@ if (BABYLON.Engine.isSupported()) {
         }
     });
     htmlInput.addEventListener('change', function (event) {
+        var filestoLoad;
+            // Handling data transfer via drag'n'drop
+            if (event && event.dataTransfer && event.dataTransfer.files) {
+                filesToLoad = event.dataTransfer.files;
+            }
+            // Handling files from input files
+            if (event && event.target && event.target.files) {
+                filesToLoad = event.target.files;
+            }
+            if (filesToLoad && filesToLoad.length > 0) {
+            enableArcRotateCamera= false;
+            for (var i = 0; i < filesToLoad.length; i++) {
+                    var extension = filesToLoad[i].name.split('.').pop();
+                    if (extension === "gltf" || extension === "glb")
+                    {       
+                         enableArcRotateCamera= true;
+                         break;
+                    }
+                }
+            }
         filesInput.loadFiles(event);
     }, false);
     btnFullScreen.addEventListener('click', function () {
@@ -98,6 +134,20 @@ if (BABYLON.Engine.isSupported()) {
             }
         }
     }, false);
+    btnCamera.addEventListener('click', function () {
+        if (currentScene) {
+            if (!enableArcRotateCamera) {
+                currentScene.activeCamera = arcRotateCamera;
+                currentScene.activeCamera.attachControl(canvas);
+                enableArcRotateCamera = true;
+            }
+            else {
+                currentScene.activeCamera = defaultCamera;
+                currentScene.activeCamera.attachControl(canvas);
+                enableArcRotateCamera = false;
+            }
+        }
+    }, false);
 
     // The help tips will be displayed only 5 times
     if (currentHelpCounter < 5) {