index.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  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. try {
  19. var xmlHttp = new XMLHttpRequest();
  20. xmlHttp.onreadystatechange = function () {
  21. if (xmlHttp.readyState == 4) {
  22. if (xmlHttp.status == 200) {
  23. var snippet = JSON.parse(JSON.parse(xmlHttp.responseText).jsonPayload);
  24. let serializationObject = JSON.parse(snippet.nodeMaterial);
  25. if (editorDisplayed) {
  26. customLoadObservable.notifyObservers(serializationObject);
  27. } else {
  28. nodeMaterial.loadFromSerialization(serializationObject);
  29. try {
  30. nodeMaterial.build(true);
  31. } catch (err) {
  32. // Swallow the error here
  33. }
  34. showEditor();
  35. }
  36. }
  37. }
  38. }
  39. var hash = location.hash.substr(1);
  40. currentSnippetToken = hash.split("#")[0];
  41. xmlHttp.open("GET", snippetUrl + "/" + hash.replace("#", "/"));
  42. xmlHttp.send();
  43. } catch (e) {
  44. }
  45. }
  46. }
  47. setTimeout(checkHash, 200);
  48. }
  49. var showEditor = function() {
  50. editorDisplayed = true;
  51. var hostElement = document.getElementById("host-element");
  52. BABYLON.GuiEditor.Show({
  53. hostElement: hostElement,
  54. customLoadObservable: customLoadObservable,
  55. customSave: {
  56. label: "Save as unique URL",
  57. action: (data) => {
  58. return new Promise((resolve, reject) => {
  59. var xmlHttp = new XMLHttpRequest();
  60. xmlHttp.onreadystatechange = function () {
  61. if (xmlHttp.readyState == 4) {
  62. if (xmlHttp.status == 200) {
  63. var baseUrl = location.href.replace(location.hash, "").replace(location.search, "");
  64. var snippet = JSON.parse(xmlHttp.responseText);
  65. var newUrl = baseUrl + "#" + snippet.id;
  66. currentSnippetToken = snippet.id;
  67. if (snippet.version && snippet.version != "0") {
  68. newUrl += "#" + snippet.version;
  69. }
  70. location.href = newUrl;
  71. resolve();
  72. }
  73. else {
  74. reject(`Unable to save your gui layout. It may be too large (${(dataToSend.payload.length / 1024).toFixed(2)}`);
  75. }
  76. }
  77. }
  78. xmlHttp.open("POST", snippetUrl + (currentSnippetToken ? "/" + currentSnippetToken : ""), true);
  79. xmlHttp.setRequestHeader("Content-Type", "application/json");
  80. var dataToSend = {
  81. payload : JSON.stringify({
  82. guiLayout: data
  83. }),
  84. name: "",
  85. description: "",
  86. tags: ""
  87. };
  88. xmlHttp.send(JSON.stringify(dataToSend));
  89. });
  90. }
  91. }
  92. });
  93. }
  94. // Let's start
  95. if (BABYLON.Engine.isSupported()) {
  96. var canvas = document.createElement("canvas");
  97. var engine = new BABYLON.Engine(canvas, false);
  98. var scene = new BABYLON.Scene(engine);
  99. // Set to default
  100. if (!location.hash) {
  101. showEditor();
  102. }
  103. }
  104. else {
  105. alert('Babylon.js is not supported.')
  106. }
  107. checkHash();