Weben ses ofte som et bestemt todimensionelt medium. Og for at være retfærdig er det. Det var det, det var designet til.
Desuden har tilføjelsen af tredimensionel grafik, der er renderet levende, traditionelt krævet plugins. Macromedia gav os Shockwave, Unity gav os Unity Web Player, og hele tiden har vi brugt 3D grafik til spil, for det meste.
HTML5, CSS3 og nogle opfindsomme JavaScript har dog gjort meget for at ændre dette. Åh, det er stadig mest brugt til spil, men du kan tage det videre, og integrere grafikken til et almindeligt websted lettere end nogensinde.
Sikker på, vi har stadig brugbarhedsproblemer. Et websted, der afhænger af 3D-grafik til navigation eller væsentligt indhold, er stadig en forfærdelig ide. Men når det bruges med progressiv forbedring, er 3D en levedygtig og endda ydeevne-venlig måde at tage tingene op i.
Til dette formål præsenterer jeg voxel.css .
voxel.css er en ramme, der bruger CSS3 til at gøre den tunge løftning af gengivelsen af 3D-objekter. JavaScript bruges til at tilføje interaktivitet, udløse animationerne og stort set alt andet.
Nå, det er CSS, vi taler om. Du kommer ikke til at få Crysis-niveau grafik. Som navnet på denne ramme antyder, hvad du får er en masse kuber. Tænk Minecraft i browseren. (Og nogen vil bygge en Minecraft klon med dette i tre ... to ...)
Stadig kan du gøre nogle imponerende ting med blokeret grafik. Tænk på det som at tage 8-bit kunst til et helt nyt niveau.
Den grundlæggende implementering af voxel.css kræver kun optagelse af biblioteket og 15 linjer kode. Dette skaber en savbar virtuel scene, hvor du kan redigere dine modeller, point-and-click stil.
Du kan derefter vise disse scener til enhver webside og animere dem som ønsket.
Brug en PNG til gennemsigtighed, en GIF til animation eller en SVG-fil for ubegrænset skalerbarhed. Brug en JPG af ukendte årsager, eller WebP-formatet, fordi du kan lide ting, der ikke er implementeret i alle browsere endnu.
Der er endda en demo der bruger live footage fra dit webcam som teksturer til blokkene.
Igen er det CSS3. Du kan bruge den overlegne gengivelseskraft på en enheds grafikkort (eller chip, som det er tilfældet) for at vise dit arbejde. Du behøver ikke bekymre dig om hakket grafik på andet end den langsommere af mobile enheder. (Du skal bruge en tilbagekaldelse for dem under alle omstændigheder.)
voxel.css er en simpel, no-nonsense måde at få nogle tredimensionelle godhed til din web app, side, websted eller spil. Prøv det, se på demoerne, og se om det passer til dit projekt.