zink/trilium_share_gruvbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3D viewer: theme-aware canvas/material colors and light overlays

Browse Source
This commit is contained in:
trilium-share-gruvbox
2026-09-07 17:12:15 +02:00
parent c5323f221f
commit 3da4ae92fa
2 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/3d_model_viewer.js
+4 -3
View File
@@ -232,7 +232,8 @@
var initSize = canvasSize(); var initSize = canvasSize();
var renderer = new THREE.WebGLRenderer({ antialias: true }); var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(initSize.w, initSize.h); renderer.setSize(initSize.w, initSize.h);
renderer.setClearColor(0x1d2021, 1); var isLight = document.documentElement.classList.contains("theme-light");
renderer.setClearColor(isLight ? 0xe8ecd0 : 0x1b1b1b, 1);
var scene = new THREE.Scene(); var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, initSize.w / initSize.h, 0.1, 1000000); var camera = new THREE.PerspectiveCamera(45, initSize.w / initSize.h, 0.1, 1000000);
@@ -308,7 +309,7 @@
geo.setAttribute("position", new THREE.Float32BufferAttribute(e.data.positions, 3)); geo.setAttribute("position", new THREE.Float32BufferAttribute(e.data.positions, 3));
if (e.data.indices) geo.setIndex(new THREE.BufferAttribute(e.data.indices, 1)); if (e.data.indices) geo.setIndex(new THREE.BufferAttribute(e.data.indices, 1));
fixWinding(geo); fixWinding(geo);
var mat = new THREE.MeshStandardMaterial({ color: 0xb8bb26, metalness: 0.2, roughness: 0.6, side: THREE.DoubleSide, flatShading: false }); var mat = new THREE.MeshStandardMaterial({ color: isLight ? 0x5e81ac : 0x77838a, metalness: 0.2, roughness: 0.6, side: THREE.DoubleSide, flatShading: false });
chunkGeometry(geo, group, mat); chunkGeometry(geo, group, mat);
var tris = (e.data.indices && e.data.indices.length) ? e.data.indices.length / 3 : e.data.positions.length / 9; var tris = (e.data.indices && e.data.indices.length) ? e.data.indices.length / 3 : e.data.positions.length / 9;
fit(); fit();
@@ -330,7 +331,7 @@
} else { } else {
var geo = new THREE.STLLoader().parse(data.buffer); var geo = new THREE.STLLoader().parse(data.buffer);
geo.computeVertexNormals(); geo.computeVertexNormals();
var mat = new THREE.MeshStandardMaterial({ color: 0xb8bb26, metalness: 0.25, roughness: 0.55, flatShading: true }); var mat = new THREE.MeshStandardMaterial({ color: isLight ? 0x5e81ac : 0x77838a, metalness: 0.25, roughness: 0.55, flatShading: true });
group.add(new THREE.Mesh(geo, mat)); group.add(new THREE.Mesh(geo, mat));
fit(); fit();
showCanvas(); showCanvas();
theme/blog_share_theme.css
+23
View File
@@ -923,6 +923,29 @@ html.theme-light #content code {
height: 100%; height: 100%;
} }
/* ---------- 3D-Viewer: theme-bewusste Overlays ---------- */
html.theme-light .model-viewer {
background: #e8ecd0;
}
html.theme-light .model-viewer-status,
html.theme-light .model-viewer-hint,
html.theme-light .model-viewer-data {
color: #1c2d28;
}
html.theme-light .model-viewer-data {
background: rgba(223, 228, 196, 0.85);
border-color: #c3c9a6;
}
html.theme-light .model-viewer-status.error {
color: #b14752;
}
html.theme-light .model-viewer-progress {
background: #c3c9a6;
}
html.theme-light .model-viewer-progress-fill {
background: #5e81ac;
}
/* ---------- Bildunterschriften (Harbor) ---------- */ /* ---------- Bildunterschriften (Harbor) ---------- */
#content figcaption { #content figcaption {
font-size: 0.85em; font-size: 0.85em;