So erstellen Sie eine AR-App

Sep 11, 2025
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 zeichnet man einen Vogel

wie man Sep 11, 2025

Lernen, wie man einen Vogel zeichnet, kann ein brillanter Zeitvertreib sein. Wenn Sie auf der Suche nach Ihren Zeichnungskenntnissen suchen oder daran denk..

8 Erstaunliche neue Grafikdesign-Tutorials

wie man Sep 11, 2025

Egal, ob Sie gerade in Grafikdesign oder einem erfahrenen Pro anfangen, es gibt immer etwas Neues, um zu erfahren, ob Sie vor dem Spiel stehen möchten. Grafikdesign ist so eine umfangreiche ..

Wie zeichnet man eine Katze

wie man Sep 11, 2025

Möchten Sie wissen, wie man eine Katze zeichnete? Sie sind an den richtigen Ort gekommen. Ziehen von Tieren können schwierig se..

Affinity Designer: So verwenden Sie Gitter

wie man Sep 11, 2025

Affinity Designer ist eine Suite von Vektorbearbeitungstools, die für Mac und Windows verfügbar sind, sowie auf der ipa..

Wie man eine fehlerhafte Zusammensetzung korrigiert

wie man Sep 11, 2025

Ich habe mein ursprüngliches Gemälde um diese Zeit im letzten Jahr erstellt und wurde von den großen Fantasie-Landschaften von Künstlern wie Dongbiao Lu und Ruxing Gao inspiriert. Es war ..

Erstellen von verzierten Fliesen in Substanzdesigner

wie man Sep 11, 2025

Seite 1 von 2: Design- und Textur 3D-Bodenfliesen Design- und Textur 3D-B..

Verwenden Sie Mix-Formen, um Zeichen zu animieren

wie man Sep 11, 2025

Während du dich takelierst 3D-Modelle Die Verwendung von Knochen kann sehr effektiv sein, manchmal ist das Verfahren nur nicht geeignet - und Gesichtsausdrücke ..

Wie kann man ein realistisches Sportwagen machen?

wie man Sep 11, 2025

In den letzten Jahren habe ich meine Fähigkeiten in Beleuchtung und Rendering sowie in einigen anderen Techniken mit verschieden..

Kategorien