index.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. /// <reference path="../dist/preview release/babylon.d.ts" />
  2. /// <reference path="../dist/preview release/loaders/babylon.glTFFileLoader.d.ts" />
  3. if (BABYLON.Engine.isSupported()) {
  4. var canvas = document.getElementById("renderCanvas");
  5. var engine = new BABYLON.Engine(canvas, true);
  6. var divFps = document.getElementById("fps");
  7. var htmlInput = document.getElementById("files");
  8. var btnFullScreen = document.getElementById("btnFullscreen");
  9. var btnDownArrow = document.getElementById("btnDownArrow");
  10. var perffooter = document.getElementById("perf");
  11. var btnPerf = document.getElementById("btnPerf");
  12. var miscCounters = document.getElementById("miscCounters");
  13. var help01 = document.getElementById("help01");
  14. var help02 = document.getElementById("help02");
  15. var loadingText = document.getElementById("loadingText");
  16. var filesInput;
  17. var currentHelpCounter;
  18. var currentScene;
  19. var currentSkybox;
  20. var enableDebugLayer = false;
  21. var currentPluginName;
  22. var toExecuteAfterSceneCreation;
  23. canvas.addEventListener("contextmenu", function (evt) {
  24. evt.preventDefault();
  25. }, false);
  26. currentHelpCounter = localStorage.getItem("helpcounter");
  27. BABYLON.Engine.ShadersRepository = "/src/Shaders/";
  28. if (!currentHelpCounter) currentHelpCounter = 0;
  29. // Setting up some GLTF values
  30. BABYLON.GLTFFileLoader.IncrementalLoading = false;
  31. BABYLON.SceneLoader.OnPluginActivatedObservable.add(function (plugin) {
  32. currentPluginName = plugin.name;
  33. if (plugin.name === "gltf" && plugin instanceof BABYLON.GLTFFileLoader) {
  34. plugin.animationStartMode = BABYLON.GLTFLoaderAnimationStartMode.ALL;
  35. // plugin.compileMaterials = true;
  36. }
  37. });
  38. // Resize
  39. window.addEventListener("resize", function () {
  40. engine.resize();
  41. });
  42. var sceneLoaded = function (sceneFile, babylonScene) {
  43. function displayDebugLayerAndLogs() {
  44. currentScene.debugLayer._displayLogs = true;
  45. enableDebugLayer = true;
  46. currentScene.debugLayer.show();
  47. };
  48. function hideDebugLayerAndLogs() {
  49. currentScene.debugLayer._displayLogs = false;
  50. enableDebugLayer = false;
  51. currentScene.debugLayer.hide();
  52. };
  53. if (enableDebugLayer) {
  54. hideDebugLayerAndLogs();
  55. }
  56. // Clear the error
  57. document.getElementById("errorZone").style.display = 'none';
  58. currentScene = babylonScene;
  59. document.title = "BabylonJS - " + sceneFile.name;
  60. // Fix for IE, otherwise it will change the default filter for files selection after first use
  61. htmlInput.value = "";
  62. // removing glTF created camera
  63. if (currentScene.activeCamera && currentPluginName === "gltf") {
  64. currentScene.activeCamera.dispose();
  65. currentScene.activeCamera = null;
  66. }
  67. // Attach camera to canvas inputs
  68. if (!currentScene.activeCamera || currentScene.lights.length === 0) {
  69. currentScene.createDefaultCameraOrLight(true);
  70. // Enable camera's behaviors
  71. currentScene.activeCamera.useFramingBehavior = true;
  72. var framingBehavior = currentScene.activeCamera.getBehaviorByName("Framing");
  73. framingBehavior.framingTime = 0;
  74. framingBehavior.elevationReturnTime = -1;
  75. if (currentScene.meshes.length) {
  76. var worldExtends = currentScene.getWorldExtends();
  77. currentScene.activeCamera.lowerRadiusLimit = null;
  78. framingBehavior.zoomOnBoundingInfo(worldExtends.min, worldExtends.max);
  79. }
  80. currentScene.activeCamera.pinchPrecision = 200 / currentScene.activeCamera.radius;
  81. currentScene.activeCamera.upperRadiusLimit = 5 * currentScene.activeCamera.radius;
  82. currentScene.activeCamera.wheelDeltaPercentage = 0.01;
  83. currentScene.activeCamera.pinchDeltaPercentage = 0.01;
  84. }
  85. currentScene.activeCamera.attachControl(canvas);
  86. // Environment
  87. if (currentPluginName === "gltf") {
  88. var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("Assets/environment.dds", currentScene);
  89. currentSkybox = currentScene.createDefaultSkybox(hdrTexture, true, (currentScene.activeCamera.maxZ - currentScene.activeCamera.minZ) / 2, 0.3);
  90. // glTF assets use a +Z forward convention while the default camera faces +Z. Rotate the camera to look at the front of the asset.
  91. currentScene.activeCamera.alpha += Math.PI;
  92. }
  93. // In case of error during loading, meshes will be empty and clearColor is set to red
  94. if (currentScene.meshes.length === 0 && currentScene.clearColor.r === 1 && currentScene.clearColor.g === 0 && currentScene.clearColor.b === 0) {
  95. document.getElementById("logo").className = "";
  96. canvas.style.opacity = 0;
  97. displayDebugLayerAndLogs();
  98. }
  99. else {
  100. if (BABYLON.Tools.errorsCount > 0) {
  101. displayDebugLayerAndLogs();
  102. }
  103. document.getElementById("logo").className = "hidden";
  104. canvas.style.opacity = 1;
  105. if (currentScene.activeCamera.keysUp) {
  106. currentScene.activeCamera.keysUp.push(90); // Z
  107. currentScene.activeCamera.keysUp.push(87); // W
  108. currentScene.activeCamera.keysDown.push(83); // S
  109. currentScene.activeCamera.keysLeft.push(65); // A
  110. currentScene.activeCamera.keysLeft.push(81); // Q
  111. currentScene.activeCamera.keysRight.push(69); // E
  112. currentScene.activeCamera.keysRight.push(68); // D
  113. }
  114. }
  115. if (toExecuteAfterSceneCreation) {
  116. toExecuteAfterSceneCreation();
  117. }
  118. };
  119. var sceneError = function (sceneFile, babylonScene, message) {
  120. document.title = "BabylonJS - " + sceneFile.name;
  121. document.getElementById("logo").className = "";
  122. canvas.style.opacity = 0;
  123. var errorContent = '<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>' + message.replace("file:[object File]", "'" + sceneFile.name + "'") + '</div>';
  124. document.getElementById("errorZone").style.display = 'block';
  125. document.getElementById("errorZone").innerHTML = errorContent;
  126. // Close button error
  127. document.getElementById("errorZone").querySelector('.close').addEventListener('click', function () {
  128. document.getElementById("errorZone").style.display = 'none';
  129. });
  130. };
  131. filesInput = new BABYLON.FilesInput(engine, null, sceneLoaded, null, null, null, function () { BABYLON.Tools.ClearLogCache() }, null, sceneError);
  132. filesInput.onProcessFileCallback = (function (file, name, extension) {
  133. if (extension === "dds") {
  134. BABYLON.FilesInput.FilesToLoad[name] = file;
  135. var loadTexture = () => {
  136. if (currentPluginName === "gltf") { // currentPluginName is updated only once scene is loaded
  137. var newHdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("file:" + file.correctName, currentScene);
  138. if (currentSkybox) {
  139. currentSkybox.dispose();
  140. }
  141. currentSkybox = currentScene.createDefaultSkybox(newHdrTexture, true, (currentScene.activeCamera.maxZ - currentScene.activeCamera.minZ) / 2, 0.3);
  142. }
  143. }
  144. if (currentScene) {
  145. loadTexture();
  146. }
  147. else {
  148. // Postpone texture loading until scene is loaded
  149. toExecuteAfterSceneCreation = loadTexture;
  150. }
  151. return false;
  152. }
  153. return true;
  154. }).bind(this);
  155. filesInput.monitorElementForDragNDrop(canvas);
  156. window.addEventListener("keydown", function (evt) {
  157. // Press R to reload
  158. if (evt.keyCode === 82) {
  159. filesInput.reload();
  160. }
  161. });
  162. htmlInput.addEventListener('change', function (event) {
  163. var filestoLoad;
  164. // Handling data transfer via drag'n'drop
  165. if (event && event.dataTransfer && event.dataTransfer.files) {
  166. filesToLoad = event.dataTransfer.files;
  167. }
  168. // Handling files from input files
  169. if (event && event.target && event.target.files) {
  170. filesToLoad = event.target.files;
  171. }
  172. filesInput.loadFiles(event);
  173. }, false);
  174. btnFullScreen.addEventListener('click', function () {
  175. engine.switchFullscreen(true);
  176. }, false);
  177. btnPerf.addEventListener('click', function () {
  178. if (currentScene) {
  179. if (!enableDebugLayer) {
  180. currentScene.debugLayer.show();
  181. enableDebugLayer = true;
  182. } else {
  183. currentScene.debugLayer.hide();
  184. enableDebugLayer = false;
  185. }
  186. }
  187. }, false);
  188. // The help tips will be displayed only 5 times
  189. if (currentHelpCounter < 5) {
  190. help01.className = "help shown";
  191. setTimeout(function () {
  192. help01.className = "help";
  193. help02.className = "help2 shown";
  194. setTimeout(function () {
  195. help02.className = "help2";
  196. localStorage.setItem("helpcounter", currentHelpCounter + 1);
  197. }, 5000);
  198. }, 5000);
  199. }
  200. sizeScene();
  201. window.onresize = function () {
  202. sizeScene();
  203. }
  204. }
  205. function sizeScene() {
  206. let divInspWrapper = document.getElementsByClassName('insp-wrapper')[0];
  207. if (divInspWrapper) {
  208. let divFooter = document.getElementsByClassName('footer')[0];
  209. divInspWrapper.style.height = (document.body.clientHeight - divFooter.clientHeight) + "px";
  210. divInspWrapper.style['max-width'] = document.body.clientWidth + "px";
  211. }
  212. }