Главная Обзор Помощь
Регистрация Вход
zhangyupeng
/
Babylon.js
1
0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

Added sandbox

David Catuhe 8 лет назад
Родитель
beaa4f949a
Сommit
336db4196f
19 измененных файлов с 496 добавлено и 1 удалено
Разделённый вид Показать статистику Diff
  1. 12 0
      .vscode/launch.json
  2. 0 1
      Playground/index.html
  3. BIN
      sandbox/Assets/BtnDragdrop.png
  4. BIN
      sandbox/Assets/BtnFullscreen.png
  5. BIN
      sandbox/Assets/BtnPerf.png
  6. BIN
      sandbox/Assets/FlecheDown.png
  7. BIN
      sandbox/Assets/FlecheTuto.png
  8. BIN
      sandbox/Assets/Interface-Sandbox.jpg
  9. BIN
      sandbox/Assets/LogoSandbox.png
  10. BIN
      sandbox/Assets/WideLogo.png
  11. BIN
      sandbox/Assets/arrow.png
  12. BIN
      sandbox/Assets/down.png
  13. BIN
      sandbox/Assets/sep.png
  14. BIN
      sandbox/Assets/up.png
  15. BIN
      sandbox/Assets/video.png
  16. 56 0
      sandbox/index-local.html
  17. 264 0
      sandbox/index.css
  18. 49 0
      sandbox/index.html
  19. 115 0
      sandbox/index.js

+ 12 - 0
.vscode/launch.json
Просмотреть файл 

@@ -2,6 +2,18 @@
 
     "version": "0.1.0",

     "configurations": [

         {

+            "name": "Launch sandbox (Chrome)",

+            "type": "chrome",

+            "request": "launch",

+            "url": "http://localhost:1338/sandbox/index-local.html",

+            "webRoot": "${workspaceRoot}/",

+            "sourceMaps": true,

+            "userDataDir": "${workspaceRoot}/.tempChromeProfileForDebug",

+            "runtimeArgs": [

+                "--enable-unsafe-es3-apis" 

+            ]

+        },         

+        {

             "name": "Launch playground (Chrome)",

             "type": "chrome",

             "request": "launch",

+ 0 - 1
Playground/index.html
Просмотреть файл 

@@ -3,7 +3,6 @@
 
 <head>

     <title>Babylon.js Playground</title>

     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>

-    <script src="https://babylonjs.azurewebsites.net/poly2tri.js"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>

     <!--x-tag-->

     <script src="xtag.min.js"></script>

BIN
sandbox/Assets/BtnDragdrop.png
Просмотреть файл


BIN
sandbox/Assets/BtnFullscreen.png
Просмотреть файл


BIN
sandbox/Assets/BtnPerf.png
Просмотреть файл


BIN
sandbox/Assets/FlecheDown.png
Просмотреть файл


BIN
sandbox/Assets/FlecheTuto.png
Просмотреть файл


BIN
sandbox/Assets/Interface-Sandbox.jpg
Просмотреть файл


BIN
sandbox/Assets/LogoSandbox.png
Просмотреть файл


BIN
sandbox/Assets/WideLogo.png
Просмотреть файл


BIN
sandbox/Assets/arrow.png
Просмотреть файл


BIN
sandbox/Assets/down.png
Просмотреть файл


BIN
sandbox/Assets/sep.png
Просмотреть файл


BIN
sandbox/Assets/up.png
Просмотреть файл


BIN
sandbox/Assets/video.png
Просмотреть файл


+ 56 - 0
sandbox/index-local.html
Просмотреть файл 

@@ -0,0 +1,56 @@
 
+<!DOCTYPE html>

+<html>

+<head>

+    <title>BabylonJS - Sandbox</title>

+    <link href="index.css" rel="stylesheet" />

+    <script src="https://babylonjs.azurewebsites.net/cannon.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/Oimo.js"></script>

+	<script src="../Tools/DevLoader/BabylonLoader.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 inspector" title="Display inspector" />

+                </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>

+    <script>

+        BABYLONDEVTOOLS.Loader.require('index.js')

+            .load();

+    </script>	

+</body>

+</html>

+ 264 - 0
sandbox/index.css
Просмотреть файл 

@@ -0,0 +1,264 @@
 
+html, body {

+    width: 100%;

+    height: 100%;

+    padding: 0;

+    margin: 0;

+    overflow: hidden;

+    font-family: "Segoe WP", "Segoe UI", "Verdana", "Arial";

+}

+

+#DebugLayerLogs {

+    height: 100px !important;   

+}

+

+    #DebugLayerLogs > div:first-child {

+        background-color: #988DB5 !important;

+    }

+

+#DebugLayerStats {

+    margin-top: 2px !important;

+}

+

+#DebugLayerStats div:nth-child(2) {

+    max-height: 180px !important;

+}

+

+    #DebugLayerStats > div:first-child {

+        background-color: #988DB5 !important;

+    }

+

+#DebugLayerOptions {

+    overflow-y: hidden !important;

+}

+

+#DebugLayerOptions > div:first-child {

+    background-color: #988DB5 !important;

+}

+

+#DebugLayerTree > div:first-child {

+    background-color: #988DB5 !important;

+}

+

+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);

+}

+ 49 - 0
sandbox/index.html
Просмотреть файл 

@@ -0,0 +1,49 @@
 
+<!DOCTYPE html>

+<html>

+<head>

+    <title>BabylonJS - Sandbox</title>

+    <link href="index.css" rel="stylesheet" />

+    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>

+

+    <script src="https://babylonjs.azurewebsites.net/cannon.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/Oimo.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/babylon.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.glTFFileLoader.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.objFileLoader.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.stlFileLoader.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 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 debug & performance layer" title="Display debug & performance layer" />

+                </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>

+    <script src="index.js"></script>

+</body>

+</html>

+ 115 - 0
sandbox/index.js
Просмотреть файл 

@@ -0,0 +1,115 @@
 
+/// <reference path="../../babylon.js" />

+

+if (BABYLON.Engine.isSupported()) {

+    var canvas = document.getElementById("renderCanvas");

+    var engine = new BABYLON.Engine(canvas, true);

+    var divFps = document.getElementById("fps");

+    var htmlInput = document.getElementById("files");

+    var btnFullScreen = document.getElementById("btnFullscreen");

+    var btnDownArrow = document.getElementById("btnDownArrow");

+    var perffooter = document.getElementById("perf");

+    var btnPerf = document.getElementById("btnPerf");

+    var miscCounters = document.getElementById("miscCounters");

+    var help01 = document.getElementById("help01");

+    var help02 = document.getElementById("help02");

+    var loadingText = document.getElementById("loadingText");

+    var filesInput;

+    var currentHelpCounter;

+    var currentScene;

+    var enableDebugLayer = false;

+

+    currentHelpCounter = localStorage.getItem("helpcounter");

+

+    BABYLON.Engine.ShadersRepository = "/src/Shaders/";

+

+    if (!currentHelpCounter) currentHelpCounter = 0;

+

+    // Resize

+    window.addEventListener("resize", function () {

+        engine.resize();

+    });

+

+    var sceneLoaded = function (sceneFile, babylonScene) {

+        function displayDebugLayerAndLogs() {

+            currentScene.debugLayer._displayLogs = true;

+            enableDebugLayer = true;

+            currentScene.debugLayer.show();

+        };

+        function hideDebugLayerAndLogs() {

+            currentScene.debugLayer._displayLogs = false;

+            enableDebugLayer = false;

+            currentScene.debugLayer.hide();

+        };

+        if (enableDebugLayer) {

+            hideDebugLayerAndLogs();

+        }

+        currentScene = babylonScene;

+        document.title = "BabylonJS - " + sceneFile.name;

+        // Fix for IE, otherwise it will change the default filter for files selection after first use

+        htmlInput.value = "";

+        // In case of error during loading, meshes will be empty and clearColor is set to red

+        if (currentScene.meshes.length === 0 && currentScene.clearColor.r === 1 && currentScene.clearColor.g === 0 && currentScene.clearColor.b === 0) {

+            document.getElementById("logo").className = "";

+            canvas.style.opacity = 0;

+            displayDebugLayerAndLogs();

+        }

+        else {

+            if (BABYLON.Tools.errorsCount > 0) {

+                displayDebugLayerAndLogs();

+            }

+            document.getElementById("logo").className = "hidden";

+            canvas.style.opacity = 1;

+            if (currentScene.activeCamera.keysUp) {

+                currentScene.activeCamera.keysUp.push(90); // Z

+                currentScene.activeCamera.keysUp.push(87); // W

+                currentScene.activeCamera.keysDown.push(83); // S

+                currentScene.activeCamera.keysLeft.push(65); // A

+                currentScene.activeCamera.keysLeft.push(81); // Q

+                currentScene.activeCamera.keysRight.push(69); // E

+                currentScene.activeCamera.keysRight.push(68); // D

+            }

+        }

+    };

+

+    filesInput = new BABYLON.FilesInput(engine, null, canvas, sceneLoaded);

+    filesInput.monitorElementForDragNDrop(canvas);

+

+    window.addEventListener("keydown", function (evt) {

+        // Press R to reload

+        if (evt.keyCode === 82) {

+            filesInput.reload();

+        }

+    });

+    htmlInput.addEventListener('change', function (event) {

+        filesInput.loadFiles(event);

+    }, false);

+    btnFullScreen.addEventListener('click', function () {

+        engine.switchFullscreen(true);

+    }, false);

+    btnPerf.addEventListener('click', function () {

+        if (currentScene) {

+            if (!enableDebugLayer) {

+                currentScene.debugLayer.show();

+                enableDebugLayer = true;

+

+            } else {

+                currentScene.debugLayer.hide();

+                enableDebugLayer = false;

+            }

+        }

+    }, false);

+

+    // The help tips will be displayed only 5 times

+    if (currentHelpCounter < 5) {

+        help01.className = "help shown";

+

+        setTimeout(function () {

+            help01.className = "help";

+            help02.className = "help2 shown";

+            setTimeout(function () {

+                help02.className = "help2";

+                localStorage.setItem("helpcounter", currentHelpCounter + 1);

+            }, 5000);

+        }, 5000);

+    }

+}