basic example working

bindings/wasm/examples/model-viewer.html

@@ -48,10 +48,10 @@
   <model-viewer camera-controls shadow-intensity="1" alt="Output of mesh Boolean operation"></model-viewer>
 </body>
 
-<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
-<script src="https://unpkg.com/three@0.144.0/build/three.js"></script>
-<script src="https://unpkg.com/three@0.144.0/examples/js/utils/BufferGeometryUtils.js"></script>
-<script src="https://unpkg.com/three@0.144.0/examples/js/exporters/GLTFExporter.js"></script>
+<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/2.0.1/model-viewer.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.144.0/build/three.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.144.0/examples/js/utils/BufferGeometryUtils.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.144.0/examples/js/exporters/GLTFExporter.js"></script>
 <script src="manifold.js"></script>
 <script>
   let wasm;

bindings/wasm/examples/three-texture.html

@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <title>Manifold - three.js texture example</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" type="image/png" href="https://elalish.github.io/manifold/samples/models/favicon.png" />
+
+  <style>
+    body {
+      margin: 0;
+      background-color: #f7f7f7;
+      font-family: 'Rubik', sans-serif;
+      font-size: 16px;
+      line-height: 24px;
+      color: rgba(0, 0, 0, .87);
+      font-weight: 400;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    p {
+      max-width: 700px;
+      margin: 1em;
+      text-align: left;
+    }
+
+    canvas {
+      display: block;
+      width: 100vw;
+      height: 100vw;
+      max-width: 600px;
+      max-height: 600px;
+    }
+  </style>
+</head>
+
+<body>
+  <p>This demonstrates the minimum code to connect Manifold to a three.js rendering. A slightly more complex example
+    involving GLTF export and &lt;model-viewer&gt; can be found <a href="model-viewer.html">here</a>.
+  </p>
+  <input type="checkbox"/><br />
+  <canvas id="output"></canvas>
+</body>
+
+<script src="https://cdn.jsdelivr.net/npm/three@0.144.0/build/three.js"></script>
+<script src="manifold.js"></script>
+<script>
+  Module().then(function (wasm) {
+    wasm.setup();
+
+    const cube = new wasm.Mesh();
+    cube.vertPos = new Float32Array(24);
+    cube.triVerts = new Uint32Array(36);
+    cube.vertPos.set([
+        -1, -1, -1,
+        1, -1, -1, 
+        1, 1, -1, 
+        -1, 1, -1,
+        -1, -1, 1,
+        1, -1, 1,
+        1, 1, 1,
+        -1, 1, 1]);
+    cube.triVerts.set([
+        0, 2, 1, 0, 3, 2,  
+        4, 5, 6, 4, 6, 7,  
+        0, 1, 5, 0, 5, 4,  
+        1, 2, 6, 1, 6, 5,  
+        2, 3, 7, 2, 7, 6,  
+        3, 0, 4, 3, 4, 7]);
+
+    const manifold = wasm.Manifold(cube);
+    
+    const result = manifold.add(manifold.rotate([90, 0, 90]).translate([1, 1, 0]));
+
+    // we have a manifold, let's do some three.js
+    const camera = new THREE.PerspectiveCamera(30, 1, 1, 100);
+    camera.position.z = 10;
+
+    const scene = new THREE.Scene();
+    const mesh = new THREE.Mesh(mesh2geometry(result.getMesh()), 
+      new THREE.MeshNormalMaterial({
+        flatShading: true
+      }));
+    
+    const wireframe = new THREE.WireframeGeometry(mesh.geometry);
+    const lines = new THREE.LineSegments(wireframe);
+
+    scene.add(mesh);
+    scene.add(lines);
+    lines.visible = false;
+
+    const checkbox = document.querySelector('input');
+    checkbox.onchange = function (event) {
+      mesh.visible = !checkbox.checked;
+      lines.visible = checkbox.checked;
+    };
+
+    const output = document.querySelector("#output");
+    const renderer = new THREE.WebGLRenderer({ canvas: output, antialias: true });
+    const dim = output.getBoundingClientRect();
+    renderer.setSize(dim.width, dim.height);
+    renderer.setAnimationLoop(function (time) {
+      scene.rotation.x = time / 2000;
+      scene.rotation.y = time / 1000;
+      renderer.render(scene, camera);
+    });
+  });
+
+  function mesh2geometry(mesh) {
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute('position', new THREE.BufferAttribute(mesh.vertPos, 3));
+    geometry.setAttribute('normal', new THREE.BufferAttribute(mesh.vertNormal, 3));
+    geometry.setIndex(new THREE.BufferAttribute(mesh.triVerts, 1));
+    return geometry;
+  }
+</script>
+
+</html>

bindings/wasm/examples/three.html

@@ -47,8 +47,8 @@
   <canvas id="output"></canvas>
 </body>
 
-<script src="https://unpkg.com/three@0.142.0/build/three.js"></script>
-<script src="https://unpkg.com/three@0.142.0/examples/js/utils/BufferGeometryUtils.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.144.0/build/three.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.144.0/examples/js/utils/BufferGeometryUtils.js"></script>
 <script src="manifold.js"></script>
 <script>
   let wasm;