Βιβλιοθήκη JavaScript για τη δημιουργία τρισδιάστατων αλληλεπιδράσεων και κινούμενων εικόνων
Ένα API JavaScript ανοιχτού κώδικα που επιτρέπει τη μετατροπή στοιχείων HTML DOM στο διαδραστικό επίπεδο με υφή. Μπορείτε εύκολα να διαχειριστείτε το WebGL και να τοποθετήσετε τα πλέγματα σας σε σχέση με τα στοιχεία DOM της ιστοσελίδας σας.
Το curtains.js είναι μια ελαφριά βιβλιοθήκη JavaScript ανοιχτού κώδικα που δίνει στους προγραμματιστές λογισμικού τη δυνατότητα να μετατρέψουν τα στοιχεία HTML DOM τους σε διαδραστικά επίπεδα με υφή με ευκολία. Η βιβλιοθήκη είναι μικρή σε μέγεθος αλλά πολύ σταθερή, επιτρέποντας στους χρήστες να δημιουργούν εύκολα ισχυρές τρισδιάστατες αλληλεπιδράσεις και κινούμενα σχέδια. Μπορεί να μεταφράσει αβίαστα στοιχεία HTML που περιέχουν εικόνες και βίντεο σε τρισδιάστατα επίπεδα με υφή WebGL, επιτρέποντας στους χρήστες να τα ζωντανεύουν μέσω shaders.
Η βιβλιοθήκη είναι πολύ εύκολη στη χρήση, αλλά πρέπει να έχετε καλές βασικές γνώσεις HTML, CSS, JavaScript και shaders. Ένας shader είναι ένα σύνολο εντολών που εκτελείται στη διοχέτευση γραφικών και λέει στον υπολογιστή πώς να αποδώσει κάθε pixel. Πρέπει επίσης να μάθετε περισσότερα για τους σκιαδιστές κορυφής και θραυσμάτων, τον τρόπο χρήσης των στολών καθώς και τα βασικά σύνταξης GLSL.
Αυτό το curtains.js διατίθεται υπό την άδεια του MIT που σημαίνει ότι είναι δωρεάν για χρήση για προσωπικά και εμπορικά έργα. Ο κύριος στόχος της βιβλιοθήκης είναι να παρέχει έναν εύκολο τρόπο για το χειρισμό του WebGL και την τοποθέτηση των ματιών σας σε σχέση με τα στοιχεία DOM της ιστοσελίδας σας. Το WebGL είναι ένα JavaScript API για απόδοση τρισδιάστατων και δισδιάστατων γραφικών σε πραγματικό χρόνο σε ένα πρόγραμμα περιήγησης.
Ξεκινώντας με το Zen-3d
Ο ευκολότερος τρόπος για να εγκαταστήσετε το curtains.js είναι να χρησιμοποιήσετε το npm. Χρησιμοποιήστε την ακόλουθη εντολή για ομαλή εγκατάσταση.
Εγκαταστήστε το curtains.js μέσω NPM
npm i curtainsjs Διαχείριση σκηνών χρησιμοποιώντας JavaScript
Η βιβλιοθήκη ανοιχτού κώδικα curtains.js έχει συμπεριλάβει χρήσιμες λειτουργίες που σχετίζονται με τη διαχείριση σκηνών και τις σχετικές ιδιότητές της. Η Σκηνή θα συσσωρεύσει όλα τα αντικείμενα που θα σχεδιαστούν, συμπεριλαμβανομένων των επιπέδων και των περασμάτων σκίασης σε διαφορετικούς πίνακες, και θα τα καλέσει με τη σωστή σειρά για να σχεδιαστούν. Μπορείτε εύκολα να επαναφέρετε τις στοίβες αεροπλάνων, να διαγράψετε τη στοίβα τοποθεσιών, να την ξαναφτιάξετε με τα νέα ευρετήρια θέσεων, να προσθέσετε νέα επίπεδα σε μια σκηνή, να αφαιρέσετε ένα αεροπλάνο από μια σκηνή, να αλλάξετε τη θέση ενός αεροπλάνου και ούτω καθεξής.
Handling Renders Properties
Η δωρεάν βιβλιοθήκη curtains.js παρέχει τη δυνατότητα να χειρίζεστε renders μέσα στη δική σας εφαρμογή με ευκολία. Ο χειρισμός της κλάσης Renderer έχει παράσχει αρκετές σημαντικές λειτουργίες που σχετίζονται με το περιβάλλον WebGL, όπως δημιουργία και επαναφορά, επεκτάσεις, εντολές WebGL και άλλα. Μπορεί να χρησιμοποιηθεί για τη δημιουργία ενός κοντέινερ, την προσθήκη ενός καμβά, τον χειρισμό επεκτάσεων WebGL, συμβάντων απώλειας/επαναφοράς περιβάλλοντος και τη δημιουργία ενός αντικειμένου κλάσης σκηνής που θα παρακολουθεί όλα τα προστιθέμενα αντικείμενα. Εκτός από τα παραπάνω, υποστηρίζει επίσης το χειρισμό παγκόσμιων εντολών WebGL, όπως εκκαθάριση σκηνής, δέσμευση buffers καρέ, βάθος ρύθμισης, λειτουργία blend κ.λπ.
Κινούμενη εικόνες και βίντεο μέσω JavaScript
Η βιβλιοθήκη ανοιχτού κώδικα curtains.js δίνει στους προγραμματιστές λογισμικού τη δύναμη να ζωντανεύουν εικόνες και βίντεο μέσα στις δικές τους εφαρμογές με ευκολία. Η βιβλιοθήκη δίνει τη δυνατότητα στους προγραμματιστές να δημιουργούν επίπεδα που περιέχουν εικόνες και βίντεο που λειτουργούν σαν απλά στοιχεία HTML, με θέση και μέγεθος που ορίζονται από κανόνες CSS. Μπορείτε επίσης να χρησιμοποιήσετε πολλές υφές, πολλαπλά επίπεδα, κείμενο καμβά πολλαπλών επιπέδων, υφή πολλαπλών βίντεο και πολλά άλλα.
