index.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. var snippetUrl = "https://snippet.babylonjs.com";
  2. var currentSnippetToken;
  3. var previousHash = "";
  4. var customLoadObservable = new BABYLON.Observable();
  5. var editorDisplayed = false;
  6. var cleanHash = function () {
  7. var splits = decodeURIComponent(location.hash.substr(1)).split("#");
  8. if (splits.length > 2) {
  9. splits.splice(2, splits.length - 2);
  10. }
  11. location.hash = splits.join("#");
  12. }
  13. var checkHash = function () {
  14. if (location.hash) {
  15. if (previousHash != location.hash) {
  16. cleanHash();
  17. previousHash = location.hash;
  18. var hash = location.hash.substr(1);
  19. currentSnippetToken = hash.split("#")[0];
  20. showEditor();
  21. }
  22. }
  23. setTimeout(checkHash, 200);
  24. }
  25. var showEditor = function() {
  26. editorDisplayed = true;
  27. var hostElement = document.getElementById("host-element");
  28. BABYLON.GuiEditor.Show({
  29. hostElement: hostElement,
  30. customLoadObservable: customLoadObservable,
  31. currentSnippetToken: currentSnippetToken,
  32. customSave: {
  33. label: "Save as unique URL",
  34. action: (data) => {
  35. return new Promise((resolve, reject) => {
  36. var xmlHttp = new XMLHttpRequest();
  37. xmlHttp.onreadystatechange = function () {
  38. if (xmlHttp.readyState == 4) {
  39. if (xmlHttp.status == 200) {
  40. var baseUrl = location.href.replace(location.hash, "").replace(location.search, "");
  41. var snippet = JSON.parse(xmlHttp.responseText);
  42. var newUrl = baseUrl + "#" + snippet.id;
  43. currentSnippetToken = snippet.id;
  44. if (snippet.version && snippet.version != "0") {
  45. newUrl += "#" + snippet.version;
  46. }
  47. location.href = newUrl;
  48. resolve();
  49. }
  50. else {
  51. reject(`Unable to save your gui layout. It may be too large (${(dataToSend.payload.length / 1024).toFixed(2)}`);
  52. }
  53. }
  54. }
  55. xmlHttp.open("POST", snippetUrl + (currentSnippetToken ? "/" + currentSnippetToken : ""), true);
  56. xmlHttp.setRequestHeader("Content-Type", "application/json");
  57. var dataToSend = {
  58. payload : JSON.stringify({
  59. guiLayout: data
  60. }),
  61. name: "",
  62. description: "",
  63. tags: ""
  64. };
  65. xmlHttp.send(JSON.stringify(dataToSend));
  66. });
  67. }
  68. }
  69. });
  70. }
  71. // Let's start
  72. if (BABYLON.Engine.isSupported()) {
  73. var canvas = document.createElement("canvas");
  74. var engine = new BABYLON.Engine(canvas, false);
  75. var scene = new BABYLON.Scene(engine);
  76. // Set to default
  77. if (!location.hash) {
  78. showEditor();
  79. }
  80. }
  81. else {
  82. alert('Babylon.js is not supported.')
  83. }
  84. checkHash();