environment control in the sandbox

sandbox/animation.js

@@ -0,0 +1,123 @@
+// Animations
+var animationBar = document.getElementById("animationBar");
+var dropdownBtn = document.getElementById("dropdownBtn");
+var chevronUp = document.getElementById("chevronUp");
+var chevronDown = document.getElementById("chevronDown");
+var dropdownLabel = document.getElementById("dropdownLabel");
+var dropdownContent = document.getElementById("dropdownContent");
+var playBtn = document.getElementById("playBtn");
+var slider = document.getElementById("slider");
+
+// event on the dropdown
+function formatId(name) {
+    return "data-" + name.replace(/\s/g, '');
+}
+
+function displayDropdownContent(display) {
+    if (display) {
+        dropdownContent.style.display = "flex";
+        chevronDown.style.display = "inline";
+        chevronUp.style.display = "none";
+    }
+    else {
+        dropdownContent.style.display = "none";
+        chevronDown.style.display = "none";
+        chevronUp.style.display = "inline";
+    }
+}
+dropdownBtn.addEventListener("click", function() {
+    if (dropdownContent.style.display === "flex") {
+        displayDropdownContent(false);
+    }
+    else {
+        displayDropdownContent(true);
+    }
+});
+
+function selectCurrentGroup(group, index, animation) {
+    if (currentGroupIndex !== undefined) {
+        document.getElementById(formatId(currentGroup.name + "-" + currentGroupIndex)).classList.remove("active");
+    }
+    playBtn.classList.remove("play");
+    playBtn.classList.add("pause");
+
+    // start the new animation group
+    currentGroup = group;
+    currentGroupIndex = index;
+    animation.classList.add("active");
+    dropdownLabel.innerHTML = currentGroup.name;
+    dropdownLabel.title = currentGroup.name;
+
+    // set the slider
+    slider.setAttribute("min", currentGroup.from);
+    slider.setAttribute("max", currentGroup.to);
+    currentSliderValue = currentGroup.from;
+    slider.value = currentGroup.from;
+}
+
+function createDropdownLink(group, index) {
+    var animation = document.createElement("a");
+    animation.innerHTML = group.name;
+    animation.title = group.name;
+    animation.setAttribute("id", formatId(group.name + "-" + index));
+    animation.addEventListener("click", function() {
+        // stop the current animation group
+        currentGroup.reset();
+        currentGroup.stop();
+
+        group.play(true);
+
+        // hide the content of the dropdown
+        displayDropdownContent(false);
+    });
+    dropdownContent.appendChild(animation);
+
+    group.onAnimationGroupPlayObservable.add(function(grp) {
+        selectCurrentGroup(grp, index, animation);
+    });
+
+    group.onAnimationGroupPauseObservable.add(function(grp) {
+        playBtn.classList.add("play");
+        playBtn.classList.remove("pause");
+    });
+}
+
+// event on the play/pause button
+playBtn.addEventListener("click", function() {
+    // click on the button to run the animation
+    if (this.classList.contains("play")) {
+        currentGroup.play(true);
+    }
+    // click on the button to pause the animation
+    else {
+        currentGroup.pause();
+    }
+});
+
+// event on the slider
+slider.addEventListener("input", function() {
+    var value = parseFloat(this.value);
+
+    if (playBtn.classList.contains("play")) {
+        currentGroup.play(true);
+        currentGroup.goToFrame(value);
+        currentGroup.pause();
+    } else {
+        currentGroup.goToFrame(value);
+    }
+});
+
+var sliderPause = false;
+slider.addEventListener("mousedown", function() {
+    if (playBtn.classList.contains("pause")) {
+        sliderPause = true;
+        playBtn.click();
+    }
+});
+
+slider.addEventListener("mouseup", function() {
+    if (sliderPause) {
+        sliderPause = false;
+        playBtn.click();
+    }
+});

sandbox/environment.js

@@ -0,0 +1,60 @@
+
+// Environments
+var dropdownContentEnv = document.getElementById("dropdownContent-env");
+var btnEnvironment = document.getElementById("btnEnvironment");
+
+var skyboxes = [
+    "https://assets.babylonjs.com/environments/environmentSpecular.env",
+    "https://assets.babylonjs.com/environments/studio.env",
+];
+
+var skyboxesNames = [
+    "Default",
+    "Studio",
+];
+
+var readLocaStorageValue = function(key, defautlValue) {
+    if (typeof (Storage) !== "undefined" && localStorage.getItem(key) !== null) {
+        return parseInt(localStorage.getItem(key));
+    }
+
+    return defautlValue;
+}
+
+var defaultSkyboxIndex = readLocaStorageValue("defaultSkyboxId", 0);
+
+function displayDropdownContentEnv(display) {
+    if (display) {
+        dropdownContentEnv.style.display = "block";
+    }
+    else {
+        dropdownContentEnv.style.display = "none";
+    }
+}
+
+btnEnvironment.addEventListener('click', function() {
+    displayDropdownContentEnv(dropdownContentEnv.style.display !== "block");
+}, false);
+
+addEnvironmentLoader = function(index) {
+    var env = document.createElement("div");
+    env.innerHTML = skyboxesNames[index];
+    env.title = skyboxesNames[index];
+    env.addEventListener("click", function() {
+        // hide the content of the dropdown
+        displayDropdownContentEnv(false);
+        if (typeof (Storage) !== "undefined") {
+            localStorage.setItem("defaultSkyboxId", index);
+        }
+        defaultSkyboxIndex = index;
+        skyboxPath = skyboxes[defaultSkyboxIndex];
+        filesInput.reload();
+    });
+
+    return env;
+}
+
+for (var index = 0; index < skyboxes.length; index++) {
+    var env = addEnvironmentLoader(index);
+    dropdownContentEnv.appendChild(env);
+}

sandbox/index-local.html

@@ -40,6 +40,11 @@
             <div class="footerRight">
                 <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg"
                         alt="Display inspector" title="Display inspector" /></a>
+                <a href="javascript:void(null);" id="btnEnvironment" class="hidden"><img src="./Assets/IBLicon.svg"
+                        alt="Select environment" title="Select environment" />
+                </a>
+                <div id="dropdownContent-env" class="hidden">
+                </div>
                 <a href="javascript:void(null);">
                     <div class="custom-upload"
                         title="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)">
@@ -61,6 +66,8 @@
         };
 
         BABYLONDEVTOOLS.Loader
+            .require('environment.js')
+            .require('animation.js')
             .require('index.js')
             .load(function() {
                 BABYLON.DracoCompression.Configuration.decoder = {

sandbox/index.css

@@ -245,8 +245,32 @@ a {
         border: none;
     }
 
-#dropdownContent {
+#dropdownContent-env {
+    position: absolute;
+    bottom: 56px;
+    right: 0px;
+    border-bottom: 1px solid white; 
+}
+
+#dropdownContent-env div  {
     background-color: #3B789A;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 10px 15px;
+    font-size: 16px;
+    width: 100px;
+    color: white;
+    cursor: pointer;
+}
+
+#dropdownContent-env div:hover {
+    background-color: #2c5a74;
+    transition: all 0.3s ease;
+}
+#dropdownContent-env div:active {
+    background-color: #162D3A;
+    transition: all 0.3s ease;
 }
 
 #dropdownLabel,
@@ -282,6 +306,7 @@ a {
 }
 
 #dropdownContent {
+    background-color: #3B789A;
     display: none;
     position: absolute;
     bottom: 56px;

sandbox/index.html

@@ -4,7 +4,8 @@
 <head>
     <title>BabylonJS Sandbox - View glTF, glb, obj and babylon files</title>
     <meta name="description" content="Viewer for glTF, glb, obj and babylon files powered by BabylonJS" />
-    <meta name="keywords" content="Babylon.js, Babylon, BabylonJS, glTF, glb, obj, viewer, online viewer, 3D model viewer, 3D, webgl" />
+    <meta name="keywords"
+        content="Babylon.js, Babylon, BabylonJS, glTF, glb, obj, viewer, online viewer, 3D model viewer, 3D, webgl" />
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
 
     <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
@@ -17,7 +18,8 @@
     <link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
     <link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
     <link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="192x192"
+        href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
     <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
     <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
@@ -71,8 +73,14 @@
             <div class="footerRight">
                 <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg"
                         alt="Display inspector" title="Display inspector" /></a>
+                <a href="javascript:void(null);" id="btnEnvironment" class="hidden"><img src="./Assets/IBLicon.svg"
+                        alt="Select environment" title="Select environment" />
+                </a>
+                <div id="dropdownContent-env" class="hidden">
+                </div>
                 <a href="javascript:void(null);">
-                    <div class="custom-upload" title="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)">
+                    <div class="custom-upload"
+                        title="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)">
                         <input type="file" id="files" multiple />
                     </div>
                 </a>
@@ -82,6 +90,8 @@
         </div>
         <div id="errorZone"></div>
     </div>
+    <script src="environment.js"></script>
+    <script src="animation.js"></script>
     <script src="index.js"></script>
 </body>
 

sandbox/index.js

@@ -6,24 +6,13 @@ var kiosk;
 var currentGroup; // animation group
 var currentGroupIndex;
 var currentScene;
-// html balise
-var animationBar = document.getElementById("animationBar");
-var dropdownBtn = document.getElementById("dropdownBtn");
-var chevronUp = document.getElementById("chevronUp");
-var chevronDown = document.getElementById("chevronDown");
-var dropdownLabel = document.getElementById("dropdownLabel");
-var dropdownContent = document.getElementById("dropdownContent");
-var playBtn = document.getElementById("playBtn");
-var slider = document.getElementById("slider");
+
+// html tags
 var footer = document.getElementById("footer");
 var canvas = document.getElementById("renderCanvas");
 var canvasZone = document.getElementById("canvasZone");
 
-var skyboxes = [
-    "https://assets.babylonjs.com/environments/environmentSpecular.env",
-    "https://assets.babylonjs.com/environments/studio.env",
-]
-
+// Check URL
 var indexOf = location.href.indexOf("?");
 if (indexOf !== -1) {
     var params = location.href.substr(indexOf + 1).split("&");
@@ -62,12 +51,13 @@ if (BABYLON.Engine.isSupported()) {
     var currentScene;
     var currentSkybox;
     var currentPluginName;
-    var skyboxPath = skyboxes[0];
+    var skyboxPath = skyboxes[defaultSkyboxIndex];
     var debugLayerEnabled = false;
 
     engine.loadingUIBackgroundColor = "#a9b5bc";
 
     btnInspector.classList.add("hidden");
+    btnEnvironment.classList.add("hidden");
 
     canvas.addEventListener("contextmenu", function(evt) {
         evt.preventDefault();
@@ -78,11 +68,6 @@ if (BABYLON.Engine.isSupported()) {
     // This is really important to tell Babylon.js to use decomposeLerp and matrix interpolation
     BABYLON.Animation.AllowMatricesInterpolation = true;
 
-    // Update the defaults of the GLTFTab in the inspector.
-    // INSPECTOR.GLTFTab._GetLoaderDefaultsAsync().then(function(defaults) {
-    //     defaults.validate = true;
-    // });
-
     // Setting up some GLTF values
     BABYLON.GLTFFileLoader.IncrementalLoading = false;
     BABYLON.SceneLoader.OnPluginActivatedObservable.add(function(plugin) {
@@ -137,6 +122,7 @@ if (BABYLON.Engine.isSupported()) {
         errorZone.style.display = 'none';
 
         btnInspector.classList.remove("hidden");
+        btnEnvironment.classList.remove("hidden");
 
         currentScene = babylonScene;
         document.title = "Babylon.js - " + sceneFile.name;
@@ -354,117 +340,3 @@ function sizeScene() {
     }
 }
 
-// animation
-// event on the dropdown
-function formatId(name) {
-    return "data-" + name.replace(/\s/g, '');
-}
-
-function displayDropdownContent(display) {
-    if (display) {
-        dropdownContent.style.display = "flex";
-        chevronDown.style.display = "inline";
-        chevronUp.style.display = "none";
-    }
-    else {
-        dropdownContent.style.display = "none";
-        chevronDown.style.display = "none";
-        chevronUp.style.display = "inline";
-    }
-}
-dropdownBtn.addEventListener("click", function() {
-    if (dropdownContent.style.display === "flex") {
-        displayDropdownContent(false);
-    }
-    else {
-        displayDropdownContent(true);
-    }
-});
-
-function selectCurrentGroup(group, index, animation) {
-    if (currentGroupIndex !== undefined) {
-        document.getElementById(formatId(currentGroup.name + "-" + currentGroupIndex)).classList.remove("active");
-    }
-    playBtn.classList.remove("play");
-    playBtn.classList.add("pause");
-
-    // start the new animation group
-    currentGroup = group;
-    currentGroupIndex = index;
-    animation.classList.add("active");
-    dropdownLabel.innerHTML = currentGroup.name;
-    dropdownLabel.title = currentGroup.name;
-
-    // set the slider
-    slider.setAttribute("min", currentGroup.from);
-    slider.setAttribute("max", currentGroup.to);
-    currentSliderValue = currentGroup.from;
-    slider.value = currentGroup.from;
-}
-
-function createDropdownLink(group, index) {
-    var animation = document.createElement("a");
-    animation.innerHTML = group.name;
-    animation.title = group.name;
-    animation.setAttribute("id", formatId(group.name + "-" + index));
-    animation.addEventListener("click", function() {
-        // stop the current animation group
-        currentGroup.reset();
-        currentGroup.stop();
-
-        group.play(true);
-
-        // hide the content of the dropdown
-        displayDropdownContent(false);
-    });
-    dropdownContent.appendChild(animation);
-
-    group.onAnimationGroupPlayObservable.add(function(grp) {
-        selectCurrentGroup(grp, index, animation);
-    });
-
-    group.onAnimationGroupPauseObservable.add(function(grp) {
-        playBtn.classList.add("play");
-        playBtn.classList.remove("pause");
-    });
-}
-
-// event on the play/pause button
-playBtn.addEventListener("click", function() {
-    // click on the button to run the animation
-    if (this.classList.contains("play")) {
-        currentGroup.play(true);
-    }
-    // click on the button to pause the animation
-    else {
-        currentGroup.pause();
-    }
-});
-
-// event on the slider
-slider.addEventListener("input", function() {
-    var value = parseFloat(this.value);
-
-    if (playBtn.classList.contains("play")) {
-        currentGroup.play(true);
-        currentGroup.goToFrame(value);
-        currentGroup.pause();
-    } else {
-        currentGroup.goToFrame(value);
-    }
-});
-
-var sliderPause = false;
-slider.addEventListener("mousedown", function() {
-    if (playBtn.classList.contains("pause")) {
-        sliderPause = true;
-        playBtn.click();
-    }
-});
-
-slider.addEventListener("mouseup", function() {
-    if (sliderPause) {
-        sliderPause = false;
-        playBtn.click();
-    }
-});