So erstellen Sie eine AR-App

Feb 3, 2026
wie man

In den letzten zwei Jahren gab es eine Explosion in Interesse um VR und AR-Technologien. Die neueste große Sache in experimentelles Design , AR ist auch im Internet angekommen, aber mit dieser neuen Technologie kommt neue Fähigkeiten, und jetzt fühlt es sich an wie der wilde Westen, ohne dass keine großen Standards folgen.

Die Fähigkeit, 3D im Web anzuzeigen, ist nichts Neues, aber wenn Sie es vermieden haben, müssen Sie in Technologien wie drei.js oder A-Frame springen (schauen Sie sich unsere Rundung von AR-Werkzeuge zum Ausprobieren für eine vollständige Liste).

Welches Skill-Level, in dem Sie sich befinden, es macht keinen großen Unterschied, wenn Sie keinen anständigen Inhalt haben. Denken Sie an geeignete Anwendungsfälle für AR vor dem Springen. In diesem Artikel zeigen wir Ihnen, wie Sie ein Multi-Marker-AR-Erlebnis erstellen können.

Fühle, wie dein Skill-Level nicht ganz ist? EIN Webseitenersteller wird eine Site für Sie ohne den Aufregung erstellen. Oder wenn Sie mit einer komplexen Site eintauchen, erhalten Sie das Web-Hosting richtig.

Durch die Verwendung mehrerer Marker können verschiedene Schritte eines Prozesses oder eines einzigartigen Inhalts auf der Grundlage dieser Markierung angezeigt werden. In diesem Beispiel wird unsere App den Wasserkreislauf erkunden. Springe zu Seite 3, um zu erfahren, wie er einen benutzerdefinierten AR-Marker erstellt.

01. Erste Schritte

Öffne das Start Ordner in Ihrer IDE und in der index.html. Seite finden Sie die Skript-Tags. Alle Code im Tutorial gehen in diese. Um die App zu testen, müssen Sie einen Server haben, und wenn Sie auf einem Telefon testen möchten, müssen Sie die Dateien auf einem HTTPS-Server hosten. Fügen Sie die anfänglichen Variablen in den Skript-Tags hinzu: 

 var model1, model2, model3, count = 0,
  Partikel, Teilnehmer, Partikelsystem;
  VAR Loader = neuer drei.colladaloader ();

02. Laden Sie das Modell

scene

Verwenden Sie das Symbol oben rechts, um das Bild zu vergrößern

Um die AR-Szenenarbeit zu erstellen, wird ein Modell geladen. Sie werden sehen, dass, sobald geladen, in der Variablen gespeichert ist Modell1. . Dies wird dann zweimal für die drei Schritte skaliert und kloniert. Anstatt drei verschiedene Modelle zu laden, werden alle Anpassungen an ein Modell im Code erfolgen, um es schnell auf Mobiltelefon zu laden. 

 loader.load ('landess1.dae', function (collada) {
  model1 = collada.scene;
  model1.scale.x = modell1.scale.y = model1.scale.z = 0,015;
  model2 = model1.clone ();
  model3 = model1.clone ();

03. Richten Sie das Tween

Auf dem ersten Modell wird die Wolke in der Szene gefunden, und dies wird zu einer neuen Position gefüttert, so dass die Wolke aus dem Meer steigt. Dies wird für immer wiederholt, und es dauert acht Sekunden, bis die Tween acht Sekunden dauert, um aufzulösen und eine Wolkenform zu zeigen. 

 var cloud1 = model1.getobjectbyName ("Cloud", true);
  cloud1 = cloud1.children 
;
  neue Tween (Cloud1.Position) .O ({
  x: 0,
  y: 30,
  Z: -15.
  }, 8000). Repeat (Infinity) .EING (Tween.Easing.Quadratic.inout) .start ();

04. skalieren Sie es auf

Die Wolke wird als fast unsichtbar skaliert. Eine weitere Tween wird der Wolke hinzugefügt, und dies skaliert die Cloud bis zur normalen Größe. Mit der Bewegung und der Skalierung ergibt sich die Illusion, dass die Wolke als der erste Schritt des Wasserzyklus aus dem Meer steigt und aus dem Meer aussteht. 

 cloud1.scale.x = cloud1.scale.y = cloud1.scale.z = 0,0;
  neue Tween (Cloud1.Scale) .O ({
  x: 1,
  y: 1,
  z: 1.
  }, 8000). Repeat (Infinity) .EING (Tween.Easing.Quadratic.inout) .start ();

05. Richten Sie die zweite Wolke auf

the water cycle scene

Eine zweite Wolke sitzt über dem Berg

Die nächste Wolke aus dem zweiten Modell muss positioniert werden, wo die erste Wolke seine Animation als geformte Wolke am Himmel beendet hat. Dies erteilt eine gefütterte Bewegung, um sich über das Land zu positionieren und leicht über dem Berg zu steigen. Dies dauert 12 Sekunden, um zu animieren, da es eine größere Bewegung ist. 

 var cloud2 = model2.getobjectbyName ("Cloud", true);
  cloud2 = cloud2.children 
;
  Cloud2.Position.set (0, 30, -15);
  neue Tween (Cloud2.Position) .O ({
  x: 0,
  y: 50,
  Z: -145.
  }, 12000). Repeat (Infinity) .EAING (Tween.Easing.Quadratic.inout) .start ();

06. Machen Sie es regnen

Der Schlüssel, um diese Illusionsarbeit zu erleichtern, lässt die Wolke zu regnen. Der Wasserzyklus hat den Wolkenregen, da er sich über Land übernimmt. Um den Effekt zu erhalten, wird ein Partikelsystem verwendet. Hier wird die Menge an Partikeln und das Partikelmaterial mit einem Regentropfenbild erzeugt. 

 var textureloader = neuer drei.textureloader ();
ParticleCount = 1500;
Partikel = neue drei.Geometrie ();
var prematerial = new three.pointsmaterial ({
  Farbe: 0x3A4E5D,
  Größe: 0.05,
  Karte: textureloader.load ("iMG / Rain.png"),
  phatest: 0.3,
  Deckkraft: 0.9,
  transparent: true});

07. Regentropfen erstellen.

Mit einer für Schleife können 1500 Regentropfen mit einer zufälligen X-, Y-, Z-Position erstellt werden, die zwischen der Wolke und dem Boden liegt. Jeder Regentropfen erteilt seine eigene zufällige Geschwindigkeit, um den Regen natürlicher auszusehen. Das Partikel wird in den richtigen Scheitelpunkt der Geometrie geschoben. 

 für (var i = 0; i & lt; Teil teuer; i ++) {
  var px = math.random () * 60 - 30,
  py = math.random () * -10,
  pz = math.random () * 20 - 10;
  VAR Partikel = Neue drei.vector3 (px, py, pz);
  partikel.Velocity = new drei.vector3 (0, - (math.random () * 0,9), 0);
  Partikel.vertiele.Push (Partikel); }

08. Arbeit an dem Partikelsystem

Nun wird das Partikelsystem aus der Geometrie und des Materials erstellt. Die Partikel sind so sortiert, dass die Z-Reihenfolge korrekt ist und dann die Regenpartikel ein Kind der zweiten Wolke gemacht werden. Überall, wo die Wolke gezahnt ist, folgt auch der Regen, also nötig, den Regen nach der Wolke zu animieren! 

 Partikelsystem = neue drei.points (Partikel, primäres);
Partikelsystem.Sortpartikel = wahr;
Cloud2.add (Partikelsystem);

09. Stellen Sie die endgültigen Modellpositionen ein

Im letzten Modell wird die Cloud an den Endpunkt des zweiten Cloud-Animationszyklus neu positioniert. Diese neue Wolke sitzt nur am Himmel und nicht animieren. Stattdessen wird der Fluss animieren, so dass das Flussmodell in einer Variablen gespeichert ist, bereit, das Tween hinzuzufügen. 

 var cloud3 = model3.getobjectbyName ("Cloud", true);
  cloud3 = cloud3.children 
;
  Cloud3.Position.set (0, 50, -145);
  VAR River = model3.getobjectbyName ("Fluss", wahr);
  River = River.Children 
;

10. Füllen Sie den Fluss

the water cycle model

Die Wasserstände im Fluss müssen steigen

Im dritten Schritt des Wasserkreislaufs verläuft das Wasser von den Hügeln, füllt Flüsse und Seen, als er zum Meer zurückkehrt. Dies ist die subtiles Bewegung, da es einfach dazu führt, dass die Höhe des Flusses so bewegt wird, dass er ausfüllen kann. Jetzt ist alles vorgespannt, also das drin Funktion wird aufgerufen. 

 Neue Tween (River.Position) .O ({
  y: 3.
  }, 8000). Repeat (Infinity) .EAING (Tween.Easing.Quadratic.inout) .start ();
  drin();
});

Erhalten Sie Designdateien zum Speichern? Schauen Sie sich unseren Leitfaden an Cloud-Speicherung. .

Nächste Seite: AR-Funktionalität und Markierungen hinzufügen

  • 1.
  • 2.
  • 3

Aktuelle Seite: Erstellen Sie eine AR-App: Schritte 01-10

wie man - Die beliebtesten Artikel

Wie man eine Ebene in Photoshop umdreht: einen vollständigen Anleitung

wie man Feb 3, 2026

Doppelt sehen? Dieses Bild wurde mit dem Original umgedreht und gemischt (Bildkredite: Zukunft) Dieses Tu..

Einrichten einer lokalen Entwicklungsumgebung

wie man Feb 3, 2026

(Bildkredite: Zukunft) Mit einem lokalen Entwicklungsumfeld können Sie Ihre eigene Maschine verwenden, um Ihre Websi..

8 Goldene Regeln des mobilen Designs

wie man Feb 3, 2026

Mobile Design ist eine relativ neue, aber wichtige Rücksichtnahme. Vor nur einem Jahrzehnt, der das Design für das Web konzipie..

Erstellen Sie eine digitale Ätzung einer Skizze

wie man Feb 3, 2026

In diesem Tutorial nehmen wir das mechanische Zeichnungsspielzeug eine Skizze als Inspiration und versuchen, diese Funktionen fü..

Malen Sie nass auf Nass in Ölen

wie man Feb 3, 2026

Die Malerei "Alla Prima" (das heißt, nassnetz in einer Sitzung in einer Sitzung) ist die ideale Technik, um die Art der Ölfarbe..

Wie man ein lebendiges Blumenstillleben malen

wie man Feb 3, 2026

Farbe und Textur bieten einen perfekten Weg, um einem blumenstilligen Leben Lebendigkeit zu geben. Diese Demonstration zeigt, wie..

Verwenden Sie Partikel, um ein 3D-Spritzer zu erstellen

wie man Feb 3, 2026

Dieses Tutorial schauert, wie Sie einen flüssigen Spritzer oder einen Kroneneffekt erstellen können, und können verwendet werd..

Wie kann man 3D-Fan-Art

wie man Feb 3, 2026

Nachdem ich die erste Saison der TV-Serie Dagedevil angesehen hatte, wusste ich, dass ich meine eigenen machen musste 3D ..

Kategorien