Ξεκινήστε με webvr

Το WebVR είναι API Javascript για τη δημιουργία εμπειριών 3D εικονικής πραγματικότητας στο πρόγραμμα περιήγησης. Αυτό απαιτεί χαμηλή λανθάνουσα κατάσταση, υψηλό ρυθμό καρέ και εξαιρετική απόδοση. Στόχος του είναι να διευκολυνθεί ο καθένας να εισέλθει σε εμπειρίες VR μειώνοντας τα εμπόδια στην είσοδο.

WebGL επιτρέπει στους προγραμματιστές να δημιουργήσουν πλούσιες εμπειρίες ποιότητας κονσόλας που καθιστούν σε πραγματικό χρόνο σε κινητές συσκευές και προγράμματα περιήγησης επιφάνειας εργασίας (απλά βεβαιωθείτε ότι έχετε το web hosting δεξιά για βέλτιστη δυνατότητα). Σχεδόν το καθολικό πρόγραμμα περιήγησης και η υποστήριξη συσκευών το καθιστά μια τέλεια προσέγγιση για τους προγραμματιστές του Ιστού που θέλουν να δημιουργήσουν απίστευτες εμπειρίες VR. Εδώ, σας δείχνουμε πώς να ξεκινήσετε με webvr. Στο κάτω μέρος αυτού του άρθρου, θα βρείτε κάποιους χρήσιμους πόρους για να περαι περισσότερους τις γνώσεις σας.

Στο σεμινάριο μας, θα χρησιμοποιήσουμε webvr σε συνδυασμό με Τρία - μια επιλογή των πολλών Εργαλεία σχεδίασης ιστοσελίδων Διατίθεται για 3D και VR στον ιστό. Είναι ελεύθερη και ανοιχτή πηγή, ελαφριά και αμέτρητες βραβευμένες ιστοσελίδες που το χρησιμοποιούν. Εκτός από το υπόβαθρο JavaScript, μπορείτε να βουτήξετε σε αυτό το σεμινάριο χωρίς προηγούμενη γνώση και να δημιουργήσετε την πρώτη εμπειρία Webvr. Ο στόχος αυτού του φροντιστηρίου είναι να ξεκινήσετε και να σας εμπνεύσετε να συνεχίσετε να εξερευνήσετε αυτή την πολύ συναρπαστική τεχνολογία. Θέλετε κάτι απλούστερο; Δοκιμάστε ένα οικοδόμος ιστότοπου .

• Κατεβάστε τα αρχεία για αυτό το σεμινάριο από το FileSilo

01. Ενεργοποίηση σημαίας webvr στο Chrome

Το WebVR εξακολουθεί να είναι μια πειραματική τεχνολογία και απαιτεί https να τρέξει στο διακομιστή σας. Δεν θα τρέξει σε κινητές συσκευές χωρίς ένα polyfill.github.com/immersive-web/webvr-polyfill . Ωστόσο, μπορείτε να εκτελέσετε περιεχόμενο τοπικά σε χρώμιο για δοκιμή και κτίριο. Βεβαιωθείτε ότι έχετε ενεργοποιήσει τη σημαία χρώμιο webvr. Τύπος Chrome: // Σημαίες / Ενεργοποίηση-webvr Στο πρόγραμμα περιήγησης URL σας και, στη συνέχεια, κάντε κλικ στην επιλογή Ενεργοποίηση για να το ενεργοποιήσετε. Μπορεί να χρειαστεί να επανεκκινήσετε το Chrome επίσης.

02. Τοποθετήστε το πρόσθετο εξομοίωσης API API WebVR

Για να δοκιμάσετε τοπικά στην επιφάνεια εργασίας σας και να αποφύγετε την ανάγκη για μια συσκευή, υπάρχει ένα εξαιρετικό plugin που μπορείτε να χρησιμοποιήσετε στο Chrome με το ClickToreLease. Το plugin θα μιμηθεί ένα Ακουστικά VR για εσάς και σας επιτρέπουν να μετακινήσετε και να περιστρέψετε το ακουστικό ουσιαστικά ( πάρτε το εδώ ).

03. Ανοίξτε τη γραμμή εργαλείων συσκευής στα εργαλεία προγραμματιστή

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

04. Δημιουργία βασικού αρχείου HTML

Στη συνέχεια, πρέπει να ρυθμίσετε ένα βασικό αρχείο HTML. Μπορείτε να δημιουργήσετε εξωτερικά αρχεία CSS και JavaScript ή να συμπεριλάβετε ενίσχυση για απλότητα. Η τάξη Renchiser Three.js θα δημιουργήσει ένα & lt; καμβά & gt; στοιχείο για εσάς. Προσθέστε τον ακόλουθο κώδικα στο δικό σας index.html αρχείο:

 & lt; html lang = "en" & gt;
& lt; κεφάλι & gt;
& lt; τίτλος & gt; webvr demo & lt; / τίτλος & gt;
& lt; meta charset = "utf-8" & gt;
& lt; meta όνομα = "viewport" περιεχόμενο =
"Πλάτος = Πλάτος συσκευής, αρχική κλίμακα =
1.0, κλιμάκωση χρήστη = όχι "& gt;
& lt; στυλ & gt;
html, σώμα {περιθώριο: 0; Padding: 0;
Overflow: Κρυμμένο? }
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; script & gt;
// κωδικός θα πάει εδώ
& lt; / script & gt;
& lt; / Body & GT; 

05. Συμπεριλάβετε μαθήματα τριών

Συμπεριλάβετε έναν σύνδεσμο στη βιβλιοθήκη Three.js στο κεφάλι του αρχείου σας - είτε φιλοξενείται εξωτερικά είτε κατεβάστε το από το αποθετήριο τριών .js. Θα χρειαστείτε επίσης τη νέα κλάση Webvr και την τάξη BoxlineMomeMetry για αυτό το σεμινάριο. Μπορείτε να βρείτε τη βιβλιοθήκη και τις τάξεις υποστήριξης εδώ . Σημείωση: Ο κώδικας σε αυτό το σεμινάριο έχει δοκιμαστεί με την τελευταία έκδοση τριών.Js V99.

 & lt; script src = "libs / threemin.js" & gt; / script & gt;
& lt; script src = "libs / webvr.js" & gt; / script & gt;
& lt; script src = "libs / bablinegeometry.js" & gt;
& lt; / script & gt; 

06. Προσθέστε τις παγκόσμιες μεταβλητές

Μεταξύ των ετικετών δέσμης ενεργειών για τον κώδικα, προσθέστε τις ακόλουθες παγκόσμιες μεταβλητές σε παγκόσμια πρόσβαση στην κάμερα, τη σκηνή, τα καθιστά τα αντικείμενα και τον Raycaster. Προσθέστε επίσης ένα ΚΤΥΠΗΜΑ Μεταβλητή για να παρακολουθείτε αντικείμενα που διασκορπίζονται από το βλέμμα της κάμερας. Αυτό θα αποδείξει πώς να ξέρετε τι ένας χρήστης κοιτάζει στο VR.

 Ρολόι VAR = Νέο τριών.Clock ();
Var δοχείο, κάμερα, σκηνή, renderer, δωμάτιο,
Crosshair, χτύπημα;
var αντικείμενα = []; // Συλλογή αντικειμένων
var num = 100; // αριθμός αντικειμένων
var raycaster = νέος τριών.Raycaster (); 

07. Δημιουργήστε μια τρισδιάστατη σκηνή

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

 // Δημιουργήστε ένα αντικείμενο σκηνής
var σκηνή = νέα τρία.scene (); 

08. Προσθέστε μια προοπτική κάμερα

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

 // Δημιουργία κάμερας
κάμερα = νέα τρία .perspectiveera
(70, window.innerwidth / window.innerheheight,
0,1, 1000).
scene.add (κάμερα); 

09. Προσθέστε ένα στοιχείο απόρριψης και καμβά

Ο refererer χειρίζεται το σχέδιο των αντικειμένων στη σκηνή σας που είναι ορατά στην κάμερα. Ορίστε την ιδιότητα Antialias σε True για να πάρετε ομαλές άκρες στο αντικείμενο. Ο realserer δημιουργεί ένα διόρθωση , που είναι στην πραγματικότητα ένα html & lt; καμβά & gt; στοιχείο. Στη συνέχεια, μπορείτε να προσθέσετε στο σώμα. Σημειώστε τη χρήση της νέας σημαίας με δυνατότητα VR του renderer.

 renderer = new three.webglrenderer (
{antialias: true});
renderer.etpixelratio (παράθυρο.
συσκευήpixelratio);
renderer.Setsize (window.innerwidth, παράθυρο.
innerheight)?
renderer.vr.Enabled = true;
document.Body.AppendChild (renderer.
διέλευσης) · 

10. Προσθέστε Crosshair κάμερας

Για να βοηθήσετε τους χρήστες να προσανατολισθούν στο σημείο εστίασης της κάμερας, είναι καλή πρακτική να προσθέσετε ένα εικονίδιο crosshair ή στόχευση μπροστά από την κάμερα. Μπορείτε να το προσθέσετε απευθείας στο αντικείμενο της κάμερας, ώστε να είναι πάντα εκεί που πρέπει να είναι.

 Crosshair = Νέο τρία.
Νέα τριών περιστροφών (0,02, 0,04, 32),
Νέο τριών ομαδοποιήσεων ({
Χρώμα: 0xffffff,
αδιαφάνεια: 0,5,
Διαφανές: TRUE
})
)
crosshair.position.z = - 2;
Camera.add (Crosshair); 

11. Δημιουργήστε ένα αντικείμενο δωματίου VR (προαιρετικό)

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

 Δωμάτιο = Νέοι τρεις.Linescements (
Νέες τρεις. JoxlineMomeMetry (6, 6, 6, 10, 10, 10),
Νέο τρία.LineBasiciential ({Χρώμα:
0x808080});
room.position.y = 2;
scene.add (δωμάτιο); 

12. Προσθέστε φώτα στη σκηνή

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

 scene.add (νέο τρία.hemispherelight
(0x806060, 0x404040));
var light = νέα τρία
(0xffffff);
light.position.Set (1, 1, 1) .Συτρώστε ();
scene.add (φως); 

13. Δημιουργήστε ορισμένα αντικείμενα

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

 VAR Geometry = Νέο τριών .Boxbufferometry
(0,15, 0,15, 0,15).
για (i = 0, i & lt; = num; i ++) {
VAR Υλικό = Νέο Three Meshlambertmaterial
({χρώμα: math.random () * 0xffffff});
Var Object = New Three Mesh
(γεωμετρία, υλικό);
Object.Position.Set (Math.random () * 4.0
- 2.0, math.random () * 4.0 - 2.0, μαθηματικά.
τυχαία () * 4.0 - 2.0);
Object.Scale.Set (Math.random () +. 5, Μαθηματικά.
τυχαία () +. 5, math.random () +. 5);
Object.Rotation.Set (Math.Random () * 2 *
Math.pi, math.random () * 2 * math.pi, μαθηματικά.
τυχαία () * 2 * math.pi);
// Δημιουργία χαρακτηριστικών Orbit} 

14. Προσθέστε τα χαρακτηριστικά τροχιάς σε αντικείμενα

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

// Δημιουργία χαρακτηριστικών τροχιάς
// Υπολογίστε την απόσταση ως σταθερή και εκχωρήστε
αντικείμενο
var a = νέα τρία.Vector3 (0, 0, 0);
var b = object.position;
var d = a.distanceto (b);
object.distance = d;
Object.Radians = Math.Random () * 360 * Math.
PI / 180; // αρχική γωνία
Object.Radians2 = Math.Random () * 360 * Math.
PI / 180; // αρχική γωνία
Object.Radians3 = Math.Random () * 360 * Math.
PI / 180; // αρχική γωνία
room.add (αντικείμενο);
objectss.push (αντικείμενο); 

15. Προσθέστε έναν χειριστή αλλαγής μεγέθους παραθύρου

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

 Window.AddeventListener ('Αλλαγή μεγέθους',
onwindowresize, false).
λειτουργία onwindowresize () {
camera.aspect = window.Innerwidth / παράθυρο.
Innerheight.
camera.updatepropectionMatrix ();
renderer.Setsize (window.innerwidth,
window.innerheheight)?
} 

16. Δημιουργήστε το κουμπί webvr

Η νέα τάξη webvr του Three.js περιλαμβάνει ένα κουμπί WebVR, το οποίο χειρίζεται την είσοδο μέσα και έξω από τη λειτουργία VR για εμάς. Διαχειρίζεται επίσης εάν η συσκευή δεν υποστηρίζει τη λειτουργία VR. Μπορείτε να το συμπεριλάβετε με αυτόν τον απλό κώδικα:

 // three.js webvr κουμπί να εισέλθουν /
Έξοδος από τη λειτουργία VR
Document.Body.AppendChild (webvr.createbutton
(renderer)); 

17. Ξεκινήστε τον βρόχο VR Animation

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

 // Ξεκινήστε τον βρόχο VR Animation
renderer.setanimationLoop (καθιστούν). 

18. Δημιουργήστε τη λειτουργία δημιουργίας

Στη συνέχεια, δημιουργήστε μια λειτουργία απόδοσης. Εάν δεν θέλετε να ζωντανέψετε τα αντικείμενα ή τη δοκιμή σας για την κάμερα / crosshair που διασταυρώνονται με αντικείμενα, θα μπορούσατε απλώς να χρησιμοποιήσετε τον ακόλουθο κώδικα:

 Λειτουργία () {
// Βρείτε διασταυρώσεις
// Ζωγραφίστε τα αντικείμενα
// καθιστούν τη σκηνή
renderer.render (σκηνή, κάμερα);
} 

19. Δοκιμή για διασταυρώσεις

Για να ενεργοποιήσετε τη δοκιμή αντικειμένων που διασταυρώνουν την ακτίνα που εντοπίστηκαν από την κάμερα στο χώρο Z, προσθέστε τον ακόλουθο κώδικα στον βρόχο απόδοσης όπου το σχολιάσατε στο τελευταίο βήμα:

 raycaster.setfromcamera ({x: 0, y: 0},
ΦΩΤΟΓΡΑΦΙΚΗ ΜΗΧΑΝΗ );
var τέμνονται = raycaster.IntersectObjects
(δωμάτιο.
Εάν (τεντωθεί.Length & gt; 0) {
αν (hit! = τέμνονται 
 .Object) {
Εάν (χτύπημα) {hit.material.emissive.
sethx (hit.currenthex); }
Hit = τέμνονται 
 .Object.
Hit.currenthex = hit.material.emissive.
gethex ();
Hit.material.emissive.Sethex (0x00ff00);
}
} αλλιώς {
Εάν (χτύπημα) {hit.material.emissive.Sethex
(Hit.currenthex); }
Hit = undefined;
} 

20. Animate αντικείμενα κατά μήκος τροχιών

Στη συνέχεια, μπορείτε να ζωντανέψετε τα αντικείμενά σας κατά μήκος των διαδρομών τροχιάς τους χρησιμοποιώντας αυτόν τον κώδικα:

 για (i = 0, i & lt; = num; i ++) {
var o = αντικείμενα [i];
o.Rotation.y + = 01;
Αν (i% 2 == 0) {
O.Radians + =. 004;
O.Radians2 + =. 005;
Ο.Radians3 + =. 008;
} αλλιώς {
O.Radians - =. 006;
O.Radians2 - =. 005;
O.Radians3 - =. 003;
}
o.position.x = (math.cos (O.Radians) *
o.distance).
o.Position.Z = (Math.sin (O.Radians3) *
o.distance).
o.position.y = (math.sin (O.Radians2) *
o.distance * .5);
} 

21. καθιστούν τη σκηνή webvr

Τέλος, μπορείτε να απολαύσετε τη σκηνή σας χρησιμοποιώντας τις λειτουργίες του Ride. Εάν δεν έχετε προσθέσει αυτή τη γραμμή ήδη, κάντε το τώρα. Μόλις το προσθέσετε, μπορείτε να το δοκιμάσετε όλα έξω και να δείτε μια σκηνή webvr στην απόδοση στο πρόγραμμα περιήγησής σας. Μπορείτε επίσης να το ελέγξετε στην κινητή συσκευή ή το ακουστικό VR.

 // καθιστούν τη σκηνή
renderer.render (σκηνή, κάμερα); 

Πόροι Webvr

Ξεκινώντας στο webvr μπορεί να είναι συντριπτική. Έχουμε συναρμολογήσει μερικά παραδείγματα ιστότοπων που χρησιμοποιούν webvr και πόρους για να σας βοηθήσουν να πάρετε το Rolling.

Σκιαγραφία
Πιθανότατα γνωρίζετε ήδη αυτόν τον ιστότοπο λόγω της εκπληκτικής γκαλερί περιουσιακών στοιχείων, αλλά διαθέτει επίσης μια λειτουργία webvr που σας επιτρέπει να πλοηγηθείτε στο VR.

Ενα πλαίσιο
Αυτό είναι ένα ροκ-στερεό πλαίσιο για το AR και το VR. Διαχειρίζεται τους πόνους των Fallbacks και τη στήριξη της συσκευής για εσάς, συμπεριλαμβανομένης της δυνατότητας που σας επιτρέπουν να κάνετε στο πρόγραμμα περιήγησής σας για δοκιμές. Ακόμα και περιβάλλει τη δημιουργία κοινών 3D αντικειμένων.

Τρία
Αυτή η βιβλιοθήκη έχει πολλά παραδείγματα με πηγαίο κώδικα για να σας βοηθήσει να πάτε με webvr. Είναι ένα τέλειο σημείο εκκίνησης.

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

Και πάντα βοηθά να έχει το δικαίωμα αποθήκευση σύννεφων , πολύ.

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο θέμα 283 του δημιουργικού περιοδικού Web Design Magazine Σχεδιαστής ιστοσελίδων . Αγοράστε τεύχος 283 ή Εγγραφείτε .

Διαβάστε περισσότερα:

• 7 Bonkers VR Trends Επικεφαλής τον τρόπο σας
• Ξεκινήστε με το Redux Thunk
• 11 ζεστές τάσεις στο διαδίκτυο τώρα