I løbet af de sidste to år har der været en eksplosion i interesse omkring VR og AR teknologi. Den seneste store ting i
eksperimentelt design
, AR er også ankommet på nettet, men med denne nye teknologi kommer nye færdigheder, og det føles nu som det vilde vesten uden store standarder at følge.
Evnen til at vise 3D på nettet er ikke noget nyt, men hvis du har undgået det, så skal du hoppe ind i teknologier som Three.js eller A-Frame (tag et kig på vores Roundup af
Ar værktøjer til at prøve
for en komplet liste).
Uanset hvilket færdighedsniveau du er på, vil det ikke gøre meget forskel, hvis du ikke har noget anstændigt indhold. Tænk på passende brugssager for AR, før du hopper ind. I denne artikel vil vi vise dig, hvordan du opretter en multi-markør AR-oplevelse.
Feel din færdighedsniveau er ikke helt op til det? EN
Website Builder.
vil skabe et websted for dig uden besværet. Eller hvis du dykker ind med et komplekst websted, skal du få
Web Hosting.
ret.
Ved at bruge flere markører er det muligt at vise forskellige stadier af en proces eller et unikt indhold baseret på den markør. I dette eksempel vil vores app undersøge vandcyklusen. Gå til side 3 for at lære at oprette en brugerdefineret AR-markør.
01. Kom godt i gang
Åbn
Start
mappe i din IDE og inde i
index.html.
Side Find script-tags. Al koden i vejledningen vil gå ind i disse. For at teste appen skal du have en server, og hvis du vil teste på en telefon, skal du være vært for filerne på en HTTPS-server. Tilføj de første variabler i script-tags:
Var Model1, Model2, Model3, Count = 0,
partikler, particlecount, particlesystem;
var loader = ny tre.colladaLoader ();
For at gøre AR-scenen fungerer en model. Du vil se, at den en gang er indlæst, den er gemt i variablen
Model1.
. Dette skaleres derefter og klones to gange for de tre trin. I stedet for at indlæse tre forskellige modeller, vil alle justeringer til en model ske i kode for at gøre den belastning hurtigt på mobil.
På den første model vil skyen blive fundet i scenen, og dette vil være tweened til en ny position, så skyen stiger ud af havet. Dette er indstillet til at gentage for evigt, og det vil tage otte sekunder for tween at animere og vise en sky-formning.
Skyen skaleres ned for at være næsten usynlig. En anden tween er tilføjet til skyen, og denne skalerer skyen op til den normale størrelse. Med bevægelsen og skaleringen vil den give illusionen om, at skyen stiger og danner ud af havet som det første skridt i vandcyklusens proces.
Den næste sky fra den anden model skal placeres, hvor den første sky afsluttede sin animation som en formet sky i himlen. Dette gives en tweened bevægelse til at placere sig over jorden, stiger lidt over bjerget. Dette vil tage 12 sekunder at animere, da det er et større træk.
Nøglen til at gøre dette illusion arbejde gør det muligt for skyen at regne. Vandcyklusen har cloud regnen, da den bevæger sig højere over land. For at få effekten vil et partikelsystem blive brugt. Her skabes mængden af partikler og partikelmaterialet ved anvendelse af et regnfald billede.
Var textureloader = ny tre.TexturEloader ();
particlecount = 1500;
partikler = ny tre.geometri ();
VAR PMATISmaterial = Nye tre.PointsMaterial ({
Farve: 0x3a4e5d,
Størrelse: 0,05,
Kort: Textureloader.load ("img / rain.png"),
PhaTest: 0,3,
Opacitet: 0,9,
Gennemsigtig: True});
07. Opret regndråber
Ved hjælp af en til loop kan 1500 regndråber oprettes med en tilfældig X, Y, Z-position, der vil være mellem skyen og jorden. Hver regndråbe får sin egen tilfældige hastighed for at få regnen til at se mere naturligt ud. Partiklen skubbes ind i den korrekte hjørne af geometrien.
for (var I = 0; i & lt; particlecount; i ++) {
var px = math.random () * 60 - 30,
py = math.random () * -10,
pz = math.random () * 20 - 10;
var partikel = ny tre.vector3 (PX, PY, PZ);
partikel.velocity = ny tre.vector3 (0, - (math.random () * 0,9), 0);
particles.vertices.push (partikel); }
08. Arbejde på partikelsystemet
Nu er partikelsystemet skabt ud af geometrien og materialet. Partiklerne er indstillet til at blive sorteret, så z-ordren er korrekt, og derefter laves regnpartiklerne et barn i den anden sky. Hvor som helst skyen er tweened, følger regnen også, så det er ikke nødvendigt at animere regnen efter skyen!
I den endelige model bliver skyen omplaceret til slutningen af den anden sky animationscyklus. Denne nye sky kommer bare til at sidde i himlen og ikke animere. I stedet kommer floden til at animere, så flodmodellen er gemt i en variabel, klar til at tilføje tween til den.
Var Cloud3 = Model3.getobjectbyname ("Cloud", TRUE);
Cloud3 = Cloud3.Children ;
cloud3.position.set (0, 50, -145);
Var River = Model3.getobjectbyname ("River", TRUE);
River = River.Children ;
10. Fyld op ad floden
Vandniveauer i floden skal stige
I det tredje trin i vandcyklusen løber vandet ud af bakkerne, påfyldning af floder og søer, når det vender tilbage til havet. Dette er den mest subtile bevægelse, da det bare vil medføre at flytte flodens højde, så det ser ud til at fylde op. Alt er forudindlæst nu, så det
i det
funktion kaldes.
New Tween.Tween (River.Position) .TO ({
Y: 3.
}, 8000). Reteat (uendelig).
i det();
});
Fik designfiler for at gemme? Tjek vores vejledning til
Sky lagring
.
