zhangyupeng
/
Babylon.js


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!DOCTYPE html>
<html>
<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>
    <script src="splitbox.js"></script>
    <link href="splitbox.css" rel="stylesheet" />
    <!-- jszip -->
    <script src="jszip.min.js"></script>
    <script src="fileSaver.js"></script>
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
    <!-- Babylon.js -->
    <script src="https://babylonjs.azurewebsites.net/cannon.js"></script>
    <script src="https://babylonjs.azurewebsites.net/Oimo.js"></script>
    <!--<script src="../babylon.js"></script>-->
    <script src="https://babylonjs.azurewebsites.net/babylon.js"></script>
    <script src="https://babylonjs.azurewebsites.net/babylon.canvas2d.js"></script>
    <script src="https://babylonjs.azurewebsites.net/babylon.inspector.bundle.js"></script>
    
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.fireMaterial.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.waterMaterial.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.lavaMaterial.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.normalMaterial.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.skyMaterial.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.triPlanarMaterial.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.terrainMaterial.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.gradientMaterial.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.furMaterial.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.gridMaterial.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.shadowOnlyMaterial.min.js"></script>

    <script src="https://babylonjs.azurewebsites.net/lib/babylon.brickProceduralTexture.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.cloudProceduralTexture.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.fireProceduralTexture.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.grassProceduralTexture.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.marbleProceduralTexture.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.roadProceduralTexture.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.starfieldProceduralTexture.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.woodProceduralTexture.min.js"></script>

    <script src="https://babylonjs.azurewebsites.net/lib/babylon.asciiArtPostProcess.min.js"></script>
    <script src="https://babylonjs.azurewebsites.net/lib/babylon.digitalRainPostProcess.min.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>
    
    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
    <link href="index.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner" id="topbar">
            <a class="brand largeOnly" href="#" id="mainTitle">Babylon.js Playground</a>
            <div class="btn-group">
                <button class="btn" id="runButton">Run</button>
                <button class="btn" id="saveButton">Save</button>
                <button class="btn desktopOnly" id="zipButton">Get .zip</button>
                <button class="btn desktopOnly" id="newButton">New</button>
                <button class="btn desktopOnly" id="clearButton">Clear</button>
            </div>
            <div class="btn-group desktopOnly">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    <span id="currentFontSize">Font: 12</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" id="sizeList">
                    <li><a href="#" onclick="setFontSize(12);">12</a></li>
                    <li><a href="#" onclick="setFontSize(14);">14</a></li>
                    <li><a href="#" onclick="setFontSize(16);">16</a></li>
                    <li><a href="#" onclick="setFontSize(18);">18</a></li>
                    <li><a href="#" onclick="setFontSize(20);">20</a></li>
                    <li><a href="#" onclick="setFontSize(22);">22</a></li>
                </ul>
            </div>
            <div class="btn-group desktopOnly">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    <span id="currentVersion">Version: Latest</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" id="versionList">
                    <li><a href="#" onclick="setVersion('latest');">Latest</a></li>
                    <li><a href="#" onclick="setVersion('2.5');">2.5</a></li>
                </ul>
            </div>            
            <div class="btn-group">
                <label class="btn btn-sm active">
                    <input type="checkbox" autocomplete="off" id='safemodeToggle' style="margin-top:-0.1em;margin-right:4px">Safe Mode
                </label>
                <button class="btn btn-sm" id="editorButton">-Editor</button>
                <button class="btn btn-sm" id="debugButton">+Debug layer</button>
            </div>
            <div class="btn-group pull-right">
                <button class="btn" id="fullscreenButton">Fullscreen</button>
            </div>
            <div class="btn-group pull-right">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    <span id="currentScript">Predefined scripts</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" id="scriptsList"></ul>
            </div>
        </div>
        <div class="save-message" id="saveMessage">
            This PG has no metadata. Click save to add them.
        </div>
    </div>

    <x-splitbox>
        <div id="jsEditor"></div>
        <div splitter></div>
        <div id="canvasZone">
            <canvas touch-action="none" id="renderCanvas"></canvas>
        </div>
    </x-splitbox>

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

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

    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="navbar-inner">
            <ul class="nav pull-left">
                <li id="statusBar"></li>
            </ul>
            <ul class="nav pull-right">
                <li><a href="http://www.html5gamedevs.com/forum/16-babylonjs/">Forum</a></li>
                <li><a href="https://babylonjs.azurewebsites.net/sandbox">Sandbox</a></li>
                <li><a href="https://github.com/BabylonJS/Babylon.js/wiki">Wiki</a></li>
                <li><a href="https://doc.babylonjs.com">Documentation</a></li>
            </ul>
        </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">
                <button class="btn save-form-button" id="saveFormButtonOk">OK</button>
                <button class="btn save-form-button" id="saveFormButtonCancel">Cancel</button>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="index.js"></script>
</body>
</html>