3D mockup brožury
Náhled tiskové brožury z obrázků stran, ve 2D i jako 3D stoh listů s listováním.
- PROJ-07
- Webová aplikace · 3D · 2026
- Kód
- 571 řádků, 1 soubor
- Vazby
- 4 typy
- Build
- žádný, čisté HTML
- AI nástroje
- Claude Code
Vyzkoušej si to
Živá aplikace přímo na stránce: přetáhni do ní obrázky stran (JPG/PNG), zvol vazbu a tlačítkem 3D přepni na stoh listů. Šipkami listuješ, myší otáčíš.
Obrázky se nikam nenahrávají, vše běží jen v prohlížeči.
01 · Problém
Před tiskem katalogu bylo potřeba ukázat, jak bude brožura vypadat svázaná: které strany tvoří dvoustranu a jak působí vazba. Mockup se navíc musel dělat znovu po každé opravě strany.
02 · Role AI
Postaveno s Claude Code: 3D stoh listů v Three.js, ohyb listu při otáčení a mapování textur stran. Pravidla párování stran a typy vazeb jsem určil podle praxe z přípravy tisku.
03 · Co aplikace umí
- Nahrání stran přetažením, dvoustrany se automaticky rozpůlí
- Párování jako v InDesignu (1-2, 3-4) i zavřená brožura s obálkou
- Vazba: sešitá sponkou, lepená, kroužková, plochý náhled
- 3D stoh listů: otáčení kamerou, ohyb listu při listování, nastavitelná tloušťka papíru
- Pozadí, lesklý papír, textura papíru, formáty A, DL, čtverec
- Export aktuálního pohledu nebo všech dvoustran do PNG
- Vše běží v prohlížeči, obrázky se nikam nenahrávají
04 · Výsledek
Mockup katalogu je hotový za pár sekund. Po opravě strany stačí obrázek nahrát znovu.
Pro technickou praxi
Kontrola tiskových podkladů před tiskem: vazba, pořadí stran a dvoustrany jsou vidět dřív, než se cokoli vytiskne.
Screenshoty z aplikace
