index.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. if (BABYLON.Engine.isSupported()) {
  2. var canvas = document.getElementById("renderCanvas");
  3. var engine = new BABYLON.Engine(canvas, true);
  4. var divFps = document.getElementById("fps");
  5. var htmlInput = document.getElementById("files");
  6. var btnFullScreen = document.getElementById("btnFullscreen");
  7. var btnDownArrow = document.getElementById("btnDownArrow");
  8. var perffooter = document.getElementById("perf");
  9. var btnPerf = document.getElementById("btnPerf");
  10. var miscCounters = document.getElementById("miscCounters");
  11. var help01 = document.getElementById("help01");
  12. var help02 = document.getElementById("help02");
  13. var loadingText = document.getElementById("loadingText");
  14. var filesInput;
  15. var currentHelpCounter;
  16. var currentScene;
  17. var enableDebugLayer = false;
  18. currentHelpCounter = localStorage.getItem("helpcounter");
  19. BABYLON.Engine.ShadersRepository = "/src/Shaders/";
  20. if (!currentHelpCounter) currentHelpCounter = 0;
  21. // Setting up some GLTF values
  22. BABYLON.SceneLoader.OnPluginActivatedObservable.add(function(plugin) {
  23. if (plugin.name !== "gltf") {
  24. return;
  25. }
  26. plugin.onBeforeMaterialReadyAsync = function(material, mesh, isLOD, callback) {
  27. if (!isLOD) {
  28. callback();
  29. return;
  30. }
  31. material.forceCompilation(mesh, callback);
  32. }
  33. });
  34. // Resize
  35. window.addEventListener("resize", function () {
  36. engine.resize();
  37. });
  38. var sceneLoaded = function (sceneFile, babylonScene) {
  39. function displayDebugLayerAndLogs() {
  40. currentScene.debugLayer._displayLogs = true;
  41. enableDebugLayer = true;
  42. currentScene.debugLayer.show();
  43. };
  44. function hideDebugLayerAndLogs() {
  45. currentScene.debugLayer._displayLogs = false;
  46. enableDebugLayer = false;
  47. currentScene.debugLayer.hide();
  48. };
  49. if (enableDebugLayer) {
  50. hideDebugLayerAndLogs();
  51. }
  52. currentScene = babylonScene;
  53. document.title = "BabylonJS - " + sceneFile.name;
  54. // Fix for IE, otherwise it will change the default filter for files selection after first use
  55. htmlInput.value = "";
  56. // Attach camera to canvas inputs
  57. if (!currentScene.activeCamera || currentScene.lights.length === 0) {
  58. currentScene.createDefaultCameraOrLight(true);
  59. }
  60. currentScene.activeCamera.attachControl(canvas);
  61. // Enable camera's behaviors
  62. currentScene.activeCamera.useBouncingBehavior = true;
  63. currentScene.activeCamera.useAutoRotationBehavior = true;
  64. currentScene.activeCamera.useFramingBehavior = true;
  65. var framingBehavior = currentScene.activeCamera.getBehaviorByName("Framing");
  66. framingBehavior.framingTime = 0;
  67. var bouncingBehavior = currentScene.activeCamera.getBehaviorByName("Bouncing");
  68. bouncingBehavior.autoTransitionRange = true;
  69. if (currentScene.meshes.length) {
  70. // Let's zoom on the first object with geometry
  71. for (var index = 0; index < currentScene.meshes.length; index++) {
  72. var mesh = currentScene.meshes[index];
  73. if (mesh.getTotalVertices()) {
  74. currentScene.activeCamera.setTarget(mesh);
  75. break;
  76. }
  77. }
  78. }
  79. // Environment
  80. if (currentScene.loadingPluginName === "gltf") {
  81. var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("Assets/environment.dds", currentScene);
  82. hdrTexture.gammaSpace = false;
  83. currentScene.createDefaultSkybox(hdrTexture, true, (currentScene.activeCamera.maxZ - currentScene.activeCamera.minZ) / 2, 0.3);
  84. }
  85. // In case of error during loading, meshes will be empty and clearColor is set to red
  86. if (currentScene.meshes.length === 0 && currentScene.clearColor.r === 1 && currentScene.clearColor.g === 0 && currentScene.clearColor.b === 0) {
  87. document.getElementById("logo").className = "";
  88. canvas.style.opacity = 0;
  89. displayDebugLayerAndLogs();
  90. }
  91. else {
  92. if (BABYLON.Tools.errorsCount > 0) {
  93. displayDebugLayerAndLogs();
  94. }
  95. document.getElementById("logo").className = "hidden";
  96. canvas.style.opacity = 1;
  97. if (currentScene.activeCamera.keysUp) {
  98. currentScene.activeCamera.keysUp.push(90); // Z
  99. currentScene.activeCamera.keysUp.push(87); // W
  100. currentScene.activeCamera.keysDown.push(83); // S
  101. currentScene.activeCamera.keysLeft.push(65); // A
  102. currentScene.activeCamera.keysLeft.push(81); // Q
  103. currentScene.activeCamera.keysRight.push(69); // E
  104. currentScene.activeCamera.keysRight.push(68); // D
  105. }
  106. }
  107. };
  108. filesInput = new BABYLON.FilesInput(engine, null, canvas, sceneLoaded);
  109. filesInput.monitorElementForDragNDrop(canvas);
  110. window.addEventListener("keydown", function (evt) {
  111. // Press R to reload
  112. if (evt.keyCode === 82) {
  113. filesInput.reload();
  114. }
  115. });
  116. htmlInput.addEventListener('change', function (event) {
  117. var filestoLoad;
  118. // Handling data transfer via drag'n'drop
  119. if (event && event.dataTransfer && event.dataTransfer.files) {
  120. filesToLoad = event.dataTransfer.files;
  121. }
  122. // Handling files from input files
  123. if (event && event.target && event.target.files) {
  124. filesToLoad = event.target.files;
  125. }
  126. filesInput.loadFiles(event);
  127. }, false);
  128. btnFullScreen.addEventListener('click', function () {
  129. engine.switchFullscreen(true);
  130. }, false);
  131. btnPerf.addEventListener('click', function () {
  132. if (currentScene) {
  133. if (!enableDebugLayer) {
  134. currentScene.debugLayer.show();
  135. enableDebugLayer = true;
  136. } else {
  137. currentScene.debugLayer.hide();
  138. enableDebugLayer = false;
  139. }
  140. }
  141. }, false);
  142. // The help tips will be displayed only 5 times
  143. if (currentHelpCounter < 5) {
  144. help01.className = "help shown";
  145. setTimeout(function () {
  146. help01.className = "help";
  147. help02.className = "help2 shown";
  148. setTimeout(function () {
  149. help02.className = "help2";
  150. localStorage.setItem("helpcounter", currentHelpCounter + 1);
  151. }, 5000);
  152. }, 5000);
  153. }
  154. }