Πώς να κωδικοποιήσετε έναν δείκτη επαυξημένης πραγματικότητας

Feb 2, 2026

πως να

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

Σελίδα 1

Σελίδα 1
Σελίδα 2

Η αύξηση της πραγματικότητας ήταν γύρω για λίγο τώρα, αλλά με την υποστήριξη του WebRTC (σε πραγματικό χρόνο επικοινωνίας), είναι δυνατό για τους χρήστες στις συσκευές Android και Desktop να έχουν πρόσβαση στην κάμερα ενός τηλεφώνου.

Προς το παρόν, η iOS δεν μπορεί να το υποστηρίξει, καθώς δεν έχει εφαρμοστεί στο πρόγραμμα περιήγησης webkit που εξουσιάζει το σαφάρι, αλλά είναι στην ανάπτυξη και μπορείτε να ελέγξετε την κατάσταση εδώ . Εάν έχετε μια συσκευή iOS, δεν χρειάζεται να χάσετε, καθώς μπορείτε ακόμα να χρησιμοποιήσετε την κάμερα web στον επιτραπέζιο υπολογιστή σας.

Σημείωση: Για να πάρετε αυτό το έργο στο κινητό πρόγραμμα περιήγησης Chrome, το περιεχόμενο πρέπει να εξυπηρετείται από ένα ασφαλές στρώμα υποδοχής (δηλ. Πάνω από https αντί για τυπικό http). Η επιφάνεια εργασίας λειτουργεί σήμερα με κανονική http.

Για να κατεβάσετε τα αρχεία που χρειάζεστε για αυτό το σεμινάριο, πηγαίνετε στο Αρχεία , επιλέξτε δωρεάν πράγματα και δωρεάν περιεχόμενο δίπλα στο σεμινάριο.

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

Υπάρχουν πολλές πιθανές χρήσεις για αυτήν την τεχνική. Για παράδειγμα, ίσως θελήσετε να δημιουργήσετε ένα απλό 3D δημιουργικό βιογραφικό , και στη συνέχεια ο δείκτης AR θα μπορούσε να εκτυπωθεί στην επαγγελματική σας κάρτα. Επειδή μπορείτε να περπατήσετε γύρω από το δείκτη, αυτό είναι ιδανικό για το περιεχόμενο που ίσως θέλετε να δείτε από διαφορετικές γωνίες - σκεφτείτε ένα συγκεκριμένο σουηδικό κατασκευαστή επίπλων που σας δίνει κινούμενα βήματα που μπορούν να προβληθούν από οποιαδήποτε γωνία! Υπάρχουν τόσες πολλές δυνατότητες που μπορεί να είναι χρήσιμη αυτό.

01. Προσθέστε τις βιβλιοθήκες

Start by linking up your project libraries — Ξεκινήστε συνδέοντας τις βιβλιοθήκες έργων σας

Μόλις έχετε κατεβάσει τα αρχεία φροντιστηρίων Μεταβείτε στο φάκελο του έργου, ανοίξτε τον φάκελο εκκίνησης στον επεξεργαστή κωδικών σας και στη συνέχεια ανοίξτε το index.html Αρχείο επεξεργασίας. Σε αυτό το στάδιο οι βιβλιοθήκες πρέπει να συνδεθούν - και υπάρχουν αρκετοί για αυτό το έργο! Οι βιβλιοθήκες είναι σε τρία τμήματα: τρεις.js, jsartoolkit, και η επέκταση τριών.JS για το Artoolkit και το δείκτη.

 & lt; script src = 'js / three.js' & gt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; / script & gt;
& lt; script src = "vendor / jsartoolkit5 / build / artoolkit.min.js" & gt; / script & gt;
& lt; script src = "vendor / jsartoolkit5 / js / artoolkit.api.js" & lt; / script & gt;
& lt; script src = "threex-artoolkitsource.js" & gt; / script & gt;
& lt; script src = "threex-artoolkitcext.js" & gt; / script & gt;
& lt; script src = "threex-armarkercontrols.js" & gt; / script & gt;
& lt; script & gt; threex.artoolkitcontext.baseurl = '/' & lt; / script & gt;

02. Φροντίστε το CSS Styling

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

 Σώμα {
  Περιθώριο: 0px;
  Overflow: Κρυμμένο?
}
καμβά {
  Θέση: Απόλυτη.
  Κορυφή: 0;
  Αριστερά: 0;
}

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

Στο σώμα Τμήμα της σελίδας, προσθέστε μερικά γραφή Ετικέτες όπου ο υπόλοιπος κωδικός JavaScript για αυτό το σεμινάριο θα πάει. Υπάρχουν διάφορες μεταβλητές: η πρώτη γραμμή είναι για τρία.js, το δεύτερο για το AR.JS, το τρίτο για το μοντέλο και στη συνέχεια μια μεταβλητή για να φορτώσει το μοντέλο.

 var renderer, σκηνή, κάμερα?
var artoolkitcettext, onrenderfcts, artoolkitsource, markerroot, artoolkitmarker, lasttimemspec;
VAR μοντέλο, σωλήνα1, σωλήνα2, μέσα, λεπτομέρειες, παλμός.
VAR Loader = Νέο τρία.colladaloader ();

04. Τοποθετήστε το μοντέλο

Πριν τη ρύθμιση της σκηνής, το μοντέλο θα φορτωθεί έτσι ώστε να μπορεί να εμφανιστεί όταν εντοπίζονται δείκτες. Αυτό κλιμακώνεται κατά 10 για να ταιριάζει ακριβώς στο δείκτη AR. Το μοντέλο είναι 10cm για το πλάτος και το ύψος, οπότε ο δείκτης είναι 1cm που μεταφράζεται σε 1 αύξηση των τριών.Js.

φορτωτής.Lload ('μοντέλο / scene.dae', λειτουργία (Collada) {
  μοντέλο = collada.scene;
  model.scale.x = model.scale.y = model.scale.z = 0.1;
  Λεπτομέρειες = μοντέλο.GetObjectByName ("Λεπτομέρειες", True).

05. Προσδιορίστε κάποια προβλήματα εμφάνισης

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

 Tube1 = model.getobjectnameName ("Tube1", True).
var a = tube1.Παιχνίδια  .material;
A.Transparent = TRUE;
A.Side = Τρία ["Backside"].
A.ΜΕΝΗ = τρία ["πρόσθετο"];
a.Apacity = 0,9;

06. Επαναλάβετε την επιδιόρθωση

If the transparency and additive blending is not enabled, the model looks like this when loaded and displayed on top of the AR marker – not very exciting and barely visible! — Εάν η ανάμειξη διαφάνειας και πρόσθετης ύλης δεν είναι ενεργοποιημένη, το μοντέλο μοιάζει με αυτό όταν φορτωθεί και εμφανίζεται στην κορυφή του δείκτη AR - δεν είναι πολύ συναρπαστικό και μόλις ορατό!

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

 Tube2 = Model.getObjectByName ("Tube2", True).
C = Tube2.Παιχνίδια  .Material;
c.Transparent = TRUE;
C.side = Τρία ["Backside"].
C. Jening = Τρία ["πρόσθετο"];
c.Opacity = 0,9;

07. Τελική λύση

Το τελευταίο μοντέλο είναι ένας περιστρεφόμενος κύκλος ακριβώς στη μέση του σχεδιασμού. Αυτό ακολουθεί τους ίδιους κανόνες όπως και πριν, αλλά δεν καθιστά το πίσω μέρος του αντικειμένου, ακριβώς μπροστά. Η αδιαφάνεια καθενός από αυτά τα υλικά έχει οριστεί στο 90% μόνο για να το καταστήσει ελαφρώς μαλακότερο. Μόλις φορτωθεί το μοντέλο, καλείται η λειτουργία Init.

 Mid = Model.GetObjectByNameName ("Mid", True).
  B = Mid.Children  .Material;
  B.Transparent = TRUE;
  B.Bled = τρία ["πρόσθετο"];
 B.Ipacity = 0,9;
  μέσα σε αυτό();
}) ·

08. Αρχικοποιήστε τη σκηνή

Η λειτουργία Init δημιουργείται και μέσα εδώ δημιουργούνται οι ρυθμίσεις του renderer. Ο refererer χρησιμοποιεί webgl για να δώσει την ταχύτερη ταχύτητα απόδοσης στο περιεχόμενο και η τιμή Alpha υποβάθρου έχει ρυθμιστεί σε διαφανή έτσι ώστε η εικόνα της κάμερας να μπορεί να δει πίσω από αυτό.

 Λειτουργία Init () {
  renderer = new three.webglrenderer ({
  Alpha: TRUE
  });
  renderer.setclearcolor (νέος τριών. Color ('Lightgrey'), 0).
  renderer.Setsize (window.innerwidth, window.innerhehight)?
  Document.Body.AppendChild (renderer.domement);

09. Δημιουργήστε την οθόνη σκηνής

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

 ONRENDERFCTS = [];
σκηνή = νέα τρία.Scene ();

10. Ανάψτε

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

Experiment with the lighting colours to give some different tints — Πειραματιστείτε με τα χρώματα φωτισμού για να δώσετε κάποιες διαφορετικές αποχρώσεις

 var ambient = νέος τριών.Ambientlight (0x666666);
scene.add (περιβάλλον);
var directionalalight = Νέο τρία.Diectionalight (0x4e5ba0);
DirectionAllight.position.Set (-1, 1, 1) .Συτριμότητα ();
scene.add (κατεύθυνση).

Στη συνέχεια: Τελειώστε το Marker AR

Τρέχουσα σελίδα: Σελίδα 1

Επόμενη σελίδα Σελίδα 2

Πώς να κωδικοποιήσετε έναν δείκτη επαυξημένης πραγματικότητας

01. Προσθέστε τις βιβλιοθήκες

02. Φροντίστε το CSS Styling

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

04. Τοποθετήστε το μοντέλο

05. Προσδιορίστε κάποια προβλήματα εμφάνισης

06. Επαναλάβετε την επιδιόρθωση

07. Τελική λύση

08. Αρχικοποιήστε τη σκηνή

09. Δημιουργήστε την οθόνη σκηνής

10. Ανάψτε

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

21 τρόποι βελτίωσης της παραγωγικότητας με την NPM

Πώς να δημιουργήσετε μια δεξιότητα Alexa για τον ιστότοπό σας

Δημιουργία συγκεκριμένων μορφών και διατάξεων CSS

Δημιουργήστε ένα κινούμενο αποτέλεσμα κειμένου ατμού

Ανατομία Masterclass: Τέλεια τα στοιχεία σας

Κατανόηση της ιδιοκτησίας οθόνης CSS

Master αρνητική ζωγραφική σε ακουαρέλα

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

Κατηγορίες