index.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Babylon.js Playground</title>
  5. <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
  6. <script src="https://babylonjs.azurewebsites.net/poly2tri.js"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
  8. <!--x-tag-->
  9. <script src="xtag.min.js"></script>
  10. <script src="splitbox.js"></script>
  11. <link href="splitbox.css" rel="stylesheet" />
  12. <!-- jszip -->
  13. <script src="jszip.min.js"></script>
  14. <script src="fileSaver.js"></script>
  15. <!-- Bootstrap -->
  16. <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  17. <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
  18. <!-- Babylon.js -->
  19. <script src="https://babylonjs.azurewebsites.net/cannon.js"></script>
  20. <script src="https://babylonjs.azurewebsites.net/Oimo.js"></script>
  21. <!--<script src="../babylon.js"></script>-->
  22. <script src="https://babylonjs.azurewebsites.net/babylon.js"></script>
  23. <script src="https://babylonjs.azurewebsites.net/babylon.canvas2d.js"></script>
  24. <script src="https://babylonjs.azurewebsites.net/babylon.inspector.bundle.js"></script>
  25. <script src="https://babylonjs.azurewebsites.net/lib/babylon.fireMaterial.min.js"></script>
  26. <script src="https://babylonjs.azurewebsites.net/lib/babylon.waterMaterial.min.js"></script>
  27. <script src="https://babylonjs.azurewebsites.net/lib/babylon.lavaMaterial.min.js"></script>
  28. <script src="https://babylonjs.azurewebsites.net/lib/babylon.normalMaterial.min.js"></script>
  29. <script src="https://babylonjs.azurewebsites.net/lib/babylon.skyMaterial.min.js"></script>
  30. <script src="https://babylonjs.azurewebsites.net/lib/babylon.triPlanarMaterial.min.js"></script>
  31. <script src="https://babylonjs.azurewebsites.net/lib/babylon.terrainMaterial.min.js"></script>
  32. <script src="https://babylonjs.azurewebsites.net/lib/babylon.gradientMaterial.min.js"></script>
  33. <script src="https://babylonjs.azurewebsites.net/lib/babylon.furMaterial.min.js"></script>
  34. <script src="https://babylonjs.azurewebsites.net/lib/babylon.gridMaterial.min.js"></script>
  35. <script src="https://babylonjs.azurewebsites.net/lib/babylon.shadowOnlyMaterial.min.js"></script>
  36. <script src="https://babylonjs.azurewebsites.net/lib/babylon.brickProceduralTexture.min.js"></script>
  37. <script src="https://babylonjs.azurewebsites.net/lib/babylon.cloudProceduralTexture.min.js"></script>
  38. <script src="https://babylonjs.azurewebsites.net/lib/babylon.fireProceduralTexture.min.js"></script>
  39. <script src="https://babylonjs.azurewebsites.net/lib/babylon.grassProceduralTexture.min.js"></script>
  40. <script src="https://babylonjs.azurewebsites.net/lib/babylon.marbleProceduralTexture.min.js"></script>
  41. <script src="https://babylonjs.azurewebsites.net/lib/babylon.roadProceduralTexture.min.js"></script>
  42. <script src="https://babylonjs.azurewebsites.net/lib/babylon.starfieldProceduralTexture.min.js"></script>
  43. <script src="https://babylonjs.azurewebsites.net/lib/babylon.woodProceduralTexture.min.js"></script>
  44. <script src="https://babylonjs.azurewebsites.net/lib/babylon.asciiArtPostProcess.min.js"></script>
  45. <script src="https://babylonjs.azurewebsites.net/lib/babylon.digitalRainPostProcess.min.js"></script>
  46. <script src="https://babylonjs.azurewebsites.net/lib/babylon.glTFFileLoader.js"></script>
  47. <script src="https://babylonjs.azurewebsites.net/lib/babylon.objFileLoader.js"></script>
  48. <script src="https://babylonjs.azurewebsites.net/lib/babylon.stlFileLoader.js"></script>
  49. <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
  50. <link href="index.css" rel="stylesheet" />
  51. </head>
  52. <body>
  53. <div class="navbar navbar-inverse navbar-fixed-top">
  54. <div class="navbar-inner" id="topbar">
  55. <a class="brand largeOnly" href="#" id="mainTitle">Babylon.js Playground</a>
  56. <div class="btn-group">
  57. <button class="btn" id="runButton">Run</button>
  58. <button class="btn" id="saveButton">Save</button>
  59. <button class="btn desktopOnly" id="zipButton">Get .zip</button>
  60. <button class="btn desktopOnly" id="newButton">New</button>
  61. <button class="btn desktopOnly" id="clearButton">Clear</button>
  62. </div>
  63. <div class="btn-group desktopOnly">
  64. <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  65. <span id="currentFontSize">Font: 12</span>
  66. <span class="caret"></span>
  67. </a>
  68. <ul class="dropdown-menu" id="sizeList">
  69. <li><a href="#" onclick="setFontSize(12);">12</a></li>
  70. <li><a href="#" onclick="setFontSize(14);">14</a></li>
  71. <li><a href="#" onclick="setFontSize(16);">16</a></li>
  72. <li><a href="#" onclick="setFontSize(18);">18</a></li>
  73. <li><a href="#" onclick="setFontSize(20);">20</a></li>
  74. <li><a href="#" onclick="setFontSize(22);">22</a></li>
  75. </ul>
  76. </div>
  77. <div class="btn-group desktopOnly">
  78. <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  79. <span id="currentVersion">Version: Latest</span>
  80. <span class="caret"></span>
  81. </a>
  82. <ul class="dropdown-menu" id="versionList">
  83. <li><a href="#" onclick="setVersion('latest');">Latest</a></li>
  84. <li><a href="#" onclick="setVersion('2.5');">2.5</a></li>
  85. </ul>
  86. </div>
  87. <div class="btn-group">
  88. <label class="btn btn-sm active">
  89. <input type="checkbox" autocomplete="off" id='safemodeToggle' style="margin-top:-0.1em;margin-right:4px">Safe Mode
  90. </label>
  91. <button class="btn btn-sm" id="editorButton">-Editor</button>
  92. <button class="btn btn-sm" id="debugButton">+Debug layer</button>
  93. </div>
  94. <div class="btn-group pull-right">
  95. <button class="btn" id="fullscreenButton">Fullscreen</button>
  96. </div>
  97. <div class="btn-group pull-right">
  98. <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  99. <span id="currentScript">Predefined scripts</span>
  100. <span class="caret"></span>
  101. </a>
  102. <ul class="dropdown-menu" id="scriptsList"></ul>
  103. </div>
  104. </div>
  105. </div>
  106. <x-splitbox>
  107. <div id="jsEditor"></div>
  108. <div splitter></div>
  109. <div id="canvasZone">
  110. <canvas touch-action="none" id="renderCanvas"></canvas>
  111. </div>
  112. </x-splitbox>
  113. <span class="label" id="fpsLabel">FPS</span>
  114. <div id="errorZone">
  115. </div>
  116. <div class="navbar navbar-inverse navbar-fixed-bottom">
  117. <div class="navbar-inner">
  118. <ul class="nav pull-left">
  119. <li id="statusBar"></li>
  120. </ul>
  121. <ul class="nav pull-right">
  122. <li><a href="http://www.html5gamedevs.com/forum/16-babylonjs/">Forum</a></li>
  123. <li><a href="https://babylonjs.azurewebsites.net/sandbox">Sandbox</a></li>
  124. <li><a href="https://github.com/BabylonJS/Babylon.js/wiki">Wiki</a></li>
  125. <li><a href="https://doc.babylonjs.com">Documentation</a></li>
  126. </ul>
  127. </div>
  128. </div>
  129. <script src="https://code.jquery.com/jquery.js"></script>
  130. <script src="bootstrap/js/bootstrap.min.js"></script>
  131. <script src="index.js"></script>
  132. </body>
  133. </html>