Το 3D σε ολόκληρο τον Ιστό, τις συσκευές, τις οθόνες και την πραγματικότητα έχει αυξηθεί σημαντικά τα τελευταία χρόνια. Το 2020, ωστόσο, έφερε περισσότερες δυνατότητες 3D στον Ιστό με προγράμματα περιήγησης που ενισχύουν την υποστήριξη συσκευών τόσο για WebVR όσο και για WebXR API και χτυπώντας σταθερότητα API. Αυτό σημαίνει ένα πράγμα - θα υπάρχουν περισσότερα 3D στον Ιστό. Από Χρόνος Γροup:
είναι ένα στοιχείο ιστού ανοιχτού κώδικα που φέρνει διαδραστικό, προσβάσιμο περιεχόμενο 3D που βασίζεται σε glTF™ στον ιστότοπό σας με μία μόνο γραμμή HTML, συμπεριλαμβανομένου Τοποθέτηση AR τόσο σε Android όσο και σε iOS. Νέο με v1.1 του είναι ένα API σκηνής-γραφήματος που επιτρέπει τη βασική πρόσβαση στην πηγή του μοντέλου glTF, επιτρέποντας την πραγματοποίηση απλών επεξεργασιών σε στοιχεία 3D με λίγες μόνο γραμμές JavaScript.
Το παραπάνω παράδειγμα προστέθηκε με μία γραμμή κώδικα και το μέγεθος που ταιριάζει στο επιθυμητό πλάτος/ύψος. Είναι δεδομένο ότι έχετε τις δύο γραμμές του Η φόρτωση javascript, αυτή η γραμμή κώδικα εμφανίζει το τρισδιάστατο μοντέλο σας (μορφή .glb ή .gltf) αμέσως. Και αυτό είναι μόνο η αρχή. έχει ένα πλήθος χαρακτηριστικών, ιδιοτήτων css, μεθόδων και συμβάντων που σας επιτρέπουν να επεκτείνετε την τρισδιάστατη αλληλεπίδραση.
Στην πρώτη γραμμή, είναι η δυνατότητα φόρτωσης μοντέλων 3D σε AR από κινητές συσκευές (διαθέσιμο με την κυκλοφορία του Chrome 83 νωρίτερα το 2020). Λειτουργεί και για iOS, ωστόσο, απαιτείται έκδοση USDZ του μοντέλου. Εάν το βλέπετε σε κινητή συσκευή, θα δείτε μια "Προβολή στο χώρο σας" στο παραπάνω παράδειγμα.
Μαζί με όλη τη νέα υποστήριξη είναι η δυνατότητα επεξεργασίας στοιχείων glb/glTF στο πρόγραμμα περιήγησης ιστού και AR. Εάν έχετε ένα μοντέλο glTF ή πρόσβαση σε ένα, μπορείτε δοκιμάστε το πρόγραμμα επεξεργασίας μοντέλων προβολής εδώ (ή φορτώστε το παράδειγμα αστροναύτη). Ακολουθεί ένα γρήγορο βίντεο από το Khronos Group που δείχνει τη βασική λειτουργικότητα του προγράμματος επεξεργασίας.
Να είστε σε επιφυλακή για περισσότερα 3D στον ιστό και, ενώ περιμένετε, ρίξτε μια ματιά στα παραδείγματα στο modelviewer.dev και να το δώσετε μόνοι σας.
