Ο ιστός θεωρείται συχνά ένα αποφασιστικά δισδιάστατο μέσο. Και, για να είμαι δίκαιος, είναι. Για αυτό ακριβώς σχεδιάστηκε.
Επιπλέον, η προσθήκη τρισδιάστατων γραφικών, που έγιναν ζωντανά, παραδοσιακά απαιτούσε plugins. Η Macromedia μας έδωσε το Shockwave, η Unity μας έδωσε το Unity Web Player, και όλο αυτό το διάστημα, έχουμε χρησιμοποιήσει τρισδιάστατα γραφικά για παιχνίδια, ως επί το πλείστον.
Το HTML5, το CSS3 και κάποια εφευρετική JavaScript έχουν κάνει πολλά για να αλλάξουν αυτό, ωστόσο. Ω, εξακολουθεί να χρησιμοποιείται κυρίως για παιχνίδια, αλλά μπορείτε να το πάρετε περαιτέρω, και να ενσωματώσετε τα γραφικά σε μια κανονική περιοχή πιο εύκολα από ποτέ.
Σίγουρα, εξακολουθούμε να έχουμε ανησυχίες χρηστικότητας. Μια ιστοσελίδα που εξαρτάται από τα τρισδιάστατα γραφικά για πλοήγηση ή βασικό περιεχόμενο εξακολουθεί να είναι μια φοβερή ιδέα. Ωστόσο, όταν χρησιμοποιείται με την προοδευτική ενίσχυση, το 3D είναι ένας βιώσιμος τρόπος, ακόμη και φιλικός προς την απόδοση, για να πάρει τα πράγματα σε μια εγκοπή.
Για το σκοπό αυτό, παρουσιάζω voxel.css .
Το voxel.css είναι ένα πλαίσιο που χρησιμοποιεί το CSS3 για να κάνει τη βαριά ανύψωση των αντικειμένων 3D rendering. Το JavaScript χρησιμοποιείται για να προσθέσει διαδραστικότητα, να ενεργοποιήσει τα κινούμενα σχέδια και σχεδόν οτιδήποτε άλλο.
Λοιπόν, αυτό είναι το CSS για το οποίο μιλάμε. Δεν πρόκειται να αποκτήσετε γραφικά σε επίπεδο Crysis. Όπως υποδηλώνει το όνομα αυτού του πλαισίου, αυτό που παίρνετε είναι πολλά κύβοι. Σκεφτείτε το Minecraft στο πρόγραμμα περιήγησης. (Και κάποιος θα χτίσει έναν κλώνο Minecraft με αυτό σε τρεις ... δύο ...)
Παρόλα αυτά, μπορείτε να κάνετε μερικά εντυπωσιακά πράγματα με μπλοκ γραφικά. Σκεφτείτε ότι παίρνετε την τέχνη 8-bit σε ένα εντελώς νέο επίπεδο.
Η βασική εφαρμογή του voxel.css απαιτεί μόνο τη συμπερίληψη της βιβλιοθήκης και 15 γραμμές κώδικα. Αυτό δημιουργεί μια εύχρηστη εικονική σκηνή όπου μπορείτε να επεξεργαστείτε τα μοντέλα σας, το στυλ point-and-click.
Στη συνέχεια, μπορείτε να εμφανίσετε αυτές τις σκηνές σε οποιαδήποτε ιστοσελίδα και να τις ζωντανέψετε όπως θέλετε.
Χρησιμοποιήστε ένα PNG για διαφάνεια, ένα GIF για κινούμενα σχέδια ή ένα αρχείο SVG για απεριόριστη κλιμάκωση. Χρησιμοποιήστε ένα αρχείο JPG για άγνωστους λόγους ή τη μορφή WebP, επειδή σας αρέσουν τα πράγματα που δεν έχουν εφαρμοστεί ακόμα σε όλα τα προγράμματα περιήγησης.
Υπάρχει ακόμα και ένα demo χρησιμοποιεί ζωντανά λήμματα από την κάμερά σας ως υφές για τα μπλοκ.
Και πάλι, είναι CSS3. Μπορείτε να χρησιμοποιήσετε την ανώτερη απόδοση απόδοσης της κάρτας γραφικών μιας συσκευής (ή τσιπ, ανάλογα με την περίπτωση) για να εμφανίσετε την εργασία σας. Δεν θα χρειαστεί να ανησυχείτε για τα ασταθή γραφικά για οτιδήποτε άλλο εκτός από τις πιο αργές από τις κινητές συσκευές. (Θα πρέπει να χρησιμοποιείτε ένα back-back για εκείνους σε κάθε περίπτωση.)
Το voxel.css είναι ένας απλός τρόπος για να αποκτήσετε κάποια τρισδιάστατη καλοσύνη στην εφαρμογή, τη σελίδα, τον ιστότοπο ή το παιχνίδι σας. Δοκιμάστε το, δείτε τα demos και δείτε εάν είναι σωστό για το έργο σας.