38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
|
// 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);
|
||
|
|
}
|