Hoe een AR-app te bouwen

Jan 30, 2026

Procedures

Pagina 1 van 3:

Bouw een AR-app: stappen 01-10

Bouw een AR-app: stappen 01-10
Bouw een AR-app: stappen 11-20
Hoe een aangepaste AR-marker te maken

In de afgelopen twee jaar is er een explosie geweest in interesse omliggende VR- en AR-technologieën. Het laatste grote ding in experimenteel ontwerp , AR is ook op het web aangekomen, maar met deze nieuwe technologie komt nieuwe vaardigheden, en nu voelt het als het wilde westen zonder grote normen te volgen.

Het vermogen om 3D op het web weer te geven, is niets nieuws, maar als je het hebt vermeden, moet je in technologieën zoals Three.js of A-frame (kijk eens naar onze afsluiting van AR-hulpmiddelen om te proberen voor een volledige lijst).

Welk vaardigheidsniveau waar je ook bent, het zal niet veel verschil maken als je geen fatsoenlijke inhoud hebt. Denk aan geschikte gebruiksgevallen voor AR voordat u erin springt. In dit artikel laten we u zien hoe u een Multi-marker Ar-ervaring kunt maken.

Voel je vaardigheidsniveau niet helemaal goed? EEN website bouwer zal een site voor u maken zonder de gedoe. Of als je duikt met een complexe site, haal dan de web hosting Rechtsaf.

Door meerdere markers te gebruiken, is het mogelijk om verschillende stadia van een proces of een unieke inhoud te tonen op basis van die marker. In dit voorbeeld zal onze app de waterkringloop verkennen. Spring naar pagina 3 om te leren hoe u een aangepaste AR-markering kunt maken.

01. Ga aan de slag

Open de begin map in je IDE en in de index.html Pagina Zoek de script-tags. Alle code in de tutorial gaat naar binnen. Om de app te testen, moet u een server hebben en als u op een telefoon wilt testen, moet u de bestanden op een HTTPS-server hosten. Voeg de initiële variabelen toe in de script-tags:

 Var Model1, Model2, Model3, Count = 0,
  deeltjes, deeltjes, deeltjesysteem;
  Var loader = nieuwe drie.colladaloader ();

02. Laad het model

scene — Gebruik het pictogram in het rechterbovenhoek om het beeld te vergroten

Om het AR-scène te laten werken, wordt een model geladen. U zult zien dat eenmaal geladen is in de variabele opgeslagen Model1 Dit wordt vervolgens geschaald en tweemaal gekoppeld voor de drie stappen. In plaats van drie verschillende modellen te laden, zullen alle aanpassingen aan het ene model in de code worden gedaan om het snel op mobiel te laden.

 loader.load ('Landscape1.dae', functie (Collada) {
  Model1 = Collada.Scene;
  Model1.Scale.x = Model1.Scale.y = Model1.Scale.z = 0,015;
  Model2 = Model1.clone ();
  MODEL3 = MODEL1.CLONE ();

03. Stel de tweening in

Op het eerste model wordt de cloud in de scène gevonden en dit zal tot een nieuwe positie worden gedraaid, zodat de cloud uit de zee stijgt. Dit is ingesteld om voor altijd te herhalen en het duurt acht seconden voor de Tween om te animeren en een cloudforming te tonen.

 Var Cloud1 = Model1.getobjectByName ("Cloud", TRUE);
  Cloud1 = Cloud1.Children ;
  Nieuwe Tween.Tween (Cloud 1. Positionering). To ({
  x: 0,
  y: 30,
  z: -15
  }, 8000). Herhaal (Infinity). Lezing (tween.masing.quadratic.inout) .start ();

04. Schaal het op

De cloud wordt geschaald om bijna onzichtbaar te zijn. Nog een tween wordt toegevoegd aan de cloud en dit schaalt de cloud tot zijn normale grootte. Met de beweging en de schaalverdeling zal het de illusie geven dat de wolk stijgt en uit de zee wordt gevormd als de eerste stap in het proces van de waterkringloop.

 Cloud1.Scale.x = cloud1.scale.y = cloud1.scale.z = 0,0;
  Nieuwe Tween.Tween (Cloud1.Scale). To ({
  x: 1,
  y: 1,
  z: 1
  }, 8000). Herhaal (Infinity). Lezing (tween.masing.quadratic.inout) .start ();

05. Stel de tweede cloud in

the water cycle scene — Een tweede wolk zit boven de berg

De volgende wolk van het tweede model moet worden gepositioneerd waarbij de eerste wolk zijn animatie afrondde als een gevormde wolk in de lucht. Dit krijgt een tweened beweging om zichzelf over het land te positioneren, licht op te staan boven de berg. Dit duurt 12 seconden om te animeren omdat het een grotere zet is.

 Var Cloud2 = Model2.getObjectByName ("Cloud", TRUE);
  Cloud2 = Cloud2.Children ;
  cloud2.position.set (0, 30, -15);
  nieuwe tween.tween (cloud2.positie) .TO ({
  x: 0,
  y: 50,
  z: -145
  }, 12000). Herhaal (Infinity). Lezing (tween.masing.quadratic.inout) .start ();

06. Maak het regen

De sleutel tot het maken van dit illusiewerk maakt de cloud toe aan regen. De watercyclus heeft de cloudregen terwijl het hoger over land beweegt. Om het effect te krijgen, wordt een deeltjessysteem gebruikt. Hier wordt de hoeveelheid deeltjes en het deeltjesmateriaal gecreëerd, met behulp van een regendruppelbeeld.

 Var Textureloader = nieuwe drie.textureloader ();
Deelbeurt = 1500;
deeltjes = nieuwe drie.geometry ();
var PMATERIAL = NIEUWE DRIE POINTENMATERIAL ({
  Kleur: 0x3A4E5D,
  Grootte: 0,05,
  Kaart: Textureloader.load ("img / regen.png"),
  phatest: 0.3,
  Dekking: 0.9,
  transparant: true});

07. Maak regendruppels

Met behulp van een voor lus kunnen 1500 regendruppels worden gemaakt met een willekeurige X-, Y-, Z-positie die tussen de cloud en de grond zal liggen. Elk regendruppel krijgt zijn eigen willekeurige snelheid om de regen meer natuurlijker uit te laten zien. Het deeltje wordt in de juiste vertex van de geometrie geduwd.

 voor (var i = 0; i & lt; deeltjes; i ++) {
  Var PX = MATH.RANDOM () * 60 - 30,
  py = math.random () * -10,
  pz = math.random () * 20 - 10;
  vardeelt deeltje = nieuwe drie.vector3 (PX, PY, PZ);
  deeltje.Velocity = Nieuwe Three.Vector3 (0, - (Math.Random () * 0.9), 0);
  deeltjes.vertices.push (deeltje); }

08. Werk aan het deeltjessysteem

Nu wordt het deeltjessysteem gecreëerd uit de geometrie en het materiaal. De deeltjes worden ingesteld om te worden gesorteerd, zodat de Z-order correct is en dan worden de regendeeltjes een kind van de tweede wolk gemaakt. Overal waar de cloud is afgesloten, volgt de regen ook, dus het is niet nodig om de regen te animeren na de cloud!

 deeltjesysteem = nieuwe drie.punten (deeltjes, pMateriaal);
deeltjesystem.sortparticles = waar;
cloud2.add (deeltjes);

09. Stel de definitieve modelposities in

In het laatste model wordt de cloud verplaatst naar de eindpunt van de tweede cloud-animatiecyclus. Deze nieuwe wolk gaat gewoon in de lucht zitten en niet animeren. In plaats daarvan gaat de rivier animeren, dus het riviermodel wordt opgeslagen in een variabele, klaar om de Tween toe te voegen.

 Var Cloud3 = Model3.getObjectByName ("Cloud", TRUE);
  cloud3 = cloud3.children ;
  cloud3.position.set (0, 50, -145);
  Var River = Model3.getObjectByName ("rivier", waar);
  River = River.Children ;

10. Vul de rivier op

the water cycle model — Waterspiegels in de rivier moeten stijgen

In de derde stap van de watercyclus loopt het water van de heuvels en vult rivieren en meren terwijl het terugkeert naar de zee. Dit is de meest subtiele beweging, omdat het gewoon de hoogte van de rivier zal bewegen, zodat het lijkt op te vullen. Alles is nu voorgeladen, dus de in het functie wordt genoemd.

 Nieuwe tween.tween (rivier.positie). To ({
  y: 3
  }, 8000). Herhaal (Infinity). Lezen (Tween.masing.Quadratic.inout) .start ();
  in het();
});

Heb je ontwerpbestanden om op te slaan? Bekijk onze gids naar cloud opslag

Volgende pagina: AR AR-functionaliteit en markeringen toevoegen

Huidige pagina: Bouw een AR-app: stappen 01-10

Volgende bladzijde Bouw een AR-app: stappen 11-20

Hoe een AR-app te bouwen

01. Ga aan de slag

02. Laad het model

03. Stel de tweening in

04. Schaal het op

05. Stel de tweede cloud in

06. Maak het regen

07. Maak regendruppels

08. Werk aan het deeltjessysteem

09. Stel de definitieve modelposities in

10. Vul de rivier op

Procedures - Meest populaire artikelen

Hoe te tekenen perspectief

Waterimulaties maken

Maak een gastvrij interieur met behulp van lijntekeningen

Affinity Designer: Hoe de Pen-tool te gebruiken

Verf rimpeling water in oliën

Maak een splash-effect in RealFlow

Ontwikkel je karikatuurvaardigheden

Een geanimeerde webbanner in Photoshop maken

Categorieën