Add PerTau w/controls example

glue-viz · Jan 21, 2025 · d7df4a0 · d7df4a0
1 parent b6f5870
commit d7df4a0
Show file tree

Hide file tree

Showing 2 changed files with 171 additions and 0 deletions.
diff --git a/docs/examples/pertau_controls_test.glb b/docs/examples/pertau_controls_test.glb
diff --git a/docs/examples/pertau_controls_test.html b/docs/examples/pertau_controls_test.html
@@ -0,0 +1,171 @@
+<html>
+  <head>
+    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>
+    <style>
+      :root {
+  --glue-red: #eb1c24;
+}
+
+body {
+  margin: 0;
+  background-color: black;
+}
+
+model-viewer {
+  width: 100%;
+  height: 100%;
+}
+
+/* This keeps child nodes hidden while the element loads */
+:not(:defined) > * {
+  display: none;
+}
+.ar-button {
+  background-repeat: no-repeat;
+  background-size: 20px 20px;
+  background-position: 12px 50%;
+  background-color: #f5c6c888;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 16px;
+  padding: 0px 16px 0px 40px;
+  font-family: Roboto Regular, Helvetica Neue, sans-serif;
+  font-size: 60pt;
+  font-weight: bold;
+  color: var(--glue-red);
+  height: 200px;
+  width: max(300px, 80%);
+  border-radius: 18px;
+  border: 5px solid var(--glue-red);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+.ar-button:active {
+  background-color: #E8EAED;
+}
+.ar-button:focus {
+  outline: none;
+}
+.ar-button:focus-visible {
+  outline: 1px solid #1f5ef1; 
+}
+.info {
+  display: block;
+  position: absolute;
+  font-family: Futura, Helvetica Neue, sans-serif;
+  color: rgba(0, 0, 0, 0.8);
+  font-weight: 700;
+  font-size: 18px;
+  max-width: 128px;
+  padding: 0.5em 1em;
+  background: #ddd;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  left: calc(100% + 1em);
+  top: 50%;
+}
+
+h3 {
+  color: white;
+}
+
+#layer-controls {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 2px solid white;
+  border-radius: 5px;
+  background-color: transparent;
+}
+
+#layer-controls button {
+  width: 100%;
+}
+
+
+    </style>
+  </head>
+  <body>
+    <model-viewer
+      src="pertau_controls_test.glb"
+      camera-orbit="0.9677rad 1.2427rad auto"
+      shadow-intensity="1"
+      ar
+      ar-modes="webxr quick-look"
+      camera-controls
+      alt="None"
+    >
+      <button slot="ar-button" class="ar-button">
+        View in AR
+      </button>
+      <div class="controls" id="layer-controls">
+        <h3>Toggle Layers</h3>
+<button data-color="#b4b6b2" data-layer="0" data-meshes="0,1,2,3,4,5,6">3Ddust_Leike</button>
+<button data-color="#1f7a17" data-layer="1" data-meshes="7">Tau_Ring_3d_model</button>
+<button data-color="#bd1d29" data-layer="2" data-meshes="8">3d_perseus_mask</button>
+<button data-color="#2f8bf0" data-layer="3" data-meshes="9">3d_taurus_mask</button>
+<button data-color="#2ee815" data-layer="4" data-meshes="10">Bialy2021_ApJL_919_L5_MW3D[HDU1]</button>
+      </div>
+    </model-viewer>
+    <script>
+      function updateButtonStyle(button, on, color) {
+  button.style.color = on ? color : "black";
+  button.style.border = on ? `1px solid ${color}` : "none";
+  button.style.borderRadius = "2px";
+}
+
+function parseCommaSeparatedIndices(string) {
+  return string.split(",").map(Number);
+}
+
+function toggleMeshVisibility(modelViewer, meshIndex) {
+  const mesh = getMesh(modelViewer, meshIndex);
+  mesh.visible = !mesh.visible;
+  forceUpdate(modelViewer);
+}
+
+function getMesh(modelViewer, meshIndex) {
+  const symbol = Object.getOwnPropertySymbols(modelViewer.model).find(sym => sym.description === "hierarchy");
+  const meshObject = modelViewer.model[symbol].find(m => m.name === `mesh_${meshIndex}`);
+  return meshObject.mesh;
+}
+
+// This is a bit of a hack
+// We just need to do an "update" that will make model-viewer redraw the scene
+function forceUpdate(modelViewer) {
+  modelViewer.model.materials[0].pbrMetallicRoughness.setBaseColorFactor(
+    modelViewer.model.materials[0].pbrMetallicRoughness.baseColorFactor
+  );
+}
+
+const modelViewer = document.querySelector("model-viewer");
+modelViewer.addEventListener("load", (_event) => {
+  const layerControls = document.querySelector("#layer-controls");
+  const buttons = [...layerControls.querySelectorAll("button")];
+  buttons.forEach((button) => updateButtonStyle(button, true, button.dataset.color));
+
+  const layersOn = buttons.map(_ => true);
+  layerControls.addEventListener("click", (event) => {
+    const dataset = event.target.dataset;
+    const meshesString = dataset.meshes;
+    const meshIndices = parseCommaSeparatedIndices(meshesString);
+    const layerIndex = Number(dataset.layer);
+
+    layersOn[layerIndex] = !layersOn[layerIndex];
+    meshIndices.forEach(meshIndex => toggleMeshVisibility(modelViewer, meshIndex));
+    updateButtonStyle(buttons[layerIndex], layersOn[layerIndex], dataset.color);
+  });
+});
+
+    </script>
+  </body>
+</html>
+