index.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  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. if (currentScene.meshes.length) {
  66. // Let's zoom on the first object with geometry
  67. for (var index = 0; index < currentScene.meshes.length; index++) {
  68. var mesh = currentScene.meshes[index];
  69. if (mesh.getTotalVertices()) {
  70. currentScene.activeCamera.setTarget(mesh);
  71. break;
  72. }
  73. }
  74. }
  75. // Environment
  76. if (currentScene.loadingPluginName === "gltf") {
  77. var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("Assets/environment.dds", currentScene);
  78. hdrTexture.gammaSpace = false;
  79. currentScene.createDefaultSkybox(hdrTexture, true, (currentScene.activeCamera.maxZ - currentScene.activeCamera.minZ) / 2, 0.3);
  80. }
  81. // In case of error during loading, meshes will be empty and clearColor is set to red
  82. if (currentScene.meshes.length === 0 && currentScene.clearColor.r === 1 && currentScene.clearColor.g === 0 && currentScene.clearColor.b === 0) {
  83. document.getElementById("logo").className = "";
  84. canvas.style.opacity = 0;
  85. displayDebugLayerAndLogs();
  86. }
  87. else {
  88. if (BABYLON.Tools.errorsCount > 0) {
  89. displayDebugLayerAndLogs();
  90. }
  91. document.getElementById("logo").className = "hidden";
  92. canvas.style.opacity = 1;
  93. if (currentScene.activeCamera.keysUp) {
  94. currentScene.activeCamera.keysUp.push(90); // Z
  95. currentScene.activeCamera.keysUp.push(87); // W
  96. currentScene.activeCamera.keysDown.push(83); // S
  97. currentScene.activeCamera.keysLeft.push(65); // A
  98. currentScene.activeCamera.keysLeft.push(81); // Q
  99. currentScene.activeCamera.keysRight.push(69); // E
  100. currentScene.activeCamera.keysRight.push(68); // D
  101. }
  102. }
  103. };
  104. filesInput = new BABYLON.FilesInput(engine, null, canvas, sceneLoaded);
  105. filesInput.monitorElementForDragNDrop(canvas);
  106. window.addEventListener("keydown", function (evt) {
  107. // Press R to reload
  108. if (evt.keyCode === 82) {
  109. filesInput.reload();
  110. }
  111. });
  112. htmlInput.addEventListener('change', function (event) {
  113. var filestoLoad;
  114. // Handling data transfer via drag'n'drop
  115. if (event && event.dataTransfer && event.dataTransfer.files) {
  116. filesToLoad = event.dataTransfer.files;
  117. }
  118. // Handling files from input files
  119. if (event && event.target && event.target.files) {
  120. filesToLoad = event.target.files;
  121. }
  122. filesInput.loadFiles(event);
  123. }, false);
  124. btnFullScreen.addEventListener('click', function () {
  125. engine.switchFullscreen(true);
  126. }, false);
  127. btnPerf.addEventListener('click', function () {
  128. if (currentScene) {
  129. if (!enableDebugLayer) {
  130. currentScene.debugLayer.show();
  131. enableDebugLayer = true;
  132. } else {
  133. currentScene.debugLayer.hide();
  134. enableDebugLayer = false;
  135. }
  136. }
  137. }, false);
  138. // The help tips will be displayed only 5 times
  139. if (currentHelpCounter < 5) {
  140. help01.className = "help shown";
  141. setTimeout(function () {
  142. help01.className = "help";
  143. help02.className = "help2 shown";
  144. setTimeout(function () {
  145. help02.className = "help2";
  146. localStorage.setItem("helpcounter", currentHelpCounter + 1);
  147. }, 5000);
  148. }, 5000);
  149. }
  150. }