Τα τελευταία δύο χρόνια, υπήρξε έκρηξη σε τόκους που περιβάλλουν τις τεχνολογίες VR και AR. Το τελευταίο μεγάλο πράγμα στο
πειραματικό σχέδιο
, AR έχει επίσης φτάσει στο διαδίκτυο, αλλά με αυτή τη νέα τεχνολογία έρχεται νέες δεξιότητες και τώρα αισθάνεται σαν την άγρια δύση χωρίς σημαντικά πρότυπα που θα ακολουθήσουν.
Η δυνατότητα εμφάνισης 3D στο διαδίκτυο δεν είναι τίποτα νέο, αλλά αν το αποφύγετε, τότε πρέπει να πηδήσετε σε τεχνολογίες όπως τρεις.js ή ένα πλαίσιο (ρίξτε μια ματιά στο roundup μας
Ar εργαλεία για να δοκιμάσετε
για μια πλήρη λίστα).
Οποιοδήποτε επίπεδο δεξιοτήτων βρίσκεστε, δεν θα κάνει μεγάλη διαφορά αν δεν έχετε κάποιο αξιοπρεπές περιεχόμενο. Σκεφτείτε τις κατάλληλες περιπτώσεις χρήσης για το AR πριν πηδήσετε. Σε αυτό το άρθρο, θα σας δείξουμε πώς να δημιουργήσετε μια εμπειρία πολλαπλών δεικτών AR.
Νιώστε ότι το επίπεδο δεξιοτήτων σας δεν είναι αρκετά πάνω σε αυτό; ΕΝΑ
οικοδόμος ιστότοπου
θα δημιουργήσει έναν ιστότοπο για εσάς χωρίς τη φασαρία. Ή αν καταδύεστε με μια πολύπλοκη τοποθεσία, πάρτε το
web hosting
σωστά.
Χρησιμοποιώντας πολλαπλούς δείκτες, είναι δυνατό να εμφανιστούν διαφορετικά στάδια μιας διαδικασίας ή οποιοδήποτε μοναδικό περιεχόμενο με βάση αυτόν τον δείκτη. Σε αυτό το παράδειγμα, η εφαρμογή μας θα διερευνήσει τον κύκλο του νερού. Μετάβαση στη σελίδα 3 για να μάθετε πώς να δημιουργήσετε ένα προσαρμοσμένο Marker AR.
01. Ξεκινήστε
Ανοιξε το
αρχή
Φάκελος στο IDE σας και μέσα στο
index.html
σελίδα Βρείτε τις ετικέτες δέσμης ενεργειών. Όλος ο κώδικας στο σεμινάριο θα πάει μέσα σε αυτά. Για να ελέγξετε την εφαρμογή, θα χρειαστεί να διαθέσετε ένα διακομιστή και εάν θέλετε να δοκιμάσετε σε ένα τηλέφωνο, θα χρειαστεί να φιλοξενήσετε τα αρχεία σε διακομιστή HTTPS. Προσθέστε τις αρχικές μεταβλητές στις ετικέτες δέσμης ενεργειών:
var model1, model2, model3, count = 0,
σωματίδια, ιδιαίτερα, σωματίδια, σωματίδια.
VAR φορτωτής = Νέο τρία.colladaloader ();
Για να κάνετε το έργο σκηνής AR, θα φορτωθεί ένα μοντέλο. Θα δείτε ότι μόλις φορτωθεί, αποθηκεύεται στη μεταβλητή
Μοντέλο1
. Αυτό στη συνέχεια κλιμακωθεί και κλωνοποιείται δύο φορές για τα τρία βήματα. Αντί να φορτώσετε τρία διαφορετικά μοντέλα, όλες οι ρυθμίσεις σε ένα μοντέλο θα γίνουν σε κώδικα για να το φορτώσετε γρήγορα στο κινητό.
Στο πρώτο μοντέλο, το σύννεφο θα βρεθεί στη σκηνή και αυτό θα είναι διασκεδαστικό σε μια νέα θέση, έτσι ώστε το σύννεφο να βγει από τη θάλασσα. Αυτό ρυθμίζεται για να επαναλάβει για πάντα και θα χρειαστούν οκτώ δευτερόλεπτα για το Tween για να ζωντανέψει και να δείξει ένα σχηματισμό σύννεφων.
var cloud1 = model1.getobjectbyname ("σύννεφο", αληθινό)?
Cloud1 = Cloud1. Αγγλικά ;
Νέο tween.Tween (Cloud1.position).
x: 0,
Y: 30,
z: -15
}, 8000) .Repeat (άπειρο). Αυτός (tween.equadratic.inout) .start ();
04. Τοποθετήστε το επάνω
Το σύννεφο κλιμακώνεται για να είναι σχεδόν αόρατο. Ένα άλλο tween προστίθεται στο σύννεφο και αυτό ζυγίζει το σύννεφο μέχρι το κανονικό του μέγεθος. Με την κίνηση και την κλιμάκωση, θα δώσει την ψευδαίσθηση ότι το σύννεφο αυξάνεται και σχηματίζει έξω από τη θάλασσα ως το πρώτο βήμα στη διαδικασία του κύκλου νερού.
cloud1.scale.x = cloud1.scale.y = cloud1.scale.z = 0,0;
νέο tween.Tween (Cloud1.scale). Για ({
x: 1,
y: 1,
z: 1
}, 8000) .Repeat (άπειρο). Αυτός (tween.equadratic.inout) .start ();
Το επόμενο σύννεφο από το δεύτερο μοντέλο πρέπει να τοποθετηθεί όπου το πρώτο σύννεφο τελείωσε την κινούμενη εικόνα του ως σχηματισμένο σύννεφο στον ουρανό. Αυτό δίνεται ένα διασκεδαστικό κίνημα για να τοποθετηθεί πάνω από τη γη, αυξάνεται ελαφρώς πάνω από το βουνό. Αυτό θα διαρκέσει 12 δευτερόλεπτα για να ζωντανέψει καθώς είναι μια μεγαλύτερη κίνηση.
var cloud2 = model2.getobjectbyname ("σύννεφο", αληθινό)?
Cloud2 = Cloud2.Παιχνίδια ;
cloud2.position.set (0, 30, -15);
Νέα Tween.Tween (Cloud2.position). Για ({
x: 0,
Y: 50,
Ζ: -145
}, 12000). Επαναλάβετε (άπειρο). Αυτός (tween.equadratic.inout) .start ();
06. Κάντε τη βροχή
Το κλειδί για την κατασκευή αυτού του έργου ψευδαίσθησης επιτρέπουν στο σύννεφο να βρέξει. Ο κύκλος νερού έχει τη βροχή σύννεφο καθώς κινείται υψηλότερη πάνω από τη γη. Για να πάρετε το αποτέλεσμα, θα χρησιμοποιηθεί ένα σύστημα σωματιδίων. Εδώ δημιουργείται η ποσότητα σωματιδίων και υλικό σωματιδίων, χρησιμοποιώντας μια εικόνα βροχής.
VAR TEXTURELOADER = Νέο τρία.TextureLoader ();
ΙΣΟΛΙΚΗ = 1500;
σωματίδια = νέα τριών. Στιμπομετρία ();
var pmaterial = Νέο τρία .Pointsmaterial ({
Χρώμα: 0x3A4E5D,
Μέγεθος: 0,05,
Χάρτης: TextureLoader.Lload ("img / rain.png"),
Phatest: 0,3,
αδιαφάνεια: 0,9,
διαφανές: TRUE}).
07. Δημιουργία σταθμών βροχής
Χρησιμοποιώντας ένα για βρόχο, μπορούν να δημιουργηθούν 1500 σταγόνες βροχής με μια τυχαία θέση Χ, Υ, Ζ που θα είναι μεταξύ του νέφους και του εδάφους. Κάθε σταγόνες βροχής δίνεται η δική του τυχαία ταχύτητα για να κάνει τη βροχή να φαίνεται πιο φυσική. Το σωματίδιο ωθείται στη σωστή κορυφή της γεωμετρίας.
για (var i = 0, i & lt; ιδανικό. I ++) {
var px = math.random () * 60 - 30,
py = math.random () * -10,
pz = math.random () * 20 - 10;
var particle = νέα τρία.Vector3 (px, py, pz);
particle.Velocity = νέα τρία.Vector3 (0, - (math.random () * 0.9), 0);
σωματίδια.ertices.puse (σωματίδιο); }
08. Εργαστείτε στο σύστημα σωματιδίων
Τώρα το σύστημα σωματιδίων δημιουργείται από τη γεωμετρία και το υλικό. Τα σωματίδια έχουν ρυθμιστεί να ταξινομηθούν έτσι ώστε η Z-Order να είναι σωστή και στη συνέχεια τα σωματίδια βροχής γίνονται ένα παιδί του δεύτερου σύννεφου. Οπουδήποτε το σύννεφο είναι διασκεδασμένο, η βροχή ακολουθεί επίσης, οπότε δεν χρειάζεται να ζωντανέψετε τη βροχή μετά το σύννεφο!
Στο τελικό μοντέλο, το σύννεφο επανατοποθετείται στο τελικό σημείο του δεύτερου κύκλου animation Cloud. Αυτό το νέο σύννεφο πρόκειται απλά να καθίσει στον ουρανό και να μην ζωντανεύει. Αντ 'αυτού, ο ποταμός πρόκειται να ζωντανέψει, οπότε το μοντέλο του ποταμού αποθηκεύεται σε μια μεταβλητή, έτοιμη να προσθέσει το tween σε αυτό.
Στο τρίτο βήμα του κύκλου νερού το νερό τρέχει από τους λόφους, γεμίζοντας ποτάμια και λίμνες καθώς επιστρέφει στη θάλασσα. Αυτή είναι η πιο λεπτή κίνηση, καθώς θα συνεπάγεται απλώς τη μετακίνηση του ύψους του ποταμού έτσι ώστε να φαίνεται να γεμίζει. Όλα είναι προφορτωμένα τώρα, έτσι
μέσα σε αυτό
η λειτουργία καλείται.
Νέο Tween.Tween (ποταμός.position). Για ({
Y: 3
}, 8000). Επαναλάβετε (άπειρο).
μέσα σε αυτό();
}) ·
Έχετε σχεδιαστεί αρχεία για να αποθηκεύσετε; Ελέγξτε τον οδηγό μας
αποθήκευση σύννεφων
.
Επόμενη σελίδα: Προσθήκη λειτουργικότητας και δεικτών AR
1
2
3
Τρέχουσα σελίδα:
Δημιουργήστε μια εφαρμογή AR: Βήματα 01-10
Επόμενη σελίδα
Δημιουργήστε μια εφαρμογή AR: Βήματα 11-20
