index.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Simple API Request</title>
  7. <script>
  8. function makeApiRequest() {
  9. const apiUrl = 'https://canvas-api-test.anvil.app/_/api/creation-module/3d-image/00bb64d51647486392fabc361ec69b7d';
  10. fetch(apiUrl)
  11. .then(response => response.json())
  12. .then(data => {
  13. document.getElementById('responseBox').value = JSON.stringify(data, null, 2);
  14. })
  15. .catch(error => {
  16. document.getElementById('responseBox').value = 'Error: ' + error;
  17. });
  18. }
  19. function makePostRequest() {
  20. const apiUrl = 'https://canvas-api-test.anvil.app/_/api/creation-module/3d-image/submit';
  21. const postData = {
  22. "scene": {
  23. "objects": [
  24. {
  25. "name": "LNG Serum",
  26. "type": "group",
  27. "group_type": "product",
  28. "id": "15a314a1-8ba1-4e0e-ad0c-f605b06f89f8",
  29. "properties": {
  30. "transform": {
  31. "position": [0, 0, 0],
  32. "rotation": [-8, -6.9, -42],
  33. "scale": [1, 1, 1]
  34. },
  35. "visible": true
  36. }
  37. },
  38. {
  39. "name": "Sphere",
  40. "type": "group",
  41. "group_type": "shape",
  42. "id": "15a314a1-8ba1-4e0e-ad0c-f605b06f89h3",
  43. "properties": {
  44. "transform": {
  45. "position": [-0.041122, -0.036135, 0.155559],
  46. "rotation": [0, 0, 0],
  47. "scale": [0.74098, 0.74098, 0.74098]
  48. },
  49. "visible": true,
  50. "color": { "r": 0.5, "g": 0.5, "b": 0.5 }
  51. }
  52. },
  53. {
  54. "name": "Sphere",
  55. "type": "group",
  56. "group_type": "shape",
  57. "id": "15a314a1-8ba1-4e0e-ad0c-f605b06f89h3",
  58. "properties": {
  59. "transform": {
  60. "position": [0.067047, 0.088912, -0.023188],
  61. "rotation": [0, 0, 0],
  62. "scale": [0.4103, 0.4103, 0.4103]
  63. },
  64. "visible": true,
  65. "color": { "r": 0.5, "g": 0.5, "b": 0.5 }
  66. }
  67. },
  68. {
  69. "name": "Sphere",
  70. "type": "group",
  71. "group_type": "shape",
  72. "id": "15a314a1-8ba1-4e0e-ad0c-f605b06f89h3",
  73. "properties": {
  74. "transform": {
  75. "position": [-0.041122, -0.132029, 0.078844],
  76. "rotation": [0, 0, 0],
  77. "scale": [0.16679, 0.16679, 0.16679]
  78. },
  79. "visible": true,
  80. "color": { "r": 0.5, "g": 0.5, "b": 0.5 }
  81. }
  82. }
  83. ],
  84. "cameras": [
  85. {
  86. "name": "Camera",
  87. "type": "camera",
  88. "properties": {
  89. "transform": {
  90. "position": [0.432918, -0.202823, 0.08365],
  91. "rotation": [88.8032, 0.786282, 66.6831]
  92. },
  93. "lens": {
  94. "type": "perspective",
  95. "fov": 46.8,
  96. "near": 0.1,
  97. "far": 100
  98. },
  99. "active": true
  100. }
  101. }
  102. ],
  103. "environment": {
  104. "background": {
  105. "type": "color",
  106. "color": { "r": 1, "g": 1, "b": 1 }
  107. },
  108. "lighting": {
  109. "type": "image",
  110. "id": "15a314a1-8ba1-4e0e-ad0c-f605b06f89e9",
  111. "intensity": 1,
  112. "rotation": 0,
  113. "flip_horizontal": false,
  114. "flip_vertical": false,
  115. "visible": false
  116. }
  117. }
  118. },
  119. "user_id": "1125441",
  120. "project_id": "15a314a1-8ba1-4e0e-ad0c-f605b06f89f8"
  121. };
  122. fetch(apiUrl, {
  123. method: 'POST',
  124. headers: {
  125. 'Content-Type': 'application/json'
  126. },
  127. body: JSON.stringify(postData)
  128. })
  129. .then(response => response.json())
  130. .then(data => {
  131. document.getElementById('responseBox').value = JSON.stringify(data, null, 2);
  132. })
  133. .catch(error => {
  134. document.getElementById('responseBox').value = 'Error: ' + error;
  135. });
  136. }
  137. </script>
  138. </head>
  139. <body>
  140. <h1>Simple API Request</h1>
  141. <button onclick="makeApiRequest()">Get Data</button>
  142. <button onclick="makePostRequest()">Submit Data</button>
  143. <br><br>
  144. <textarea id="responseBox" rows="10" cols="50" placeholder="Response will be displayed here..."></textarea>
  145. </body>
  146. </html>