Sieć jest często postrzegana jako zdecydowanie dwuwymiarowe medium. I, aby być uczciwym, jest. Właśnie do tego został zaprojektowany.
Co więcej, dodanie grafiki trójwymiarowej, renderowanej na żywo, tradycyjnie wymagało wtyczek. Macromedia dostarczyła nam Shockwave, Unity dała nam Unity Web Player i przez cały czas używaliśmy głównie grafiki 3D do gier.
HTML5, CSS3 i niektóre innowacyjne JavaScript zrobiły jednak wiele, by to zmienić. Och, wciąż jest używany głównie w grach, ale możesz zrobić to jeszcze dalej i łatwiej zintegrować grafikę ze zwykłą stroną.
Oczywiście, nadal mamy obawy związane z użytecznością. Strona, która zależy od grafiki 3D do nawigacji lub istotnych treści, jest wciąż strasznym pomysłem. Jednak w przypadku korzystania z funkcji stopniowego ulepszania, 3D jest realnym, a nawet wydajnym sposobem na podniesienie poziomu.
W tym celu przedstawiam voxel.css .
voxel.css to framework wykorzystujący CSS3 do robienia ciężkich operacji renderowania obiektów 3D. JavaScript jest używany do dodawania interaktywności, uruchamiania animacji i prawie wszystkiego innego.
Cóż, to jest CSS, o którym mówimy. Nie dostaniesz grafiki na poziomie Crysisa. Jak sugeruje nazwa tego frameworku, otrzymujesz dużo kostek. Pomyśl Minecraft w przeglądarce. (I ktoś zbuduje klon Minecraft z tym w trzy ... dwa ...)
Mimo to możesz robić imponujące rzeczy dzięki blokowej grafice. Pomyśl o tym, jako przenoszeniu sztuki 8-bitowej na zupełnie nowy poziom.
Podstawowa implementacja voxel.css wymaga tylko włączenia biblioteki i 15 linii kodu. W ten sposób powstaje wirtualna scena, w której możesz edytować swoje modele, styl wskaż i kliknij.
Następnie możesz wyświetlić te sceny na dowolnej stronie internetowej i animować je według potrzeb.
Użyj PNG do przezroczystości, GIF do animacji lub pliku SVG, aby uzyskać nieograniczoną skalowalność. Użyj JPG z nieznanych powodów lub formatu WebP, ponieważ lubisz rzeczy, które nie są jeszcze zaimplementowane we wszystkich przeglądarkach.
Jest nawet wersja demo wykorzystuje materiał filmowy na żywo z kamery internetowej jako tekstury dla bloków.
Znowu jest to CSS3. Możesz użyć najwyższej mocy renderowania karty graficznej urządzenia (lub układu, w zależności od przypadku), aby wyświetlić swoją pracę. Nie musisz się martwić o przerywaną grafikę na niczym innym, tylko najwolniejszym z urządzeń mobilnych. (W każdym przypadku powinieneś używać fall-back.)
voxel.css to prosty, bezsensowny sposób na uzyskanie trójwymiarowej dobroci w swojej aplikacji internetowej, stronie, witrynie lub grze. Wypróbuj go, obejrzyj dema i sprawdź, czy pasuje do Twojego projektu.