Das Netz wird oft als entschieden zweidimensionales Medium angesehen. Und um fair zu sein, ist es so. Dafür wurde es entwickelt.
Hinzu kommt, dass das Hinzufügen von dreidimensionalen Grafiken, die live gerendert werden, traditionell Plugins erfordert. Macromedia gab uns Shockwave, Unity gab uns den Unity Web Player, und während der ganzen Zeit haben wir hauptsächlich 3D-Grafiken für Spiele verwendet.
HTML5, CSS3 und einige erfinderische JavaScript haben jedoch viel getan, um dies zu ändern. Oh, es wird immer noch hauptsächlich für Spiele verwendet, aber Sie können es weiterführen und die Grafiken einfacher als je zuvor in eine normale Website integrieren.
Sicher, wir haben immer noch Bedenken hinsichtlich der Benutzerfreundlichkeit. Eine Website, die auf 3D-Grafiken für Navigation oder wesentliche Inhalte angewiesen ist, ist immer noch eine schreckliche Idee. Wenn es jedoch mit einer progressiven Verbesserung verwendet wird, ist 3D eine praktikable und sogar leistungsfreundliche Möglichkeit, Dinge auf eine neue Stufe zu heben.
Zu diesem Zweck präsentiere ich voxel.css .
voxel.css ist ein Framework, das CSS3 verwendet, um das Rendern von 3D-Objekten zu vereinfachen. JavaScript wird verwendet, um Interaktivität hinzuzufügen, die Animationen auszulösen und so ziemlich alles andere.
Nun, das ist CSS, von dem wir sprechen. Du wirst keine Crysis-Level-Grafiken bekommen. Wie der Name dieses Frameworks andeutet, erhalten Sie eine Menge Würfel. Denk Minecraft im Browser. (Und jemand wird einen Minecraft-Klon mit diesem in drei ... zwei ... bauen)
Dennoch können Sie beeindruckende Grafiken mit blockartigen Grafiken erstellen. Stellen Sie sich vor, dass 8-Bit-Kunst ein völlig neues Niveau erreicht.
Die grundlegende Implementierung von voxel.css erfordert nur die Einbeziehung der Bibliothek und 15 Zeilen Code. Dies erstellt eine speicherbare virtuelle Szene, in der Sie Ihre Modelle bearbeiten können, mit Zeigen-und-Klicken-Stil.
Sie können diese Szenen dann auf jeder Webseite anzeigen und sie wie gewünscht animieren.
Verwenden Sie ein PNG für Transparenz, ein GIF für Animation oder eine SVG-Datei für unbegrenzte Skalierbarkeit. Verwenden Sie ein JPG aus unbekannten Gründen oder das WebP-Format, weil Sie Dinge mögen, die noch nicht in allen Browsern implementiert sind.
Es gibt sogar eine Demo verwendet Live-Aufnahmen von Ihrer Webcam als Texturen für die Blöcke.
Wieder ist es CSS3. Sie können die überlegene Renderleistung der Grafikkarte eines Geräts (bzw. des Chips) verwenden, um Ihre Arbeit anzuzeigen. Sie müssen sich keine Sorgen über abgehackte Grafiken machen, außer auf den langsamsten mobilen Geräten. (Sie sollten auf jeden Fall einen Fallback verwenden.)
voxel.css ist ein einfacher, geradliniger Weg, um dreidimensionale Schönheit in Ihre Web-App, Seite, Website oder Spiel zu bekommen. Probieren Sie es aus, schauen Sie sich die Demos an und sehen Sie, ob es für Ihr Projekt richtig ist.