Πώς να λιώσει ένα 3D αντικείμενο με τρεις.js

Sep 13, 2025
πως να

Ο ιστός όπως το γνωρίζουμε, αλλάζει συνεχώς και εξελίσσεται. Αυτό που εξακολουθούμε να θυμόμαστε ως ένα απλό και απλό μέσο κέρδισε μια άλλη διάσταση πριν από λίγα χρόνια, και δεν μοιάζει σαν να πρόκειται να σταματήσει εκεί. Για ένα οικοδόμος ιστότοπου , ποια ήταν η έναρξη των οπτικών εφέ επισημασμένης μυθοπλασίας είναι πλέον δυνατή σε ένα δισκίο που βρίσκεται στον καναπέ σας και υπάρχουν κτίρια που καλύπτονται σε διαδραστικές εγκαταστάσεις μεγάλης κλίμακας που είναι πραγματικά πλήρες οθόνης Google Chrome Windows.

Ακολουθήστε τα παρακάτω βήματα για να μάθετε πώς να δημιουργήσετε ένα ρεαλιστικό αποτέλεσμα τήξης με τρία .js.

01. Ρυθμίστε τη σκηνή Three.js

Πηγαίνετε μπροστά και αρπάξτε τη βιβλιοθήκη Three.js και συμπεριλάβετε την στον ιστότοπό σας. Θα χρειαστεί να κερδίσετε το webglrenderer, τη σκηνή και την Perspectivecamera. Μετά από αυτά είναι στιγμιαία, θα χρειαστεί να κάνετε τη σκηνή Αιτήματος .

02. Προσθέστε φωτισμό στη σκηνή

Στη συνέχεια, τα φώτα πρέπει να προστεθούν στην 3D σκηνή. Σε αυτό το παράδειγμα, θα χρησιμοποιηθούν δύο φώτα: ένα φως περιβάλλοντος και ένα σημείο φωτός. Το φως του περιβάλλοντος χρησιμεύει ως ένα συνολικό παγκόσμιο χρώμα για τη σκηνή, ενώ το φως σημείο θα εκπέμπει το φως που μειώνεται με απόσταση. Αυτό θα δώσει τη σκηνή κάποια αντίθεση. 

 var ambientlight = νέος τριών.Ambientlight (0xCCCCCC);
scene.add (Ambientlight);
var roadlight = νέος τριών.Boadlight (0xffffff, 1);
poidlight.position.Set (10, 5, 0).

03. Τοποθετήστε το μοντέλο 3D

Τώρα που έχει ρυθμιστεί η σκηνή, το μοντέλο 3D πρέπει να φορτωθεί. Το μοντέλο μπορεί να φορτωθεί χρησιμοποιώντας οποιαδήποτε υποστηριζόμενη μορφή (JSON, OBJ, DAE κ.λπ.). Παρακάτω είναι ένα παράδειγμα φόρτωσης ενός μοντέλου DAE. Σε αυτό το παράδειγμα, είναι πολύ σημαντικό το μοντέλο να έχει αρκετά πολύγωνα για να εκτελέσει τροποποιήσεις κορυφής.

Το κρανίο ελάφια που χρησιμοποιείται σε αυτό το παράδειγμα έχει 3.500 polys. Εάν ο πολυικός αριθμός είναι πολύ χαμηλός, το animations vertex θα είναι πολύ σαφές και παραμορφωμένο. 

 φορτωτής = νέο τρία.colladaloader ();
Loader.Lload ('dae / deer_skull / deer_skull.dae', onloadCompleTeHandler).

04. Προσθέστε ένα χάρτη χτύπημα

Οι χάρτες Bump είναι ιδανικοί για την προσθήκη βάθους στις υφές σας με χαμηλό κόστος. Μόλις δημιουργήσετε την εικόνα του χάρτη χτύπημα, μπορείτε να το εφαρμόσετε απλά την εφαρμογή του στο υλικό όπως παρακάτω. Επίσης, θα χρειαστεί να προσαρμόσετε την κλίμακα του χάρτη χτύπημα για να τοποθετήσετε την κλίμακα του μοντέλου σας. 

 Υλικό.bumpmap = 'img / deer_skull / deer-bump.jpg';
Υλικό.Bumpscale = .008;

05. Χρησιμοποιήστε το animator vertex

Καθ 'όλη τη διάρκεια του ιστότοπού του, ο Johnny χρησιμοποιεί μια επέκταση παιχνιδιού από τον Jerome Etienne για Three.js που καθιστά ευκολότερο να κάνετε κινούμενα σχέδια κορυφής. Αυτή η επέκταση επιτρέπει την εύκολη πρόσβαση σε κάθε κορυφή ενός μοντέλου με το ρυθμό καρέ, καθιστώντας το απλό για να χειριστεί τις κορυφές χρησιμοποιώντας κυματομορφές.

ο Επέκταση κινούμενων εικόνων Vertex είναι διαθέσιμη μέσω του github του Etienne. Θα προχωρήσουμε περισσότερο στο πώς χρησιμοποιείται στα επόμενα βήματα.

Users can interact with the 3D model and view from multiple angles

Οι χρήστες μπορούν να αλληλεπιδρούν με το μοντέλο 3D και την προβολή από πολλαπλές γωνίες

06. Ξεκινήστε την τήξη

Η τήξη ενός κομματιού γεωμετρίας περιλαμβάνει μερικά συνολικά βήματα. Πρώτον, κάθε σημείο ωθείται συνεχώς προς τα κάτω. Όταν ένα σημείο φτάσει στο έδαφος, ωθαίνει προς τα έξω χρησιμοποιώντας αυτό που θα καλέσουμε ένα «διάνυσμα ώθησης».

Στη συνέχεια, θα δώσουμε στα σημεία που συγκεντρώνονται κατά μήκος του πυθμένα πάχος, οπότε η λιωμένη γεωμετρία δεν είναι εντελώς επίπεδη. Προκειμένου να επιτευχθεί αυτό, ο Johnny έχει μεταφερθεί ο κώδικας από τον Sky Shader του Skeel Lee στο Houdini και την τροποποίησε.

07. Ξεκινήστε να μετακινήσετε τις κορυφές προς τα κάτω

Παρακάτω είναι ένα παράδειγμα χρήσης της χρήσης του animator Vertex για να πιέσετε συνεχώς τη γεωμετρία ενός μοντέλου προς το έδαφος. 

 var vertexanimation = new threex.vertexanimation (γεωμετρία, λειτουργία (προέλευση, θέση, δέλτα, τώρα) {position.y - = meltamount * moderhheight;}

Αυτό θα ωθήσει τα σημεία κάτω από το ρυθμό που ορίζεται από το λυπώ . Θυμηθείτε επίσης να καλέσετε "ενημέρωση" στην κυκλοφορία του Vertex σας στον κύκλο καθιστών.

08. Προσδιορίστε τον φορέα ώθησης

Όταν ένα σημείο έχει φτάσει στο έδαφος, πρέπει να ωθηθεί προς τα έξω για να επιτευχθεί ένα αποτέλεσμα τήξης. Ο παρακάτω κώδικας προσδιορίζει ποια κατεύθυνση στους άξονες Χ και Z για να σπρώξει την κορυφή έτσι ώστε να έχετε μια ομοιόμορφη μετατόπιση. Η υπόθεση εξασφαλίζει ότι μόνο τα σημεία που έχουν φτάσει στα χαμηλότερα όρια του μοντέλου (το έδαφος) ωθούνται προς τα έξω. 

Εάν (θέση.y & lt; box.min.y) {
  var centroid = box.max.clone (). Προσθήκη (box.min.clone ()). DividesCalar (2.0);
pushvector = θέση.clone (). Υπότιμο (κεντροειδές);
pushvector.y = 0; }

09. Κάντε το τήγμα να αισθάνεται φυσικό

Ο παρακάτω κώδικας χρησιμοποιεί θόρυβο για να δημιουργήσει τυχαιότητα στην κίνηση, έτσι ώστε το τήγμα να αισθάνεται οργανικά. Οι μεταβλητές θορύβου μπορούν να τσιμπήσουν για να επιτύχουν το επιθυμητό αποτέλεσμα. Ο θόρυβος εφαρμόζεται στη συνέχεια στον φορέα ώθησης μαζί με λυπώ και εξαπλώνω για τον έλεγχο του ρυθμού και του μεγέθους της λιωμένης πισίνας. Αυτός ο εξωτερικός διάνυσμα υπολογίζεται τελικά και στη συνέχεια εφαρμόζεται στην ίδια την κορυφή. 

 VAR N = NOISEAMPlitude * Generator.getval ((θέση.x) * θορυβώδης + θορυβωδία);
var outwardvector = pushvector.multiplyplyscalar ((((meltamount * spreadmount) + n) * outwardspeed);
Θέση.Δ.Δ. (εξωτερικούς χώρους).

10. Δώστε το λιωμένο πάχος της πισίνας

Ο κωδικός που εξηγείται μέχρι στιγμής θα επιτύχει το αποτέλεσμα τήξης, αλλά δύο πράγματα είναι λάθος με αυτό. Πρώτον, η πισίνα θα αισθάνεται αρκετά επίπεδη, επειδή όλα τα σημεία έχουν λειώσει στην ίδια θέση y. Δεύτερον, δεδομένου ότι όλοι μοιράζονται το ίδιο έτος, πάρα πολλά σημεία θα στοιβάζονται στο ίδιο ύψος, το οποίο μπορεί να προκαλέσει τρεμοπαίζει. Για να αποφύγετε αυτό, εφαρμόζεται πάχος κατά την τιμή τήγματος: 

 Θέση.y + = meltamount * poolthickness;

11. Δοκιμάστε το σε άλλα μοντέλα

Με τον παραπάνω κώδικα, οποιοδήποτε μοντέλο με αρκετά πολυγώνια μπορεί να λιωθεί. Κατεβάστε ένα αρχείο zip έξω από τον κώδικα εδώ και να ανταλλάξετε το μοντέλο με οτιδήποτε θέλετε. Καλα να περνατε!

Αυτό το άρθρο εμφανίστηκε αρχικά στο Σχεδιαστής ιστοσελίδων Τεύχος 265. Αγοράστε το εδώ .

Σχετικά Άρθρα:

  • Δημιουργία διαδραστικών τρισδιάστατων οπτικών με τρία
  • Τα καλύτερα εργαλεία χρώματος για τους σχεδιαστές ιστοσελίδων
  • Προσέξτε την κοπτική άκρη του σχεδιασμού ιστοσελίδων

πως να - Τα πιο δημοφιλή άρθρα

Chiaroscuro Art: Ένας οδηγός βήμα προς βήμα

πως να Sep 13, 2025

Κάνοντας το Chiaroscuro Art είναι όλα σχετικά με τη χρήση της σύνθεσης του φωτός και της σκιάς για να δημιουργήσ..

Πώς να αφαιρέσετε ένα φόντο στο Photoshop

πως να Sep 13, 2025

Σελίδα 1 από 4: Το εργαλείο Magic Wand Το εργαλείο Magic Wand Τα εργ..

Βάλτε μια ενεργητική θαλασσογραφία σε έλαια

πως να Sep 13, 2025

Υλικά Το Sarah ζω..

Δημιουργήστε οργανικές υφές σε μελάνι

πως να Sep 13, 2025

Σχέδιο με μελάνι παράγει τεράστιες δυνατότητες. Υπάρχουν απλού�..

Πώς να δημιουργήσετε ρεαλιστικά CG πανί

πως να Sep 13, 2025

Όταν εργάζεστε με ύφασμα και υφάσματα σε 3D, μπορεί να είναι δύσκολο να �..

Δημιουργήστε μια επίδραση splash στην realflow

πως να Sep 13, 2025

Σελίδα 1 από 2: Σελίδα 1 Σελίδα 1 Σελίδα 2 ..

Τα μυστικά της εκπλήρωσης ενός δημιουργικού σχεδιασμού Σύντομη

πως να Sep 13, 2025

Ένας από τους δασκάλους μου μου είπε κάποτε ότι αν ήταν κλειδωμένο στη φυλακή για το υπόλοιπο της ζωής το..

Πώς να χρησιμοποιήσετε τη φωτογραφία Stock Δημιουργήστε δημιουργικά μέσα στο σχεδιασμό σας

πως να Sep 13, 2025

Αντί να είναι μια τελευταία λύση, η απεικόνιση των αποθεμάτων μπορεί κ�..

Κατηγορίες