Jednou z výhod CSS 3D je možnost stylovat libovolné HTML prvky, včetně iframe nebo textarea. Oba tyto prvky si ukážeme v následujícím příkladu. A když už jako iframe používáme YouTube video, které se bez JavaScriptu neobejde, můžeme do scény přidat i vlastní JavaScript.
Editor JavaScriptu v našem CADu umožní uživatelům naprogramovat interakce s aktivními prvky scény. To je další rozdíl oproti běžným CAD programům, které s webovými technologiemi příliš nepočítají a neumožňují přidat do modelu JavaScript. Pro nás je to ale další zajímavý úkol, který posouvá náš CAD směrem ke komplexnějším aplikacím.
Součástí našeho CADu bude i editor JavaScriptu
V tomto příkladu jsem pomocí JavaScriptu zobrazil také textarea, kde mohou uživatelé zadávat JSON s konfigurací aplikace.
Celý proces, který nás čeká, začíná vypadat trochu komplikovaně. Nejprve vytvoříme nový programovací jazyk, který poběží jak na PHP serveru, tak v prohlížeči. To je výzva, kterou by většina lidí označila za nemožnou. Abychom ukázali jeho schopnosti, naprogramujeme v něm rovnou CAD — a ne ledajaký. Ten bude umět pracovat i exportovat do CSS 3D, což se s obecnými tvary zatím nikomu nepodařilo.
Součástí CADu bude možnost zadat, editovat a ladit JavaScript, který se stane součástí výstupu. Ani to nebude jednoduché. A právě v tomto JavaScriptu si pak uživatelé budou psát vlastní programy, kterými bude 3D scéna reagovat na vstupy nebo komunikovat s uživatelem.
Pěkný plán, že? Je jasné, že budeme muset vymýšlet hodně kreativní řešení.
Všimněte si, že jak YouTube přehrávač, tak textarea editor fungují z normální i opačné strany — ať už jde o iframe nebo textarea. Nicméně editace JSONu z vnější strany je opravdu jen pro pokročilé uživatele. :-) Nastavení scény se spustí po kliknutí na ikonu „hamburgeru“ — a jak zadat správnou část URL do JSONu by mělo být každému programátorovi jasné.
PS: Modely zobrazené v "TV" nejsou tvořeny pomocí CSS 3D a animací. Tak výkonné počítače zatím nemáme. :-)
Co dál? Možnost přidávat do scén vlastní JavaScript otevírá cestu k mnohem živějším interakcím. Ale co když chceme složitější animace, které nejsme schopni napsat z hlavy jako běžné @keyframes? V příštím článku si ukážeme, jak využít makrojazyk ke generování @keyframes a vytvářet tak i velmi komplexní pohyby bez zbytečné námahy.