AR-sovelluksen rakentaminen

Sep 11, 2025

Miten tehdään

Sivu 1/3:

Rakenna AR-sovellus: vaiheet 01-10

Rakenna AR-sovellus: vaiheet 01-10
Rakenna AR-sovellus: vaiheet 11-20
Kuinka luoda mittaustiedosto

Viimeisten kahden vuoden aikana VR- ja AR-teknologioiden kiinnostus on ollut räjähdys. Viimeisin suuri asia Kokeellinen muotoilu , AR on myös saapunut verkkoon, mutta tämä uusi teknologia tulee uusia taitoja, ja juuri nyt tuntuu villi lännestä ilman suuria standardeja.

Kyky näyttää 3D: n verkossa ei ole mitään uutta, mutta jos olet välttänyt sen, sinun on hypätä teknologioihin, kuten kolme.js tai A-kehyksen (katsokaa meidän roureup of AR-työkalut kokeilemaan Täysi lista).

Riippumatta siitä, mitä taitotaso olet, se ei tee paljon eroa, jos sinulla ei ole kunnon sisältöä. Ajattele asianmukaisia käyttötapauksia AR: lle ennen hyppäämistä. Tässä artikkelissa näytämme sinulle, miten luodaan monimuotoisen AR-kokemuksen.

Tunne taitotaso ei ole aivan sitä? A Verkkosivuston rakentaja Luo sivusto sinulle ilman hälytystä. Tai jos sukeltat monimutkaisella sivustolla, saat sivujen ylläpito Oikea.

Käyttämällä useita merkkejä on mahdollista näyttää prosessin eri vaiheita tai ainutlaatuista sisältöä, joka perustuu kyseiseen merkkiin. Tässä esimerkissä sovellus tutustuu vesisuunnitelmaan. Siirry sivulle 3 oppia luomaan Custom AR -merkin.

01. Aloita

Avaa alkaa Kansio IDE: ssä ja sisäpuolella index.html Sivu Etsi komentosarjan tunnisteet. Kaikki opetusohjelman koodi menevät näihin. Sovelluksen testaaminen Sinun on oltava palvelin ja jos haluat testata puhelimessa, sinun on vastaanotettava tiedostot HTTPS-palvelimella. Lisää alkuperäiset muuttujat käsikirjoitustunnisteissa:

 var malli1, malli2, malli3, count = 0,
  hiukkaset, partikkelit;
  Var Loader = uusi kolme.colladaloader ();

02. Lataa malli

Jotta AR Scene Work, malli ladataan. Näet, että kerran ladattu se tallennetaan muuttujaan Model1 . Sitten tämä skaalataan ja kloonataan kahdesti kolmelle vaiheelle. Sen sijaan, että kuormitettaisiin kolme erilaista mallia, kaikki muutokset yhteen malliin tehdään koodissa, jotta se latautuu nopeasti mobiiliin.

 Loader.load ('Landscape1.dae', toiminto (COLLADA) {
  Model1 = Collada.Scene;
  Model1.Scale.x = Model1.Scale.y = Model1.Scale.Z = 0,015;
  Model2 = Model1.clone ();
  Model3 = Model1.clone ();

03. Aseta Tweening

Ensimmäisessä mallilla pilvi löytyy paikalle ja tämä on huijaus uuteen asentoon niin, että pilvi nousee merestä. Tämä on asetettu toistamaan ikuisesti ja se kestää kahdeksan sekuntia Tweenille animoida ja näyttää pilven muodostamisen.

 var Cloud1 = Model1.geobjectbynimi ("pilvi", totta);
  Cloud1 = Cloud1.children ;
  uusi Tween.tween (Cloud1.position) .to ({
  X: 0,
  Y: 30,
  z: -15
  }, 8000) .Repeat (ääretön). Singing (Tween.eace.quadratic.inout) .Start ();

04. Skaalaa se

Pilvi skaalataan lähes näkymättömäksi. Toinen Tween lisätään pilveen ja tämä asentaa pilveen normaalikokoiseksi. Liikkeen ja skaalauksen kanssa se antaa illuusion siitä, että pilvi nousee ja muodostavat merestä ensimmäisen askeleena vesiskoodin prosessissa.

 Cloud1.Scale.x = Cloud1.Scale.y = Cloud1.Scale.Z = 0.0;
  uusi Tween.tween (cloud1.scale) .to ({
  X: 1,
  Y: 1,
  z: 1
  }, 8000) .Repeat (ääretön). Singing (Tween.eace.quadratic.inout) .Start ();

05. Aseta toinen pilvi

the water cycle scene — Toinen pilvi istuu vuoren yläpuolella

Seuraava pilvi toisesta mallista on sijoitettava silloin, kun ensimmäinen pilvi päättyi animaation muodostuneeksi pilviksi taivaalla. Tätä annetaan Tweenoitu liike asentoon maan yli, nousee hieman vuoren yläpuolelle. Tämä kestää 12 sekuntia animoida, koska se on suurempi liike.

 var Cloud2 = Model2.getObjectbynimi ("pilvi", totta);
  Cloud2 = Cloud2.children ;
  Cloud2.position.set (0, 30, -15);
  uusi Tween.tween (Cloud2.position) .to ({
  X: 0,
  Y: 50,
  z: -145
  }, 12000) .Repeat (Infinity). Singing (Tween.ecast.quadratic.inout) .Start ();

06. Tee se sade

Avain tämän illuusion työn tekemiseen antaa pilven sateen. Vesisyklin on pilvi sade, kun se liikkuu suuremmaksi maalla. Vaikutuksen saamiseksi käytetään hiukkasjärjestelmää. Tässä luodaan hiukkasten määrä ja hiukkasmateriaali käyttäen sateen pudotuskuvaa.

 var Textureloader = uusi kolme.textureloader ();
Suorata = 1500;
hiukkaset = uusi kolme.geometria ();
var pmaterial = uusi kolme.PointMateriaalia ({
  Väri: 0x3A4E5D,
  Koko: 0,05,
  Kartta: Textureloader.load ("img / sade.png"),
  PHATEST: 0.3,
  Opasiteetti: 0,9,
  Läpinäkyvä: True});

07. Luo sadepisarat

Silmukan käyttäminen, 1500 sadepisarat voidaan luoda satunnaisesti X, Y, Z-asento, joka on pilven ja maan välillä. Jokaiselle sadepisarille annetaan oma satunnaisnopeus, jotta sade näyttää luonnollisemmalta. Hiukkanen työnnetään geometrian oikeaan kärkeen.

 (var i = 0; i & lt; hiilen; i ++) {
  var px = Math.random () * 60 - 30,
  PY = MATH.RANDOM () * -10,
  PZ = MATH.RANDOM () * 20 - 10;
  var partikkeli = uusi kolme.Vector3 (px, PY, PZ);
  particle.velocity = uusi kolme.Vector3 (0, - (Math.random () * 0,9), 0);
  hiukkaset.vertices.Push (hiukkanen); }

08. Työ hiukkasjärjestelmässä

Nyt hiukkasjärjestelmä syntyy geometriasta ja materiaalista. Hiukkaset asetetaan lajitellaan siten, että z-tilaus on oikea ja sadepartikkelit tehdään toisen pilven lapsen. Missä tahansa pilvi on Tweenoitu, sade seuraa myös, joten ei tarvitse animoida sadetta pilven jälkeen!

 Partikluesysteemi = uusi kolme.Points (hiukkaset, pmaterial);
Particlesystem.Sortpartikkelit = totta;
Cloud2.Add (hiukkassysteemi);

09. Aseta lopulliset mallipaikat

Lopullisessa mallissa pilvi siirretään uudelleen toisen pilvi-animaatiokierron loppupisteeseen. Tämä uusi pilvi on vain istua taivaalla eikä animoida. Sen sijaan joki aikoo animoida, joten joen malli varastoidaan muuttujaksi, valmis lisäämään Tween.

 var Cloud3 = Model3.getObjectbynimi ("pilvi", totta);
  Cloud3 = Cloud3.children ;
  Cloud3.position.set (0, 50, -145);
  var joki = malli3.getObjectbynimi ("joki", totta);
  River = River.children ;

10. Täytä joki

the water cycle model — Vesipitoisuus joen on noustava

Vedenkierron kolmannessa vaiheessa vesi kulkee kukkuloista, jokia ja järviä, kun se palaa mereen. Tämä on hienoimpia liikkeitä, koska se vain merkitsee joen korkeuden siirtämistä niin, että se näyttää täyttävän. Kaikki on esiladattu nyt, joten sen sisällä Toimintoa kutsutaan.

 Uusi Tween.tween (River.position) .TO ({
  Y: 3
  }, 8000) .Repeat (ääretön). Singing (Tween.ecasing.quadratic.inOut) .Start ();
  sen sisällä();
});

Sain Design-tiedostoja tallentaaksesi? Tutustu opas pilvivarasto .

Seuraava sivu: Lisää AR-toiminnallisuus ja markkerit

Tämänhetkinen sivu: Rakenna AR-sovellus: vaiheet 01-10

Seuraava sivu Rakenna AR-sovellus: vaiheet 11-20

AR-sovelluksen rakentaminen

01. Aloita

02. Lataa malli

03. Aseta Tweening

04. Skaalaa se

05. Aseta toinen pilvi

06. Tee se sade

07. Luo sadepisarat

08. Työ hiukkasjärjestelmässä

09. Aseta lopulliset mallipaikat

10. Täytä joki

Miten tehdään - Suosituimmat artikkelit

Miten Photoshop iPhonessa (kyllä, se on asia)

21 tapaa optimoida CSS ja nopeuttaa sivustosi

Rakenna animoitu split-näytön aloitussivu

Luo kuvattu muotokuva kuvista

Luo vektorin siirtymäverkon harja

Lisää elävöitä öljymaalauksiin näillä huippuvihjeillä

Miten prototyyppi mobiilisovellus Adobe XD: llä

Tee animoitu GIF Photoshopissa

Luokat