Add Camera Toggle.

To make page mobile friendly help text is just shown/hidden instead of sliding in.

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 {
@@ -231,6 +235,7 @@ li {
 }
 
 #loadingText {
+    display: none;
     width: 100%;
     height: 60px;
     position: absolute;

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,15 @@ if (BABYLON.Engine.isSupported()) {
                 currentScene.activeCamera.keysRight.push(69); // E
                 currentScene.activeCamera.keysRight.push(68); // D
             }
+            defaultCamera = currentScene.activeCamera;
+            arcRotateCamera = new BABYLON.ArcRotateCamera("camera", 4.71238898038469, 1.5707963267948966, 3, BABYLON.Vector3.Zero(), currentScene);
+            arcRotateCamera.wheelPrecision = 100.0;
+            arcRotateCamera.minZ = 0.1;
+            arcRotateCamera.maxZ = 1000;
+            if(enableArcRotateCamera){
+                currentScene.activeCamera = arcRotateCamera;
+                currentScene.activeCamera.attachControl(canvas);
+            }
         }
     };
 
@@ -81,6 +93,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 +130,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) {