So codieren Sie einen Augmented Reality-Marker

Feb 2, 2026

wie man

Seite 1 von 2:

Seite 1

Seite 1
Seite 2

Augmented Reality ist jetzt seit einiger Zeit in der Nähe, aber mit Unterstützung von WEBRTC (Echtzeitkommunikation) ist es Benutzern auf Android- und Desktop-Geräten möglich, auf die Kamera eines Telefons zuzugreifen.

Derzeit kann iOS dies nicht unterstützen, da sie nicht im Webkit-Browser implementiert wurde, der Safari ausübte, aber es ist in der Entwicklung und Sie können den Status überprüfen Hier . Wenn Sie ein iOS-Gerät haben, müssen Sie nicht verpassen, da Sie die Webcam immer noch auf Ihrem Desktop-Computer verwenden können.

Hinweis: Um dieses Arbeiten auf dem mobilen Chrome-Browser zu erhalten, muss der Inhalt von einer sicheren Sockelschicht (d. H. Über https statt standardmäßig http) bedient werden. Der Desktop arbeitet derzeit mit regelmäßigem HTTP.

Um die Dateien herunterzuladen, die Sie für dieses Tutorial benötigen, gehen Sie zu Filesilo. , wählen Sie Free Sachen und freien Inhalten neben dem Tutorial.

In diesem Tutorial zeig ich Ihnen, wie Sie einen Augmented Reality-Marker vor einer Telefonkamera platzieren können. Dies wird vom Browser abgeholt und Ar.js. und Inhalt werden über der Oberseite in 3D abgebildet und an der AR-Markierung festhalten.

Für diese Technik gibt es viel mögliche Anwendungen. Sie möchten beispielsweise ein einfaches 3D erstellen kreativer Lebenslauf. , und dann könnte der AR-Marker auf Ihrer Visitenkarte gedruckt werden. Da Sie um den Marker herumlaufen können, ist dies für Inhalte hervorragend, dass Sie vielleicht aus verschiedenen Winkeln sehen möchten. Denken Sie an einen bestimmten schwedischen Möbelhersteller, der Ihnen animierte Schritte gibt, die aus einem beliebigen Winkel angesehen werden können! Es gibt so viele Möglichkeiten, dass dies nützlich sein kann.

01. Fügen Sie die Bibliotheken hinzu

Start by linking up your project libraries — Beginnen Sie mit der Verknüpfung Ihrer Projektbibliotheken

Sobald du bist Die Tutorial-Dateien heruntergeladen Gehen Sie zum Projektordner, öffnen Sie den Startordner in Ihrem Code-Editor und öffnen Sie das index.html. Datei zur Bearbeitung. Zu diesem Zeitpunkt müssen die Bibliotheken verknüpft sein - und es gibt einige für dieses Projekt einige wenige! Die Bibliotheken befinden sich in drei Abschnitten: drei.js, jsartoolkit und der drei.js-Erweiterung für das Artoolkit und die Marker.

 & lt; Skript src = 'js / drei.js' & gt; & lt; / script & gt;
& lt; Skript src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; Skript src = "vendor / jsartoolkit5 / build / artoolkit.min.js" & gt; & lt; / script & gt;
& lt; Skript SRC = "Vendor / jsartoolkit5 / js / artoolkit.api.js" & gt; & lt; / script & gt;
& lt; Skript src = "Threex-artoolkitsource.js" & gt; & lt; / script & gt;
& lt; script src = "threex-artoolkitcontext.js" & gt; & lt; / script & gt;
& lt; Skript SRC = "Threex-armarkercontrols.js" & gt; & lt; / script & gt;
& lt; script & gt; dreix.artoolkitcontext.baseurl = '/' & lt; / script & gt;

02. Kümmern Sie sich um CSS-Styling

In dem Kopf Abschnitt der Seite, fügen Sie einige hinzu Skript Tags und Drop in den Stilregeln für die Körper und das Segeltuch Element. Dadurch wird sichergestellt, dass sie auf der Seite korrekt auf der Seite platziert werden, ohne dass die vom Browser hinzugefügten Standardmargen hinzugefügt werden.

 Körper {
  Marge: 0px;
  Überlauf versteckt;
}
Segeltuch {
  Position: absolut;
  oben: 0;
  links: 0;
}

03. Fügen Sie globale Variablen hinzu

In dem Körper Abschnitt der Seite, fügen Sie einige hinzu Skript Tags, an denen der verbleibende JavaScript-Code für dieses Tutorial weitergeht. Es gibt eine Reihe von Variablen erforderlich: Die erste Zeile ist für drei.js, der zweite für das Ar.js, das zweite für das Modell und dann eine Variable, um das Modell zu laden.

 VAR Renderer, Szene, Kamera;
var artoolkitcontext, ontrenderfcts, artoolkitource, markerroot, artoolkitmarker, lasttimemsec;
VAR-Modell, TUBE1, TUBE2, MID, Details, Impuls;
VAR Loader = neuer drei.colladaloader ();

04. Laden Sie das Modell

Bevor die Szene eingerichtet ist, wird das Modell geladen, sodass er angezeigt werden kann, wenn Markierungen erkannt werden. Dies wird um 10 skaliert, um genau auf den AR-Marker zu passen. Das Modell ist 10 cm für die Breite und Höhe, sodass der Marker 1 cm ist, der in drei.js 1 inkrementiert ist.

loader.load ("modell / szene.dae", function (collada) {
  Modell = Collada.Scene;
  modell.scale.x = modell.scale.y = modell.scale.z = 0,1;
  Details = modell.getobjectbyName ("Details", true);

05. Fixieren Sie einige Anzeigeprobleme

Innerhalb des Collada-Ladecodes, sobald das Modell geladen ist, gibt es ein paar Röhren, die sich umdrehen, so dass sie in der Collada-Szene gefunden werden. Das erste Röhrchen ist gefunden und sein Material wird gepackt. Hier wird das Material so eingestellt, dass er einfach auf der Innenseite des Modells, nicht der Außenseite rendern, nicht mehr.

 TUBE1 = Modell.GETObjectbyName ("TUBE1", TRUE);
var a = tube1.children  .material;
a.transparent = wahr;
a.seite = drei ["Backside"];
a.Brending = drei ["AdditiveBending"];
a.Opazität = 0,9;

06. Wiederholen Sie den Fix

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! — Wenn die Transparenz- und Additiv-Mischung nicht aktiviert ist, sieht das Modell so aus, wenn er geladen und auf der AR-Markierung angezeigt wird - nicht sehr aufregend und kaum sichtbar!

Wie im letzten Schritt wird das gleiche Prinzip für das zweite Röhrchen und den Mischungsmodus wiederholt, ähnlich wie in After Effects und Photoshop, die als Additivmischung eingestellt ist. Dadurch kann die Außenseite der Pixel einen weicheren Übergang zum Kamerabild haben.

 TUBE2 = modell.getobjectbyName ("tube2", true);
c = rohr2.children  .material;
c.transparent = wahr;
c.seite = drei ["Backside"];
c.Brending = drei ["AdditiveBending"];
c.Opazität = 0,9;

07. Final Fix.

Das letzte Modell ist ein Spinnkreis mitten in der Mitte des Designs. Dies folgt den gleichen Regeln wie zuvor, rendern jedoch nicht die Rückseite des Objekts, nur die Front. Die Deckkraft jedes dieser Materialien wurde auf 90% eingestellt, nur um es etwas weicher zu machen. Sobald das Modell geladen ist, wird die Init-Funktion aufgerufen.

 Mid = model.getobjectbyName ("Mid", True);
  b = mid.children  .material;
  B.transparent = wahr;
  B.Brending = drei ["AdditiveBending"];
 b.Opazität = 0,9;
  drin();
});

08. Initialisieren Sie die Szene

Die Init-Funktion ist eingerichtet und hier werden die Renderer-Einstellungen erstellt. Der Renderer verwendet WebGL, um die schnellste Renderdrehzahl dem Inhalt anzugeben, und der Hintergrund-Alpha-Wert wird auf Transparente eingestellt, sodass das Kamerabild dahinter ersichtlich ist.

 Funktion init () {
  Renderer = neuer drei.webglrenderer ({
  alpha: true.
  });
  Renderer.SetClearcolor (neue drei.Color ('lightgrey'), 0);
  Renderer.Setsize (fenster.innerwidth, fenster.innerhöhe);
  Dokument.Body.AppendChild (Renderer.Domement);

09. Erstellen Sie die Szenenanzeige

Der Renderer ist als das gleiche Größe wie das Browserfenster und dem Dokumentobjektmodell der Seite hinzugefügt. Jetzt wird ein leeres Array erstellt, das Objekte speichert, die gerendert werden müssen. Eine neue Szene wird erstellt, so dass Inhalte darin angezeigt werden können.

 ontrenderfcts = [];
Szene = neue drei.szene ();

10. Leuchten

Um Inhalte in der Szene sehen zu können, wie in der realen Welt, sind Leuchten erforderlich. Eines ist ein Umgebungsgraulicht, während das Richtlichter eine gedämpfte blaue Farbe ist, nur um den 3D-Inhalt auf dem Display in der Szene ein leichter Tönung zu geben.

Experiment with the lighting colours to give some different tints — Experimentieren Sie mit den Beleuchtungsfarben, um verschiedene Töne zu geben

 VON AMBIAL = NEUE TRITE DREIES.AmBißlight (0x666666);
Szene.Add (Ambient);
VAR RilationAllight = NEUE DREI.Direktionallight (0x4E5BA0);
richtungallight.position.set (-1, 1, 1) .Normalize ();
Szene.de (richtungallight);

Weiter: Beenden Sie Ihren AR-Marker

Aktuelle Seite: Seite 1

Nächste Seite Seite 2

So codieren Sie einen Augmented Reality-Marker

01. Fügen Sie die Bibliotheken hinzu

02. Kümmern Sie sich um CSS-Styling

03. Fügen Sie globale Variablen hinzu

04. Laden Sie das Modell

05. Fixieren Sie einige Anzeigeprobleme

06. Wiederholen Sie den Fix

07. Final Fix.

08. Initialisieren Sie die Szene

09. Erstellen Sie die Szenenanzeige

10. Leuchten

wie man - Die beliebtesten Artikel

So fügen Sie Ihre Lebenszeichnungen Energie hinzu

Zeichenblätter für 3D-Modelle: 15 Top-Tipps

Holen Sie sich mehr von Graphit mit diesen Tipps

Erstellen Sie einen chromatischen Aberrationseffekt

Wie drehen Sie den Tag in der Nacht in Photoshop

Geschwindigkeit Sculpting eine Kreatur in Zbrush

Farbfarbe Graustufenarbeit in Photoshop

Verwenden von Vektor-Tools: Ein Ansatz eines Webdesigners

Kategorien