From e13a5433d9d97441faf80b4a3194534c164e5bf2 Mon Sep 17 00:00:00 2001 From: trilium-share-gruvbox Date: Fri, 28 Aug 2026 15:24:56 +0200 Subject: [PATCH] Add local 3D model viewer (three.js + occt-import-js) for STEP/STL, 8px box + caption; embed guide; licenses --- AGENTS.md | 9 + README.md | 19 +- THIRD_PARTY_LICENSES.md | 8 + docs/embed-3d-model.md | 36 ++ lib/3d/OrbitControls.js | 1045 ++++++++++++++++++++++++++++++++++++ lib/3d/STLLoader.js | 371 +++++++++++++ lib/3d/occt-import-js.js | 19 + lib/3d/occt-import-js.wasm | Bin 0 -> 7604031 bytes lib/3d/three.min.js | 6 + scripts/3d_model_viewer.js | 190 +++++++ theme/blog_share_theme.css | 50 ++ 11 files changed, 1752 insertions(+), 1 deletion(-) create mode 100644 docs/embed-3d-model.md create mode 100644 lib/3d/OrbitControls.js create mode 100644 lib/3d/STLLoader.js create mode 100644 lib/3d/occt-import-js.js create mode 100644 lib/3d/occt-import-js.wasm create mode 100644 lib/3d/three.min.js create mode 100644 scripts/3d_model_viewer.js diff --git a/AGENTS.md b/AGENTS.md index d8b2cdc..e39cd57 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -22,6 +22,7 @@ CSS file (Gruvbox, light + dark, theme toggle without reload). | `theme/blog_share_theme.css` | `blog_share_theme.css` (`shareCss`) | the entire Gruvbox theme | | `theme/favicon.svg`, `theme/cookie.woff2` | `favicon`, `Cookie` | site icon + BMC font | | `lib/highlight.js`, `lib/hljs_line_numbers.js` | `highlight.js`, `hljs line numbers plugin` | code highlighting | +| `lib/3d/*` | three.js, OrbitControls, STLLoader, occt-import-js (WASM) | local libraries for the 3D model viewer | | `scripts/*.js` | one code note each (`.blog`), attached via `~shareHtml` | frontend snippets (verbatim content incl. ` \ No newline at end of file diff --git a/theme/blog_share_theme.css b/theme/blog_share_theme.css index 0d3b208..c279360 100644 --- a/theme/blog_share_theme.css +++ b/theme/blog_share_theme.css @@ -808,6 +808,56 @@ html.theme-light #content code { border-radius: 8px; } +/* ---------- 3D model viewer (STL / STEP) ---------- */ +.model-viewer { + margin: 1em 0; + background: #1d2021; + border: 1px solid var(--background-highlight); + border-radius: 8px; + overflow: hidden; +} + +.model-viewer-canvas { + position: relative; +} + +.model-viewer-status { + padding: 48px; + text-align: center; + color: #a89984; + font-size: 0.9em; +} + +.model-viewer-status.error { + color: #fb4934; +} + +.model-viewer-hint { + position: absolute; + top: 8px; + left: 10px; + font-size: 0.75em; + color: #a89984; + z-index: 2; + pointer-events: none; +} + +.model-viewer-caption { + font-size: 0.85em; + font-style: italic; + color: var(--text-menu); + text-align: center; + padding: 4px 12px; + background: var(--background-secondary); + border-top: 1px solid var(--background-highlight); +} + +.model-viewer canvas { + display: block; + width: 100%; + height: auto; +} + /* ---------- Bildunterschriften (Gruvbox) ---------- */ #content figcaption { font-size: 0.85em;