added basic 3mf export (elalish#500)

* added basic 3mf export

* updated worker test

* fixes

* formatting

* fix

bindings/wasm/examples/3mf-export.d.ts

@@ -0,0 +1 @@
+declare module '@jscadui/3mf-export';

bindings/wasm/examples/editor.js

@@ -347,7 +347,8 @@ function finishRun() {
 }
 
 const mv = document.querySelector('model-viewer');
-let objectURL = null;
+let glbURL = null;
+let threeMFURL = null;
 let manifoldWorker = null;
 
 function createWorker() {
@@ -370,10 +371,16 @@ function createWorker() {
     finishRun();
     runButton.disabled = true;
 
-    URL.revokeObjectURL(objectURL);
-    objectURL = e.data.objectURL;
-    mv.src = objectURL;
-    if (objectURL == null) {
+    if (threeMFURL != undefined) {
+      URL.revokeObjectURL(threeMFURL);
+      threeMFURL = undefined;
+    }
+    URL.revokeObjectURL(glbURL);
+    glbURL = e.data.glbURL;
+    threeMFURL = e.data.threeMFURL;
+    threemfButton.disabled = threeMFURL == undefined;
+    mv.src = glbURL;
+    if (glbURL == null) {
       mv.showPoster();
       poster.textContent = 'Error';
       createWorker();
@@ -411,10 +418,18 @@ runButton.onclick = function() {
   }
 };
 
-const downloadButton = document.querySelector('#download');
-downloadButton.onclick = function() {
+const glbButton = document.querySelector('#glb');
+glbButton.onclick = function() {
   const link = document.createElement('a');
   link.download = 'manifold.glb';
-  link.href = objectURL;
+  link.href = glbURL;
+  link.click();
+};
+
+const threemfButton = document.querySelector('#threemf');
+threemfButton.onclick = function() {
+  const link = document.createElement('a');
+  link.download = 'manifold.3mf';
+  link.href = threeMFURL;
   link.click();
 };

bindings/wasm/examples/index.html

@@ -48,7 +48,8 @@
         </div>
       </div>
       <button type="button" id="compile" class="margin green" disabled><span>Run</span></button>
-      <button type="button" id="download" class="blue margin">Save GLB</button>
+      <button type="button" id="glb" class="blue margin">Save GLB</button>
+      <button type="button" id="threemf" class="blue margin">Save 3MF</button>
     </div>
     <div class="container" style="flex: 2;">
       <div id="editor" class="col"></div>
@@ -74,4 +75,4 @@
 <script type="module" src="editor.js"></script>
 <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>
 
-</html>
+</html>

bindings/wasm/examples/package.json

@@ -16,6 +16,8 @@
     "@gltf-transform/core": "^3.2.1",
     "@gltf-transform/extensions": "^3.2.1",
     "@gltf-transform/functions": "^3.2.1",
+    "@jscadui/3mf-export": "^0.3.0",
+    "fflate": "^0.8.0",
     "gl-matrix": "^3.4.3",
     "simple-dropzone": "0.8.3",
     "three": "0.151.2"

bindings/wasm/examples/worker.test.js

@@ -39,7 +39,7 @@ function initialized(worker) {
   });
 }
 
-let objectURL = null;
+let glbURL = null;
 
 async function runExample(name) {
   const worker = new ManifoldWorker();
@@ -55,12 +55,12 @@ async function runExample(name) {
 
     worker.onmessage = async function(e) {
       try {
-        URL.revokeObjectURL(objectURL);
-        objectURL = e.data.objectURL;
-        if (objectURL == null) {
-          reject('no objectURL');
+        URL.revokeObjectURL(glbURL);
+        glbURL = e.data.glbURL;
+        if (glbURL == null) {
+          reject('no glbURL)');
         }
-        const docIn = await io.read(objectURL);
+        const docIn = await io.read(glbURL);
         const nodes = docIn.getRoot().listNodes();
         for (const node of nodes) {
           const mesh = node.getMesh();

bindings/wasm/examples/worker.ts

@@ -14,11 +14,14 @@
 
 import {Document, Material, Node, WebIO} from '@gltf-transform/core';
 import {KHRMaterialsUnlit, KHRONOS_EXTENSIONS} from '@gltf-transform/extensions';
+import {fileForContentTypes, to3dmodel} from '@jscadui/3mf-export';
+import {strToU8, Zippable, zipSync} from 'fflate'
 import * as glMatrix from 'gl-matrix';
 
 import Module from './built/manifold';
 //@ts-ignore
 import {setupIO, writeMesh} from './gltf-io';
+
 import type {GLTFMaterial, Quat} from './public/editor';
 import type {CrossSection, Manifold, ManifoldToplevel, Mesh, Vec3} from './public/manifold';
 
@@ -457,8 +460,28 @@ async function exportGLB(manifold?: Manifold) {
     wrapper.addChild(node);
   }
 
+  const results: {glbURL?: string, threeMFURL?: string} = {};
+  if (manifold != null) {
+    const mesh = manifold.getMesh();
+    let vertices = new Float32Array(mesh.numVert * 3);
+    for (let i = 0; i < mesh.numVert; ++i) {
+      for (let j = 0; j < 3; ++j)
+        vertices[i * 3 + j] = mesh.vertProperties[i * mesh.numProp + j];
+    }
+    const model =
+        to3dmodel({simple: [{vertices, indices: mesh.triVerts, id: '1'}]});
+    const files: Zippable = {};
+    files['3D/3dmodel.model'] = strToU8(model);
+    files[fileForContentTypes.name] = strToU8(fileForContentTypes.content);
+    const zipFile = zipSync(files);
+    results.threeMFURL = URL.createObjectURL(new Blob(
+        [zipFile],
+        {type: 'application/vnd.ms-package.3dmanufacturing-3dmodel+xml'}));
+  }
+
   const glb = await io.writeBinary(doc);
 
   const blob = new Blob([glb], {type: 'application/octet-stream'});
-  self.postMessage({objectURL: URL.createObjectURL(blob)});
+  results.glbURL = URL.createObjectURL(blob);
+  self.postMessage(results);
 }