Barevný modely z PrusaSliceru rovnou na webu

Tak jsem udělala knihovnu, která ti na webu ukáže barevnej 3D model. Umí 3MF z PrusaSliceru i s tím, co do modelu namaluješ s MMU funkcí. Jmenuje se view3mf, je zadarmo, je na GitHubu a nepotřebuje vůbec nic dalšího.

A jo, tentokrát jsem to fakt dotáhla až do vydání. :D

Proč vlastně

PrusaSlicer používám. A když si v něm model obarvím, chci ho pak taky ukázat na webu a na eshopu. Jenže většina online prohlížečů 3MF umí jednobarevně. To malování po trojúhelníkách, který PrusaSlicer ukládá do souboru, neukáže nikdo. Ani Printables, tam máš prostě oranžovej model.

Mě to přišlo jako škoda, tak jsem si to napsala sama. Klasika.

Nejdřív se to jmenovalo p3d. Pak se ukázalo, že tohle jméno už někdo má, takže přejmenovat. Vymýšlet názvy fakt neumím, ale view3mf aspoň říká, co dělá. :)

Co to umí

Načte ti tři formáty:

• 3MF z PrusaSliceru i s barvama namalovanýma štětcem. Kvůli tomu to celý vzniklo. Aktuálně jen z verze 2.9.x.
• STL, protože bez STL by to nebyl 3D prohlížeč. Tak trochu povinnost. Když má STL barvy uložený v atributech (dělá to třeba Magics), přečtou se taky.
• OBJ s materiálama z MTL, hlavně kvůli výstupům z 3D scanneru. Holý OBJ bez MTL taky, jen mu barvy vymyslí sám.

S modelem si pak můžeš hrát. Otáčet, zoomovat, přebarvit kteroukoliv barvu z palety a nastavit lesk zvlášť pro každou barvu. Pod model jde dát podložku s mřížkou ve skutečnejch milimetrech a knihovna ti řekne, jestli se ti model na tu podložku vůbec vejde.

Otáčení má tři režimy: jako ve sliceru, jen dokola jako na točně, nebo úplně volně. A když na model chvíli nesaháš, může se točit sám.

Nejvíc mě baví přebarvování. Je okamžitý, i u velkýho modelu. Geometrie se při změně barvy vůbec nepřepočítává.

Žádný závislosti, žádnej build, žádný npm. Přidáš <script> a jede to. A to i offline.

Jak to dát na web

Kompletní info je na Githubu https://github.com/Azuzula/view3mf

K čemu se to hodí

V README máš tři hotový příklady, se kterýma jsem počítala od začátku:

1. Eshop s 3D tiskem. Zákazník nahraje model, vybere si barvy z tvojí palety a hned vidí, jak to bude vypadat. Podložka podle tvojí tiskárny a kontrola, jestli se tam model vejde.
2. Nábytek. Model ze scanneru (OBJ+MTL), jedna barva, pomalý otáčení dokola, bez zoomu.
3. Náhled v seznamu produktů. Jednobarevnej model, kterej se sám točí a nedá se ovládat. Takovej živej obrázek.

Tip z praxe: na eshop dávej zjednodušený modely. Načítají se o dost rychlejc a v náhledu ten rozdíl stejně nikdo nepozná.

Co to zatím neumí

Některý věci jsem vynechala schválně, aby to zůstalo malý a bez závislostí:

• Obrázkový textury z MTL. Čte se jen základní barva.
• Průhlednost. Při každým otočení by se musely znova seřadit všechny trojúhelníky. To za to nestojí.
• STEP. To není lenost. STEP nejsou trojúhelníky, ale matematický plochy, a na jejich převod by bylo potřeba přibalit knihovnu navíc. Ale to stejně vyřešíš v PrusaSliceru a ulož ho jako 3MF.
• 3mf z jiných slicerů. Podpora je zatím jen pro Průšaslicer 2.9.x

A pak jsou věci, který jsem odložila na později: víc modelů na jedný podložce, uložení a odeslání přebarvenýho modelu a ovládání světel. Uvidíme, co bude potřeba nejdřív.

Proč jen Průšaslicer 2.9?

Je to jednoduchý. Každej slicer si ty data ukládá jinak a podchytit každou variantu je kus reverzního inženýrství. S Claudem to vypadá jednoduše, než se do toho pustíš. Jen ten jeden slicer jsem řešila půl dne. Ale už je to několik měsíců a základ mám. Další varianty možná půjdou rychleji.

Kdyby něco

Potřebuješ prohlížeč s WebGL: Chrome 103+, Firefox 113+, Safari 16.4+. Na starším hardwaru to poběží taky, jen si to vezme trochu víc paměti.

Když ti Firefox místo modelu ukáže černou plochu, nejspíš máš vypnutou hardwarovou akceleraci. Na tohle jsem narazila při testování a chyba nebyla v knihovně. :)

Vyzkoušej si to

Nejrychlejší je mrknout na demo, tam hned uvidíš, co to umí.

• Živý demo
• view3mf na GitHubu (README je i česky)
• Můj post na X

Licence je MIT, takže si to klidně vezmi na svůj web. A když na něco narazíš nebo ti něco chybí, hoď mi issue na GitHub nebo napiš na X