three.js
Βιβλιοθήκη JavaScript για τρισδιάστατες μορφές αρχείων
API JavaScript ανοιχτού κώδικα για ανάγνωση, γραφή και απόδοση μορφών αρχείων WebGL, FBX, Collada καθώς και OBJ μέσω Δωρεάν βιβλιοθήκης 3D.
Το three.js είναι μια εύχρηστη, καθαρή 3d βιβλιοθήκη ανοιχτού κώδικα JavaScript που δίνει στους προγραμματιστές λογισμικού τη δυνατότητα να αποδίδουν αρχεία WebGL. Η βιβλιοθήκη three.js προσφέρει προγράμματα φόρτωσης για πολλές μορφές αρχείων όπως FBX, Collada καθώς και OBJ, αλλά η προτεινόμενη μορφή για εισαγωγή και εξαγωγή δεδομένων είναι η glTF. Το υπέροχο με τη μορφή αρχείου glTF είναι ότι είναι πολύ συμπαγής και μπορεί να μεταδοθεί εύκολα και επίσης φορτώνεται πολύ γρήγορα.
Η βιβλιοθήκη υποστηρίζει πολλά σημαντικά χαρακτηριστικά που σχετίζονται με τρισδιάστατα μοντέλα, όπως δημιουργία σκηνής, φόρτωση μοντέλων 3D, δημιουργία κειμένου, σχεδίαση γραμμών, ρύθμιση κάμερας, δημιουργία γεωμετρικού κύβου, προσθήκη κύβου στη σκηνή, απόδοση της σκηνής, προσθήκη θυρίδας προβολής σε στοιχείο, και πολλά άλλα. Υπάρχουν διαφορετικές κάμερες που χρησιμοποιούνται στη βιβλιοθήκη three.js.
Με μια ματιά
Μια επισκόπηση των λειτουργιών του three.js.
- Δημιουργήστε τρισδιάστατες σκηνές
- Φόρτωση μοντέλων 3D
- Ζωγραφίζω γραμμές
- Διαβάστε/γράψτε FBX
- Διαβάστε/γράψτε Collada
- Μετατροπή σκηνών 3D
- Εξαγωγή δεδομένων σε glTF
- χειρισμός εξαρτημάτων
- χειρίζονται υφές
Το three.js υποστηρίζει δημοφιλείς μορφές αρχείων 3D που αναφέρονται παρακάτω.
Πλατφόρμα Ανεξαρτησίας
Το three.js μπορεί να εκτελεστεί σε οποιοδήποτε σύγχρονο πακέτο JavaScript, η πιο δημοφιλής επιλογή είναι το webpack.
- JavaScript
Ξεκινώντας με το three.js
Ο ευκολότερος τρόπος εγκατάστασης του three.js είναι χρησιμοποιώντας το npm. Χρησιμοποιήστε την ακόλουθη εντολή για ομαλή εγκατάσταση.
Εγκαταστήστε το three.js μέσω NPM
npm install --save three Δημιουργία σκηνής χρησιμοποιώντας JavaScript
Η βιβλιοθήκη ανοιχτού κώδικα three.js έχει παράσχει υποστήριξη για τη δημιουργία μιας τρισδιάστατης σκηνής για την περιστροφή ενός κύβου μέσα στη δική τους εφαρμογή JavaScript. Για να εμφανίσουμε οτιδήποτε με το three.js χρειαζόμαστε σκηνή, κάμερα και renderer. Μπορείτε να χρησιμοποιήσετε διαφορετικές κάμερες και την ιδιότητά τους για να ολοκληρώσετε τη σκηνή. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε μια παρουσία απόδοσης και να ορίσετε το μέγεθος στο οποίο θέλουμε να αποδίδει την εφαρμογή μας. Μπορείτε να διατηρήσετε τη χαμηλότερη ή υψηλότερη ανάλυση. Τέλος, προσθέτετε το στοιχείο renderer (<canvas>) στο έγγραφό σας HTML. Μπορείτε εύκολα να δημιουργήσετε έναν κύβο χρησιμοποιώντας το BoxGeometry και χρησιμοποιώντας το υλικό για να τον χρωματίσετε. Μετά από αυτό, χρειάζεστε ένα Mesh που μπορεί να εισαχθεί στη σκηνή και να μετακινηθεί σύμφωνα με τις ανάγκες σας.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and καθιστών. You can use different cameras and their attribute to complete the scene. Next, you can use a καθιστών instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the καθιστών element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to your need.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Πλέγμα that can be inserted into the scene and moved according to your need.
Φόρτωση μοντέλων 3D μέσω JavaScript
Η βιβλιοθήκη open source three.js επιτρέπει στους προγραμματιστές λογισμικού να φορτώνουν τρισδιάστατα μοντέλα μέσα στη δική τους εφαρμογή με μόνο μερικές γραμμές κώδικα JavaScript. Τα τρισδιάστατα μοντέλα είναι διαθέσιμα σε εκατοντάδες μορφές αρχείων. Κάθε μοντέλο έχει διαφορετικούς σκοπούς, διάφορα χαρακτηριστικά και ποικίλη πολυπλοκότητα. Πρώτα, πρέπει να έχετε έναν φορτωτή και μετά από αυτό, θα μπορείτε να φορτώσετε τη σκηνή.
Σχεδιάστε γραμμές σε ένα διάγραμμα
Η βιβλιοθήκη ανοιχτού κώδικα three.js έχει παράσχει υποστήριξη για τη σχεδίαση γραμμών ή κύκλων μέσα στη δική τους εφαρμογή JavaScript. Αρχικά πρέπει να ρυθμίσουμε το renderer, τη σκηνή και την κάμερα. Μετά από αυτό, πρέπει να ορίσετε το υλικό και μπορείτε να χρησιμοποιήσετε LineBasicMaterial ή LineDashedMaterial. Μετά το υλικό, θα χρειαστούμε γεωμετρία με μερικές κορυφές. Σχεδιάζονται γραμμές μεταξύ κάθε διαδοχικού ζεύγους κορυφών.
