Verkkoa pidetään usein ratkaisevana kaksiulotteisena välineenä. Ja olla oikeudenmukainen, se on. Sitä varten se on suunniteltu.
Lisäksi, kolmiulotteisen grafiikan lisääminen, joka on tehty suoranaisesti, on perinteisesti edellyttänyt laajennuksia. Macromedia antoi meille Shockwave, Unity antoi meille Unity Web Playerin ja kaiken aikaa olemme käyttäneet enimmäkseen 3D-grafiikkaa pelejä varten.
HTML5, CSS3 ja jotkut kekseliäiset JavaScript ovat tehneet paljon muutosta. Oi, se käytetään edelleen enimmäkseen pelejä, mutta voit jatkaa sitä ja integroida grafiikka säännöllisesti sivustoon helpommin kuin koskaan.
Toki meillä on vielä käytettävyysongelmia. Sivusto, joka riippuu 3D-grafiikasta navigointiin tai olennaiseen sisältöön, on edelleen kauhea idea. Kuitenkin, kun sitä käytetään progressiivisella parannuksella, 3D on elinkelpoinen ja jopa suorituskykyystävällinen tapa ottaa asiat käyttöön.
Tätä varten esitän voxel.css .
voxel.css on kehys, joka käyttää CSS3: ta tekemään 3D-objektien raskasta nostamista. JavaScriptia käytetään lisäämään vuorovaikutteisuutta, laukaisemaan animaatioita ja melko paljon muuta.
Tämä on CSS, josta puhumme. Et saa Crysis-tason grafiikkaa. Kuten tämän kehyksen nimi sanoo, saat paljon kuutiota. Ajattele Minecraft selaimessa. (Ja joku rakentaa Minecraft-kloonin tämän kolmessa ... kaksi ...)
Silti voit tehdä vaikuttavia asioita, joilla on epäselvä grafiikka. Ajattele sitä ottaessasi 8-bittistä taidetta kokonaan uudelle tasolle.
Voxel.css: n perustoiminto edellyttää vain kirjaston sisällyttämistä ja 15 riviä koodia. Tämä luo salatun virtuaalisen kohtauksen, jossa voit muokata malleja, napsauttamalla ja klikkausta.
Voit sitten näyttää nämä kohtaukset mille tahansa verkkosivulle ja animoida niitä haluamallasi tavalla.
Käytä PNG: tä avoimuuteen, GIF animaatioon tai SVG-tiedosto rajoittamattoman skaalautuvuuteen. Käytä JPG: tä tuntemattomista syistä tai WebP-muotoa, koska pidät asioista, joita ei ole vielä toteutettu kaikissa selaimissa.
Siellä on jopa demo käyttää live-kuvaa Web-kamerastasi kuten lohkojen tekstuurit.
Jälleen, se on CSS3. Voit käyttää laitteen grafiikkakortin (tai sirun tapauskohtaisesti) ylivertaista suorituskykyä näyttämään työsi. Sinun ei tarvitse huolehtia epäselvästä grafiikasta mistään muualla kuin hitaimmista mobiililaitteista. (Sinun pitäisi aina käyttää takaiskuja niille.)
voxel.css on yksinkertainen, ei-hölynpölyä tapa saada kolmiulotteinen hyvyys web-sovelluksessasi, -sivullasi, sivustossasi tai pelissä. Kokeile sitä, tutustu demoihin ja katso, onko se sopiva projektiisi.