Pás je často považován za rozhodně dvojrozměrné médium. A abych byl spravedlivý, je to tak. To je to, proč byla určena.

A co víc, přidání trojrozměrné grafiky, poskytované živě, tradičně vyžaduje pluginy. Macromedia nám poskytla Shockwave, Unity nám poskytla jednotku Web Player a po celou dobu jsme většinou používali 3D grafiku pro hry.

HTML5, CSS3 a některé vynalézavé JavaScriptoři to ale hodně změnily. Oh, stále se nejčastěji používají pro hry, ale můžete si je dále užívat a začlenit grafiku do běžného místa snadněji než kdy jindy.

Jistě, stále máme obavy ohledně použitelnosti. Místo, které závisí na 3D grafice pro navigaci nebo základní obsah, je stále hrozným nápadem. Při použití s ​​progresivním vylepšením je však 3D životaschopný a dokonce i výkonný způsob, jak přenést věci do zářezu.

Za tím účelem vám představuji voxel.css .

voxel.css je rámec, který používá CSS3 k těžkému zvedání vykreslování 3D objektů. JavaScript se používá k přidávání interaktivity, spouštění animací a téměř všeho ostatního.

Styl

No, toto je CSS, o kterém mluvíme. Nebudete mít grafiku na úrovni Crysis. Jak naznačuje název tohoto rámce, dostanete spoustu kostek. Myslete na Minecraft v prohlížeči. (A někdo postaví klon Minecraft s tím ve třech ... dvou ...)

Stále můžete dělat některé impozantní věci s obtížnou grafikou. Přemýšlejte o tom, že jste udělali 8bitové umění na zcela novou úroveň.

Snadné 3D vykreslování

Základní implementace programu voxel.css vyžaduje pouze zahrnutí knihovny a 15 řádků kódu. Vytváří se tak spolehlivá virtuální scéna, ve které můžete upravovat své modely, styly typu point-and-click.

Tyto scény můžete pak zobrazit na libovolné webové stránce a animovat je podle potřeby.

Použijte libovolný typ obrázku pro textury

Použijte PNG pro průhlednost, animaci GIF nebo soubor SVG pro neomezenou škálovatelnost. Použijte soubor JPG z neznámých důvodů nebo formát WebP, protože se vám líbí věci, které dosud nebyly implementovány ve všech prohlížečích.

Je to dokonce i demo používá živé záběry z vaší webové kamery jako textury pro bloky.

Zrychlení GPU

Opět je to CSS3. Můžete použít vynikající vykreslování grafické karty zařízení (případně čipu), aby se zobrazila vaše práce. Nebudete se muset starat o roztříštěnou grafiku na nic než na nejpomalejší mobilní zařízení. (Měli byste v každém případě využívat zpětnou vazbu.)

Závěr

Voxel.css je jednoduchý, ne-nesmyslný způsob, jak dostat trochu trojrozměrné dobro do vaší webové aplikace, stránky, webu nebo hry. Vyzkoušejte to, podívejte se na ukázky a ujistěte se, zda je pro váš projekt správné.