Update HTML examples for WASM API changes (#470)

updated for WASM API changes

bindings/wasm/examples/make-manifold.html

@@ -74,6 +74,8 @@
   const wasm = await Module();
   wasm.setup();
 
+  const { Manifold, Mesh } = wasm;
+
   const mv = document.querySelector('model-viewer');
   const inputEl = document.querySelector('#input');
   const downloadButton = document.querySelector('#download');
@@ -154,11 +156,11 @@
       const materials = [];
       const tmpMesh = readMesh(mesh, attributes, materials);
       tmpMesh.runOriginalID = [];
-      const firstID = wasm.reserveIDs(materials.length);
+      const firstID = Manifold.reserveIDs(materials.length);
       for (let i = 0; i < materials.length; ++i) {
         tmpMesh.runOriginalID.push(firstID + i);
       }
-      const manifoldMesh = new wasm.Mesh(tmpMesh);
+      const manifoldMesh = new Mesh(tmpMesh);
       mesh.dispose();
 
       const matAttributes = [];
@@ -168,7 +170,7 @@
 
       try {
         // Test manifoldness - will throw if not.
-        const manifold = wasm.Manifold(manifoldMesh);
+        const manifold = Manifold(manifoldMesh);
         node.setMesh(writeMesh(docIn, manifold.getMesh(), matAttributes, materials));
         manifold.delete();
         anyManifold = true;

bindings/wasm/examples/model-viewer.html

@@ -61,6 +61,8 @@
   const wasm = await Module();
   wasm.setup();
 
+  const { Manifold, Mesh } = wasm;
+
   const attributes = ['POSITION', 'TEXCOORD_0'];
   const materialMap = new Map();
 
@@ -75,12 +77,12 @@
       const materials = [];
       const manifoldMesh = readMesh(node.getMesh(), attributes, materials);
       manifoldMesh.runOriginalID = [];
-      const firstID = wasm.reserveIDs(materials.length);
+      const firstID = Manifold.reserveIDs(materials.length);
       for (let i = 0; i < materials.length; ++i) {
         manifoldMesh.runOriginalID.push(firstID + i);
         ids.push(firstID + i);
       }
-      manifolds.push(wasm.Manifold(new wasm.Mesh(manifoldMesh)));
+      manifolds.push(Manifold(new Mesh(manifoldMesh)));
     }
     // pull in materials, TODO: replace with transfer() when available
     const startIdx = doc.getRoot().listMaterials().length;
@@ -92,7 +94,7 @@
       materialMap.set(id, material);
     }
 
-    return wasm.union(manifolds);
+    return Manifold.union(manifolds);
   }
 
   const space = await readGLB('/models/space.glb', attributes, materialMap);
@@ -102,7 +104,7 @@
   doc.createScene().addChild(node);
 
   function csg(operation) {
-    push2MV(wasm[operation](space, moon));
+    push2MV(Manifold[operation](space, moon));
   };
 
   document.querySelector('select').onchange = function (event) {

bindings/wasm/examples/three.html

@@ -52,6 +52,8 @@
   const wasm = await Module();
   wasm.setup();
 
+  const { Manifold, Mesh } = wasm;
+
   // we have manifold module, let's do some three.js
   const camera = new THREE.PerspectiveCamera(30, 1, 0.01, 10);
   camera.position.z = 1;
@@ -64,12 +66,12 @@
 
   const icosahedron = simplify(new THREE.IcosahedronGeometry(0.16));
 
-  const manifold_1 = wasm.cube([0.2, 0.2, 0.2], true);
-  const manifold_2 = new wasm.Manifold(geometry2mesh(icosahedron));
+  const manifold_1 = Manifold.cube([0.2, 0.2, 0.2], true);
+  const manifold_2 = new Manifold(geometry2mesh(icosahedron));
 
   const csg = function (operation) {
     mesh.geometry?.dispose();
-    mesh.geometry = mesh2geometry(wasm[operation](manifold_1, manifold_2).getMesh());
+    mesh.geometry = mesh2geometry(Manifold[operation](manifold_1, manifold_2).getMesh());
   };
 
   document.querySelector('select').onchange = function (event) {
@@ -92,7 +94,7 @@
   function geometry2mesh(geometry) {
     const vertProperties = geometry.attributes.position.array;
     const triVerts = geometry.index.array;
-    return new wasm.Mesh({ numProp: 3, vertProperties, triVerts });
+    return new Mesh({ numProp: 3, vertProperties, triVerts });
   }
 
   function mesh2geometry(mesh) {