v1.10.0

Sandbox/babylon.cache

@@ -0,0 +1,19 @@
+CACHE MANIFEST
+
+# Version 1.1
+
+CACHE: 
+babylon.js 
+hand.minified-1.2.js
+index.html
+index.css
+index.js
+Assets/BtnDragdrop.png 
+Assets/BtnFullscreen.png
+Assets/BtnPerf.png
+Assets/FlecheDown.png
+Assets/FlecheTuto.png 
+Assets/LogoSandbox.png
+
+NETWORK: 
+*

Sandbox/index.css

@@ -0,0 +1,232 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    font-family: "Segoe WP", "Segoe UI", "Verdana", "Arial";
+}
+
+a {
+    color: white;
+}
+
+    a:visited {
+        color: white;
+    }
+
+.hidden {
+    display: none;
+}
+
+#renderCanvas {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    margin-bottom: 70px;
+    touch-action: none;
+    -ms-touch-action: none;
+}
+
+.help {
+    position: absolute;
+    background-color: #988DB5;
+    right: 0;
+    bottom: 70px;
+    color: white;
+    padding-right: 10px;
+    width: 360px;
+    height: 30px;
+    transition: all 0.5s ease;
+    -webkit-transition: all 0.5s ease;
+    transform: translateX(400px);
+    -webkit-transform: translateX(400px);
+        text-align: center;
+}
+
+    .help.shown {
+        transform: translateX(-100px);
+        -webkit-transform: translateX(-100px);
+    }
+
+ .help2 {
+    position: absolute;
+    background-color: #988DB5;
+    right: 0;
+    bottom: 70px;
+    color: white;
+    padding-right: 10px;
+    width: 360px;
+    height: 30px;
+    transition: all 0.5s ease;
+    -webkit-transition: all 0.5s ease;
+    transform: translateX(400px);
+    -webkit-transform: translateX(400px);
+        text-align: center;
+}
+
+    .help2.shown {
+        transform: translateX(0px);
+        -webkit-transform: translateX(0px);
+    }
+
+#helpArrow {
+    position: absolute;
+    right: -65px;
+    bottom: 10px;
+}
+
+#fps {
+    position: absolute;
+    font-size: 30px;
+    color: white;
+    bottom: 15px;
+    right: 85px;
+    width: 85px;
+}
+
+.footer {
+    position: absolute;
+    width: 100%;
+    height: 60px;
+    bottom: 0;
+    background-color: #59448F;
+    padding-top: 5px;
+    padding-left: 15px;
+}
+
+.perffooter {
+    position: absolute;
+    width: 100%;
+    height: 60px;
+    bottom: 0px;
+    background-color: #988DB5;
+    padding-top: 5px;
+    padding-left: 15px;
+        transition: all 0.5s ease;
+    -webkit-transition: all 0.5s ease;
+}
+
+    .perffooter.shown {
+        transform: translateY(-65px);
+        -webkit-transform: translateY(-65px);
+    }
+
+.footerRight {
+    display: inline;
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+}
+
+.footerLeft {
+    position: absolute;
+    bottom: 20px;
+    left: 15px;
+    color: white;
+}
+
+.custom-upload {
+    position: relative;
+    background:url(./Assets/BtnDragdrop.png) center right no-repeat;
+    height: 56px;
+    width: 56px;
+    margin: 10px 20px 5px 5px;
+}
+
+.custom-upload input[type=file]
+{
+    outline:none;
+    position: relative;
+    text-align: right;    
+    -moz-opacity:0 ;
+    filter:alpha(opacity: 0);
+    opacity: 0;
+    z-index: 2;
+    width:100%;
+    height:100%;
+
+}
+
+#logo {
+    width: 100%;
+    height: 100%;
+    background: url('./Assets/LogoSandbox.png') no-repeat 0 0;
+    background-position: center;
+}
+
+#btnFullscreen {
+}
+
+#btnFullscreen {
+    margin-top: 10px;
+    margin-right: 25px;
+}
+
+#btnPerf {
+    margin-top: 10px;
+    margin-right: 15px;
+}
+
+ul {
+ padding:0;
+ margin:0;
+ list-style-type:none;
+ }
+
+li {
+ float:left;
+ }
+
+#btnDownArrow {
+    position: absolute;
+    bottom: 35px;
+    right: 30px;
+}
+
+#miscCounters {
+    position: relative;
+    top: 18px;
+    height: 60px;
+    -webkit-column-width: 150px;
+    -moz-column-width: 150px;
+    -ms-column-width: 150px;
+    -o-column-width: 150px;
+    column-width: 150px;
+
+    font-size: 14px;
+}
+
+#loadingText {
+    width: 100%;
+    height: 60px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    margin-top: -30px;
+    color: white;
+    text-align: center;
+    padding-top: 10px;
+    font-size: 30px;
+    transition: transform 0.25s ease-in-out;
+    -webkit-transition: -webkit-transform 0.25s ease-in-out;
+    z-index: 3;
+    cursor: default;
+    background-color: #988DB5;
+}
+
+.loadingText {
+    transform: translateX(120%);
+    -webkit-transform: translateX(120%);
+}
+
+#btnFullscreen, #btnPerf, #btnFiles {
+     -webkit-transition: -webkit-transform 0.15s ease-in-out;
+     transition: transform 0.15s ease-in-out;
+}
+
+#btnFullscreen:hover, #btnPerf:hover, #btnFiles:hover {
+    -webkit-transform: scale(0.9);
+    transform: scale(0.9);
+}

Sandbox/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html manifest="babylon.cache">
+<head>
+    <title>BabylonJS - Sandbox</title>
+    <link href="index.css" rel="stylesheet" />
+    <script src="../hand.minified-1.2.js"></script>
+    <script src="../cannon.js"></script>
+    <script src="../babylon.js"></script>
+    <script src="index.js"></script>
+</head>
+<body>
+    <canvas id="renderCanvas"></canvas>
+    <div id="logo">
+    </div>
+    <div id="help01" class="help">
+        <span class="helpText">Press this button to open your assets' files</span>
+        <img id="helpArrow" src="./Assets/FlecheTuto.png" />
+    </div>
+    <div id="help02" class="help2">
+        <span class="helpText">Or directly drag'n'drop your files in the browser</span>
+    </div>
+    <div id="perf" class="perffooter">
+        <div class="footerLeft">
+            <div id="miscCounters"></div>
+        </div>
+        <div class="footerRight">
+            <div id="fps"></div>
+            <img id="btnDownArrow" src="./Assets/FlecheDown.png" />
+        </div>
+    </div>
+    <div class="footer">
+        <div class="footerLeft">
+            Powered by <a href="http://www.babylonjs.com/" target="_blank">Babylon.js</a><br />
+        </div>
+        <div class="footerRight">
+            <ul>
+                <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="btnPerf">
+                    <img src="./Assets/BtnPerf.png" alt="Display performance dashboard" title="Display performance dashboard" />
+                </li>
+                <li id="btnFiles">
+                    <div class="custom-upload" title="Open your .babylon scene from your hard drive">
+                        <input type="file" id="files" multiple />
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div id="loadingText" class="loadingText"></div>
+</body>
+</html>