index.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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, shrink-to-fit=no">
  6. <meta name="description" content="Model 3D, file format, triangle mesh, viewer">
  7. <meta name="author" content="bzt">
  8. <title>Model 3D Viewer</title>
  9. <link href="../logo.png" rel="shortcut icon">
  10. <style>
  11. input { font-family: monospace,fixed; width:100%; }
  12. table { width:100%; }
  13. pre { margin:0px;padding:0px;width:800px;background:#191919;color:#e0e0e0;}
  14. #jserr { color:white; background:red; font-weight:bold; font-size: 150%; text-align:center; padding: 32px; }
  15. </style>
  16. </head>
  17. <body>
  18. <h1>Model 3D Viewer</h1>
  19. <div id="jserr">Please enable JavaScript</div>
  20. <table>
  21. <tr><td>URL</td><td width="100%"><input id="url" onchange="geturl()" placeholder="https://..."></td></tr>
  22. <tr><td>File</td><td><input type="file" id="input" onchange="getfile()"></td></tr>
  23. </table>
  24. <pre id='info'>(no model loaded)</pre><pre id='stat'></pre><canvas id="canvas" width="800" height="600"></canvas>
  25. <script src="viewer.js"></script>
  26. <script>
  27. document.getElementById("jserr").style.display = "none";
  28. Module.canvas = document.getElementById("canvas");
  29. try {
  30. var url = document.location.href.split('?')[1];
  31. if(url.substr(0,4) != "http" && url.substr(0,5) != "file:") url = "https://bztsrc.gitlab.io/model3d/models/" + url;
  32. if(url && url != "" && url != undefined) {
  33. document.getElementById("url").value = url;
  34. geturl();
  35. }
  36. }catch(e){}
  37. function execute(data) {
  38. var viewer = Module.cwrap("m3d_viewer", "number", [ "number", "number" ]);
  39. const buf = Module._malloc(data.length);
  40. Module.HEAPU8.set(data, buf);
  41. viewer(buf, data.length);
  42. Module._free(buf);
  43. }
  44. function geturl() {
  45. fetch(document.getElementById("url").value).then((response) => {
  46. if(response.ok) response.arrayBuffer().then((buf) => { execute(Uint8Array(buf)); });
  47. })
  48. .catch((error) => alert("Unable to get url\n" + error));
  49. }
  50. function getfile() {
  51. var input=document.getElementById("input");
  52. if(input.files.length<1) {
  53. alert("No file given.");
  54. } else {
  55. var reader = new FileReader();
  56. reader.onloadend = function() { execute(new Uint8Array(reader.result)); };
  57. reader.readAsArrayBuffer(input.files[0]);
  58. }
  59. }
  60. </script>
  61. </body>
  62. </html>