elalish · elalish · Nov 19, 2023 · Nov 17, 2023 · Nov 17, 2023 · Nov 17, 2023
diff --git a/bindings/wasm/examples/editor.css b/bindings/wasm/examples/editor.css
@@ -65,7 +65,7 @@ button:hover {
   filter: brightness(0.9);
 }
 
-input {
+.name {
   border: none;
   height: 36px;
   background-color: transparent;
@@ -77,7 +77,7 @@ input {
   -webkit-font-smoothing: antialiased;
 }
 
-input:focus {
+.name:focus {
   outline: none;
 }
 
@@ -196,6 +196,14 @@ model-viewer {
   background-image: url(/icons/trash.png);
 }
 
+.play {
+  background-image: url(/icons/play.png);
+}
+
+.pause {
+  background-image: url(/icons/pause.png);
+}
+
 .icon:hover {
   background-color: rgba(0, 0, 0, 0.2);
 }
@@ -221,6 +229,51 @@ model-viewer {
   width: 125px;
 }
 
+#animation {
+  display: none;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  bottom: 0px;
+  margin: 2px;
+}
+
+#play {
+  position: relative;
+  background-color: #ccc;
+  margin: 8px;
+}
+
+.slider {
+  position: relative;
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 10px;
+  border-radius: 5px;
+  margin-right: 16px;
+  background: #ffffff55;
+  outline: none;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: #ccc;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: #ccc;
+  cursor: pointer;
+}
+
 @media only screen and (max-width: 600px) {
   .container {
     flex-direction: column;
@@ -256,4 +309,4 @@ model-viewer {
     width: calc(50% - 16px);
     margin: 8px;
   }
-}
+}
diff --git a/bindings/wasm/examples/editor.js b/bindings/wasm/examples/editor.js
@@ -146,6 +146,7 @@ function addEdit(button) {
     const code = getScript(oldName);
     const form = document.createElement('form');
     const inputElement = document.createElement('input');
+    inputElement.classList.add('name');
     inputElement.value = oldName;
     label.textContent = '';
     button.appendChild(form);
@@ -322,6 +323,51 @@ require(['vs/editor/editor.main'], async function() {
   };
 });
 
+// Animation ------------------------------------------------------------
+const mv = document.querySelector('model-viewer');
+const animationContainer = document.querySelector('#animation');
+const playButton = document.querySelector('#play');
+const scrubber = document.querySelector('#scrubber');
+let paused = false;
+
+mv.addEventListener('load', () => {
+  const hasAnimation = mv.availableAnimations.length > 0;
+  animationContainer.style.display = hasAnimation ? 'flex' : 'none';
+  if (hasAnimation) {
+    play();
+  }
+});
+
+function play() {
+  mv.play();
+  playButton.classList.remove('play');
+  playButton.classList.add('pause');
+  paused = false;
+  scrubber.classList.add('hide');
+}
+
+function pause() {
+  mv.pause();
+  playButton.classList.remove('pause');
+  playButton.classList.add('play');
+  paused = true;
+  scrubber.max = mv.duration;
+  scrubber.value = mv.currentTime;
+  scrubber.classList.remove('hide');
+}
+
+playButton. {
+  if (paused) {
+    play();
+  } else {
+    pause();
+  }
+};
+
+scrubber. {
+  mv.currentTime = scrubber.value;
+};
+
 // Execution ------------------------------------------------------------
 const consoleElement = document.querySelector('#console');
 const oldLog = console.log;
@@ -357,7 +403,6 @@ function finishRun() {
       `Took ${(Math.round((t1 - t0) / 10) / 100).toLocaleString()} seconds`);
 }
 
-const mv = document.querySelector('model-viewer');
 const output = {
   glbURL: null,
   threeMFURL: null

diff --git a/bindings/wasm/examples/index.html b/bindings/wasm/examples/index.html
@@ -70,6 +70,10 @@
           <div class="center" slot="poster">
             <p id="poster" style="text-align: center; line-height: 36px;"> Loading... </p>
           </div>
+          <div id="animation">
+            <button type="button" id="play" class="icon pause"></button>
+            <input type="range" min="0" max="1" step="0.01" value="0" class="slider" id="scrubber">
+          </div>
         </model-viewer>
         <div id="console"></div>
       </div>

diff --git a/bindings/wasm/examples/public/editor.d.ts b/bindings/wasm/examples/public/editor.d.ts
@@ -38,15 +38,25 @@ declare class GLTFMaterial {
   name?: string;
 }
 
+declare const globalDefaults: {
+  roughness: number,
+  metallic: number,
+  baseColorFactor: [number, number, number],
+  alpha: number,
+  unlit: boolean,
+  animationLength: number,
+  animationMode: 'loop'|'ping-pong';
+}
+
 /**
  * Set material properties on the input manifold. They will be carried along
  * through operations.
  *
  * @param manifold The object to add properties to - returned for chaining.
  * @param material A set of material properties to apply to this manifold.
  */
-declare function setMaterial(
-    manifold: Manifold, material: GLTFMaterial): Manifold;
+declare function setMaterial(manifold: Manifold, material: GLTFMaterial):
+    Manifold;
 
 /**
  * Wrap any shape object with this method to display it and any copies in

diff --git a/bindings/wasm/examples/public/examples.js b/bindings/wasm/examples/public/examples.js
@@ -90,17 +90,28 @@ export const examples = {
 
       // Assigned materials are only applied to a GLTFNode. Note that material
       // definitions cascade, applying recursively to all child surfaces, but
-      // overridden by any materials defined lower down. Our default material:
-      // {
-      //   roughness = 0.2,
-      //   metallic = 1,
-      //   baseColorFactor = [1, 1, 0],
-      //   alpha = 1,
-      //   unlit = false,
-      //   name = ''
-      // }
+      // overridden by any materials defined lower down. The default material
+      // properties, as well as animation parameters can be set via
+      // globalDefaults.
+
       const node = new GLTFNode();
-      node.manifold = result;
+      node.rotation = [45, -Math.atan(1 / Math.sqrt(2)) * 180 / Math.PI, 120];
+
+      const fixed = new GLTFNode(node);
+      fixed.manifold = result;
+      fixed.rotation = [0, 0, 180];
+
+      const moving = new GLTFNode(node);
+      moving.manifold = result;
+      moving.translation = (t) => {
+        const a = 1 - t;
+        const x = a > 0.5 ? scale * 2 * (0.5 - a) : 0;
+        return [x, x, -2 * x + scale * 4 * (0.5 - Math.abs(0.5 - a))];
+      };
+      moving.rotation = (t) => [0, 0, 270 * 2 * (1 - t)];
+
+      globalDefaults.animationLength = 10;
+      globalDefaults.animationMode = 'ping-pong';
       return result;
     },
 

diff --git a/bindings/wasm/examples/public/icons/pause.png b/bindings/wasm/examples/public/icons/pause.png
diff --git a/bindings/wasm/examples/public/icons/play.png b/bindings/wasm/examples/public/icons/play.png