Η εισαγωγή της τρισδιάστατης απόδοσης έχει μεταμορφώσει την αλληλεπίδραση των χρηστών με τις τεχνολογίες του Διαδικτύου. Για αρχή, οι εφαρμογές Ιστού έχουν γίνει πιο καθηλωτικές, παρέχοντας μια συναρπαστική και διαδραστική εμπειρία μέσω του προγράμματος περιήγησης ιστού.
Αυτή η τεχνολογία έχει ήδη υιοθετηθεί με ανυπομονησία από τα πεδία gaming και επαυξημένης/εικονικής πραγματικότητας. Προσφέρει έναν ρεαλιστικό και καθηλωτικό τρόπο αλληλεπίδρασης με εικονικά στοιχεία.
Μάθετε πώς να αποδίδετε τρισδιάστατα αντικείμενα σε μια εφαρμογή React.
Τα βασικά της τρισδιάστατης μοντελοποίησης και προγραμματισμού
Πριν ξεκινήσετε με την απόδοση 3D, υπάρχουν μερικά σημεία που πρέπει να προσέξετε:
- Τα τρισδιάστατα αντικείμενα περιέχουν μεμονωμένα σημεία, ή κορυφές, που ορίζουν τη δομή τους σε τρεις διαστάσεις. Η ένωση αυτών των σημείων δημιουργεί πρόσωπα που συνθέτουν το σχήμα του αντικειμένου στην οθόνη.
- Τα σύγχρονα προγράμματα περιήγησης έχουν την ενσωματωμένη δυνατότητα απόδοσης 3D χρησιμοποιώντας τεχνολογίες όπως το WebGL. Το κάνουν χρησιμοποιώντας τη δύναμη της μονάδας γραφικής επεξεργασίας στο μηχάνημά σας για να αποδώσουν τρισδιάστατα μοντέλα και σκηνές γρήγορα.
- Οποιοδήποτε τρισδιάστατο αντικείμενο που αποδίδει το πρόγραμμα περιήγησής σας αποτελείται από τρία κύρια στοιχεία. Αυτά είναι η σκηνή, η κάμερα και το renderer, και όλα παίζουν καθοριστικό ρόλο. Η σκηνή παρέχει τη βασική πλατφόρμα για τη ρύθμιση όλων των τρισδιάστατων στοιχείων σας, συμπεριλαμβανομένων των φώτων και των καμερών. Η κάμερα σάς επιτρέπει να βλέπετε το τρισδιάστατο αντικείμενο από διάφορες γωνίες. Τέλος, το πρόγραμμα απόδοσης προσαρτά και εμφανίζει τη σκηνή πάνω από ένα στοιχείο HTML καμβά.
Τρισδιάστατη απόδοση με Three.js και React Three Fiber
Three.js είναι μια βιβλιοθήκη JavaScript που μπορείτε να χρησιμοποιήσετε για την απόδοση τρισδιάστατων αντικειμένων σε ένα πρόγραμμα περιήγησης ιστού. Χρησιμοποιώντας τα ενσωματωμένα στοιχεία του, μπορείτε εύκολα να δημιουργήσετε και να αποδώσετε τρισδιάστατα αντικείμενα στο πρόγραμμα περιήγησής σας μαζί με άλλες δυνατότητες της εφαρμογής React.
Το πακέτο react-three-fiber λειτουργεί πάνω από το Three.js. Απλοποιεί τη διαδικασία χρήσης στοιχείων Three.js για τη δημιουργία και απόδοση τρισδιάστατων αντικειμένων στο πρόγραμμα περιήγησης. Είναι ενδιαφέρον ότι παρέχει επίσης έθιμο React hooks που είναι χρήσιμα κατά τη δημιουργία τρισδιάστατων αντικειμένων στο React.
Απόδοση τρισδιάστατων αντικειμένων σε μια εφαρμογή React
Ακολουθήστε τα παρακάτω βήματα για να αποδώσετε ένα απλό τρισδιάστατο σχήμα στο πρόγραμμα περιήγησής σας καθώς και ένα τρισδιάστατο μοντέλο που δημιουργήθηκε από το Blender. Εάν δεν είστε εξοικειωμένοι με το Blender, μάθετε πώς να ξεκινήσετε ως αρχάριος.
Δημιουργήστε μια εφαρμογή React, ενεργοποιήστε το τερματικό σας για να εκτελέσετε την παρακάτω εντολή και εγκαταστήστε τις απαιτούμενες εξαρτήσεις:
npm εγκαταστήστε τρία @react-three/fiber @react-three/dreiΕγκαταστήστε τα πακέτα Three.js, react-three-fiber και react-three-drei. Η βιβλιοθήκη react-three-drei λειτουργεί παράλληλα με το react-three-fiber για τη δημιουργία τρισδιάστατων σκηνών και αντικειμένων.
Αποδώστε ένα σχήμα 3D
Μπορείτε να αποδώσετε ένα απλό σχήμα 3D κουτιού σε ένα πρόγραμμα περιήγησης με πολύ λίγο κώδικα. Ανοιξε το src/app.js αρχείο, διαγράψτε όλο τον κώδικα React του boilerplate και προσθέστε τα εξής:
εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή {Καμβάς} από"@react-three/fiber";
εισαγωγή {OrbitControls} από"@react-three/drei";λειτουργίαΚουτί() {
ΕΠΙΣΤΡΟΦΗ (
<πλέγμα>
<boxBufferGeometryσυνδέω ="γεωμετρία" />
<meshLambertMaterialσυνδέω="υλικό"χρώμα="καυτό ροζ" />
πλέγμα>
)
}
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<divόνομα τάξης="Εφαρμογή">
<divόνομα τάξης="Επικεφαλίδα εφαρμογής">
<Καμβάς>
<OrbitControls />
<ατμοσφαιρικό φωςένταση ={0.5} />
<κέντρο προσοχήςθέση={[10,15,10]} γωνία={0.3} />
<Κουτί />
Καμβάς>
div>
div>
);
}
Αυτός ο κώδικας κάνει τα εξής:
- ο Κουτί Το στοιχείο χρησιμοποιεί τα στοιχεία πλέγματος, boxBufferGeometry και meshLambertMaterial από το react-three-fiber για την απόδοση ενός πλαισίου 3D. Αυτά τα τρία εξαρτήματα λειτουργούν χέρι-χέρι για να δημιουργήσουν το σχήμα του κουτιού.
- Το στοιχείο boxBufferGeometry δημιουργεί το πλαίσιο και αυτός ο κώδικας ορίζει την ιδιότητα χρώματος του στοιχείου meshLambertMaterial σε ζεστό ροζ.
- Στη συνέχεια, αποδίδει το στοιχείο Καμβάς που φιλοξενεί το στοιχείο πλαισίου με φως περιβάλλοντος, έναν προβολέα και το σύνολο ιδιοτήτων στοιχείου ελέγχου τροχιάς.
- Η ιδιότητα στοιχείου περιβάλλοντος φωτός προσθέτει απαλό φως στον καμβά. Το στοιχείο spotLight προσθέτει ένα εστιασμένο φως από μια συγκεκριμένη θέση με γωνία 0,3. Τέλος, το στοιχείο OrbitControls σάς επιτρέπει να ελέγχετε την κάμερα γύρω από το αντικείμενο 3D.
Εισαγάγετε και αποδώστε το στοιχείο app.js στο αρχείο index.js και περιστρέψτε έναν διακομιστή ανάπτυξης για να δείτε τα αποτελέσματα στο πρόγραμμα περιήγησής σας στη διεύθυνση http://localhost: 3000.
Αποδώστε ένα τρισδιάστατο μοντέλο που δημιουργήθηκε από το μπλέντερ
Το Blender είναι ένα εργαλείο ανοιχτού κώδικα που χρησιμοποιείται από δημιουργικά σε διαφορετικούς τομείς για τη δημιουργία τρισδιάστατων μοντέλων, οπτικών εφέ και διαδραστικών τρισδιάστατων εφαρμογών. Μπορείτε να χρησιμοποιήσετε το Blender για να δημιουργήσετε τρισδιάστατα μοντέλα για την εφαρμογή Ιστού σας.
Για αυτό το σεμινάριο, θα αποδώσετε ένα μοντέλο BMW 3D by SRT performance διαθέσιμο στο Sketchfab.
Αναφορά Creative Commons
Για να ξεκινήσετε, κατεβάστε το μοντέλο από το Sketchfab σε GLTF (Μορφή μετάδοσης GL). Αυτή η μορφή καθιστά εύκολη την απόδοση τρισδιάστατων μοντέλων στο πρόγραμμα περιήγησης. Μόλις ολοκληρωθεί η λήψη, ανοίξτε το φάκελο του μοντέλου και μετακινήστε το αρχείο του μοντέλου στον δημόσιο κατάλογο μέσα στην εφαρμογή React.
Τώρα, μεταβείτε στο αρχείο app.js και συμπληρώστε το με τον παρακάτω κώδικα.
- Εισαγάγετε τα ακόλουθα στοιχεία:
εισαγωγή {useGLTF, Stage, PresentationControls} από"@react-three/drei"; - Δημιουργήστε το στοιχείο μοντέλου και προσθέστε τον παρακάτω κώδικα:
λειτουργίαΜοντέλο(στηρίγματα){
συνθ {scene} = useGLTF("/bmw.glb");
ΕΠΙΣΤΡΟΦΗ<πρωτόγονοςαντικείμενο={σκηνή} {... στηρίγματα} />
}εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<divόνομα τάξης="Εφαρμογή">
<divόνομα τάξης="Επικεφαλίδα εφαρμογής">
dpr={[1,2]}
shadows camera={{αγαπημένα: 45}}
στυλ={{"θέση": "απόλυτος"}}
>
ταχύτητα={1,5}
παγκόσμια ζουμ={0.5}
πολικό={[-0.1, Μαθηματικά.ΠΙ / 4]}
>
<Στάδιοπεριβάλλον={μηδενικό}>
<Μοντέλοκλίμακα={0.01} />
Στάδιο>
Στοιχεία ελέγχου παρουσίασης>
Καμβάς>
div>
div>
);
} - Το άγκιστρο useGLTF από τη βιβλιοθήκη React-three-drei ορίζει μια μεταβλητή σκηνής και της εκχωρεί την τιμή του αρχείου μοντέλου που βρίσκεται στη διαδρομή "/bmw.glb". Στη συνέχεια, το στοιχείο επιστρέφει ένα πρωτόγονο αντικείμενο που δημιουργεί τη σκηνή για το τρισδιάστατο μοντέλο.
- Το στοιχείο Canvas αποδίδει τα κύρια στοιχεία που συνθέτουν το μοντέλο, με τις καθορισμένες ιδιότητες, όπως αναλογία pixel συσκευής (DPR), σκιές, γωνία κάμερας και στυλ.
- Στη συνέχεια, καθορίζετε τις ιδιότητες του στοιχείου PresentationControls, όπως η ταχύτητα και το καθολικό ζουμ. Αυτές οι ιδιότητες καθορίζουν τον τρόπο με τον οποίο θα ελέγχετε το μοντέλο στην οθόνη.
- Τέλος, διαμορφώστε το στοιχείο Stage που προσαρτά το μοντέλο στην οθόνη του προγράμματος περιήγησης.
Περιστρέψτε τον διακομιστή ανάπτυξης για να ενημερώσετε τις αλλαγές στην εφαρμογή σας. Θα πρέπει να δείτε το μοντέλο που αποδίδεται στο πρόγραμμα περιήγησής σας.
Απόδοση τρισδιάστατων μοντέλων στην εφαρμογή Ιστού σας
Η απόδοση μοντέλων 3D στις εφαρμογές Ιστού σας μπορεί να προσφέρει πολλά πλεονεκτήματα, όπως τη βελτίωση της εμπειρίας χρήστη παρέχοντας μια πιο ρεαλιστική και διαδραστική αίσθηση 3D. Ως αποτέλεσμα, οι χρήστες μπορούν να αλληλεπιδράσουν καλύτερα με το προϊόν.
Ωστόσο, η απόδοση τρισδιάστατων στοιχείων μπορεί να έχει τα μειονεκτήματά της, όπως να επηρεάζει αρνητικά την απόδοση της εφαρμογής. Τα τρισδιάστατα μοντέλα απαιτούν περισσότερους πόρους για απόδοση, γεγονός που μπορεί να προκαλέσει πιο αργή φόρτωση της εφαρμογής σας.
