CSS wird mit voxel.css 3D

Das Web wird oft als ein dezidiert zweidimensionales Medium gesehen. Und um fair zu sein, das ist es auch. Dafür wurde es entwickelt. Darüber hinaus waren für das Hinzufügen dreidimensionaler Grafiken, die live gerendert werden, traditionell Plugins erforderlich. Macromedia gab uns Shockwave, Unity gab uns den Unity Web Player und währenddessen haben wir hauptsächlich 3D-Grafiken für Spiele verwendet. HTML5, CSS3 und einfallsreiches JavaScript haben jedoch viel dazu beigetragen, dies zu ändern. Oh, es wird immer noch hauptsächlich für Spiele verwendet, aber Sie können es noch weiter ausbauen und die Grafiken einfacher als je zuvor in eine normale Website integrieren. Natürlich haben wir immer noch Bedenken hinsichtlich der Benutzerfreundlichkeit. Eine Website, die für die Navigation oder wichtige Inhalte auf 3D-Grafiken angewiesen ist, ist immer noch eine schreckliche Idee. Bei Verwendung mit progressiver Verbesserung ist 3D jedoch eine praktikable und sogar leistungsfreundliche Möglichkeit, noch einen Schritt weiter zu gehen. Zu diesem Zweck präsentiere ich voxel.css. voxel.css ist ein Framework, das CSS3 für die komplexe Darstellung von 3D-Objekten verwendet. JavaScript wird verwendet, um Interaktivität hinzuzufügen, die Animationen auszulösen und so ziemlich alles andere.

Stil

Nun, das ist CSS, über das wir reden. Sie werden keine Grafiken auf Crysis-Niveau erhalten. Wie der Name dieses Frameworks vermuten lässt, erhalten Sie ein viel aus Würfeln. Denken Sie an Minecraft im Browser. (Und jemand wird damit in drei…zwei…einen Minecraft-Klon bauen) Dennoch kann man mit Blockgrafiken einige beeindruckende Dinge tun. Stellen Sie sich vor, Sie heben 8-Bit-Kunst auf ein völlig neues Niveau.

Einfache 3D-Wiedergabe

Die grundlegende Implementierung von voxel.css erfordert lediglich die Einbindung der Bibliothek und 15 Codezeilen. Dadurch wird eine speicherbare virtuelle Szene erstellt, in der Sie Ihre Modelle im Point-and-Click-Stil bearbeiten können. Anschließend können Sie diese Szenen auf jeder Webseite anzeigen und nach Bedarf animieren.

Lesen:  Die besten Android-Launcher, die Ihr Telefon verwandeln

Verwenden Sie einen beliebigen Bildtyp für Texturen

Verwenden Sie ein PNG für Transparenz, ein GIF für Animationen oder eine SVG-Datei für unbegrenzte Skalierbarkeit. Verwenden Sie aus unbekannten Gründen ein JPG oder das WebP-Format, weil Ihnen Dinge gefallen, die noch nicht in allen Browsern implementiert sind. Es gibt sogar eine Demo davon Verwendet Live-Aufnahmen von Ihrer Webcam als Texturen für die Blöcke.

GPU-Beschleunigung

Auch hier handelt es sich um CSS3. Sie können die überlegene Rendering-Leistung der Grafikkarte (bzw. des Chips) eines Geräts nutzen, um Ihre Arbeit anzuzeigen. Sie müssen sich nur auf den langsamsten Mobilgeräten über abgehackte Grafiken Sorgen machen. (Für diese sollten Sie auf jeden Fall einen Fallback verwenden.)

Abschluss

voxel.css ist eine einfache, unkomplizierte Möglichkeit, Ihrer Web-App, Seite, Website oder Ihrem Spiel dreidimensionale Qualität zu verleihen. Probieren Sie es aus, schauen Sie sich die Demos an und finden Sie heraus, ob es für Ihr Projekt geeignet ist.

Aktuelle Artikel:

Empfohlen