1.9 KiB
1.9 KiB
Embedding a 3D model (STEP / STL) in a note
The share can render .step / .stp / .stl models interactively (three.js + occt-import-js,
hosted locally). There are two ways to embed a model, depending on how you store the file.
Option A – Model as its own note (file note)
- Create (or upload) a file note and make sure its title ends in
.step,.stpor.stl, e.g.bracket.steporrear_housing.stp. - Put it under a category in the blog and set
publish=true. - The note's share page then shows the interactive 3D viewer automatically: drag to rotate, scroll to zoom; below the model there is a caption with the file name.
Option B – Model embedded inline in a text note (attachment)
- Upload the STEP/STL file as an attachment of the note: drag & drop it onto the note, or use the attachment dialog (paperclip icon).
- Rename the attachment so its title ends in
.step,.stpor.stl(the viewer detects a model by the file name). Example:flange.step. - Insert the attachment link into the note body: right-click the attachment → “Insert link”, or drag the attachment into the text. (Trilium creates a link showing the file name.)
- On the share, that link is automatically replaced by the embedded 3D viewer.
Tip: STL (plain triangle meshes) is rendered with three.js only; STEP (CAD B-rep) is parsed by occt-import-js (OpenCASCADE WASM, LGPL-2.1). The first STEP view downloads the ~7.6 MB WASM once and then caches it in the browser.
Requirements
- The
3d model viewerscript must be wired:~shareHtml → 3d model viewer(inheritable) on the blog root,shareHtmlLocation=body:end. - The five libraries must exist as notes and be referenced by the script via the
placeholder tokens in
scripts/3d_model_viewer.js:__THREE_ID__,__THREE_ORBIT_ID__,__THREE_STL_ID__,__OCCT_JS_ID__,__OCCT_WASM_ID__(see the README installation for the note titles).