zhangyupeng
/
Babylon.js


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
							<!DOCTYPE html>
<html>

<head>
    <title>Babylon.js Playground</title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
    <!--For canvas/code separator-->
    <script src="js/libs/split.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
    <!-- jszip -->
    <script src="js/libs/jszip.min.js"></script>
    <script src="js/libs/fileSaver.js"></script>
    <!--Monaco-->
    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
    <!-- Babylon.js -->
    <script src="https://preview.babylonjs.com/cannon.js"></script>
    <script src="https://preview.babylonjs.com/Oimo.js"></script>
    <script src="https://preview.babylonjs.com/babylon.max.js"></script>    
    <script src="https://preview.babylonjs.com/canvas2D/babylon.canvas2d.js"></script>
    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.normalMaterial.min.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.triPlanarMaterial.min.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gradientMaterial.min.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.furMaterial.min.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>

    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js"></script>

    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.min.js"></script>
    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js"></script>

    <script src="https://preview.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylon.stlFileLoader.js"></script>

    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>

    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>
    <link href="css/index.css" rel="stylesheet" />

</head>

<body>
     <div class="navbar">
        <div class="title">
            Babylon.js Playground
        </div>
        <div class="version" id="mainTitle">
            v3.0-alpha
        </div>

        <div class="category">
            <div class="button run" id="runButton">Run <i class="fa fa-play" aria-hidden="true"></i></div>
        </div>


        <div class="category">
            <div class="button" id="newButton">New<i class="fa fa-file" aria-hidden="true"></i></div>
            <div class="button removeOnPhone" id="clearButton">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
        </div>

        <div class="category">
            <div class="button" id="saveButton">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
            <div class="button removeOnPhone" id="zipButton">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
        </div>


        <!--<div class="category desktopOnly">-->

        <!--<div class="button select"><span id="currentFontSize">Font: 14</span>
                <div class="toDisplay">
                    <div class="option" onclick="setFontSize(12);">12</div>
                    <div class="option" onclick="setFontSize(14);">14</div>
                    <div class="option" onclick="setFontSize(16);">16</div>
                    <div class="option" onclick="setFontSize(18);">18</div>
                    <div class="option" onclick="setFontSize(20);">20</div>
                    <div class="option" onclick="setFontSize(22);">22</div>
                </div>
            </div>-->

        <!--<div class="button select">Theme
                <div class="toDisplay">
                    <div class="option" id="darkTheme">Dark</div>
                    <div class="option" id="lightTheme">Light</div>
                </div>
            </div>-->
        <!--</div>-->
        <div class="category desktopTabletOnly">
            <div class="button select">Settings
                <div class="toDisplay">
                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
                        <div class="toDisplaySub">
                            <div class="option" id="darkTheme">Dark</div>
                            <div class="option" id="lightTheme">Light</div>
                        </div>
                    </div>
                    <div class="option subSelect"><span id="currentFontSize">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
                        <div class="toDisplaySub">
                            <div class="option" onclick="setFontSize(12);">12</div>
                            <div class="option" onclick="setFontSize(14);">14</div>
                            <div class="option" onclick="setFontSize(16);">16</div>
                            <div class="option" onclick="setFontSize(18);">18</div>
                            <div class="option" onclick="setFontSize(20);">20</div>
                            <div class="option" onclick="setFontSize(22);">22</div>
                        </div>
                    </div>
                    <div class="option" id='safemodeToggle'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                    <div class="option checked" id="editorButton">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                    </div>
                    <div class="option" id="fullscreenButton">Fullscreen</div>
                    <div class="option" id="formatButton">Format code</div>
                </div>
            </div>

            <div class="button check uncheck" id="debugButton">Debug layer</div>
            <div class="button" id="metadataButton">Metadata</div>
        </div>


        <div class="category right">
            <div class="button select desktopTabletOnly"><span id="currentVersion">Version: Latest</span>
                <div class="toDisplay">
                    <div class="option" onclick="setVersion('latest');">Latest</div>
                    <div class="option" onclick="setVersion('2.5');">2.5</div>
                </div>
            </div>
            <div class="button select"> <span id="currentScript">Scenes</span>
                <div class="toDisplayBig">
                    <ul id="scriptsList">
                    </ul>
                </div>
            </div>
        </div>
        <div class="save-message" id="saveMessage">
            This PG has no metadata. Click save to add them.
        </div>
    </div>

    <div class="wrapper">
        <div id="jsEditor"></div>
        <div id="canvasZone">
            <canvas touch-action="none" id="renderCanvas"></canvas>
        </div>
    </div>

    <span class="label" id="fpsLabel">FPS</span>

    <div id="errorZone">
    </div>

    <div class="navbarBottom">
        <div id="statusBar"></div>
        <div class="links">
            <div class='link'><a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a></div>
            <div class='link'> <a target='_new' href="http://www.html5gamedevs.com/forum/16-babylonjs/">Forum</a></div>
            <div class='link'><a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a></div>
            <div class='link'><a target='_new' href="https://doc.babylonjs.com">Documentation</a></div>
            <div class='link'><a target='_new' href="https://doc.babylonjs.com/playground">Search</a></div>
        </div>
    </div>

    <div id="saveLayer" class="save-layer">
        <div class="save-form">
            <label for="saveFormTitle">TITLE</label>
            <div class="separator"></div>
            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">

            <label for="saveFormDescription">DESCRIPTION</label>
            <div class="separator"></div>
            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>

            <label for="saveFormTags">TAGS (separated by comma)</label>
            <div class="separator"></div>
            <textarea id="saveFormTags" rows="4" cols="10"></textarea>

            <div class="save-form-buttons" id="saveFormButtons">

                <div id="saveFormButtonOk" class="button">OK</div>
                <div id="saveFormButtonCancel" class="button">Cancel</div>
            </div>
        </div>
    </div>

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

    <script src="js/actions.js"></script>
    <script src="js/index.js"></script>
</body>

</html>