safety

mv_themes.js

@@ -0,0 +1,38 @@
+// mv_theme.js
+// Apply consistent colors for manifest viewing.
+//
+// Usage:
+//   <model-viewer class="mv" data-theme="primary" ...></model-viewer>
+//   <model-viewer class="mv" data-theme="accent"  ...></model-viewer>
+
+const THEMES = {
+  primary: { rgba: [0.10, 0.45, 1.00, 1.0] },   // diagnostic blue
+  accent:  { rgba: [0.78, 0.33, 0.10, 1.0] },   // burnt orange-ish
+};
+
+function applyTheme(mv) {
+  const key = (mv.dataset.theme || "primary").toLowerCase();
+  const theme = THEMES[key] || THEMES.primary;
+
+  // Lighting-related material choices that improve face contrast
+  const metallic = 0.0;
+  const roughness = 0.35;
+
+  for (const mat of mv.model.materials) {
+    mat.pbrMetallicRoughness.setBaseColorFactor(theme.rgba);
+    mat.pbrMetallicRoughness.setMetallicFactor(metallic);
+    mat.pbrMetallicRoughness.setRoughnessFactor(roughness);
+  }
+}
+
+function hook(mv) {
+  if (mv.model) {
+    applyTheme(mv);
+  } else {
+    mv.addEventListener("load", () => applyTheme(mv), { once: true });
+  }
+}
+
+for (const mv of document.querySelectorAll("model-viewer.mv")) {
+  hook(mv);
+}