I løpet av de siste to årene har det vært en eksplosjon i interesse rundt VR og AR-teknologier. Den siste store tingen i
eksperimentelt design
, AR har også kommet på nettet, men med denne nye teknologien kommer nye ferdigheter, og akkurat nå føles det som det ville vestlige uten store standarder å følge.
Muligheten til å vise 3D på nettet er ikke noe nytt, men hvis du har unngått det, må du hoppe inn i teknologier som tre.js eller A-ramme (ta en titt på vår roundup av
AR-verktøy for å prøve
for en fullstendig liste).
Uansett hva ferdighetsnivå du er på, vil det ikke gjøre stor forskjell hvis du ikke har noe anstendig innhold. Tenk på passende bruk tilfeller for AR før du hopper inn. I denne artikkelen viser vi deg hvordan du lager en Multi-Marker AR-opplevelse.
Føl din ferdighetsnivå er ikke helt opp til det? EN
Nettstedbygger
vil skape et nettsted for deg uten oppstyret. Eller hvis du dykker inn med et komplekst nettsted, få
Web Hosting.
Ikke sant.
Ved å bruke flere markører, er det mulig å vise forskjellige stadier av en prosess eller et unikt innhold basert på den markøren. I dette eksemplet vil vår app utforske vannsyklusen. Hopp til side 3 for å lære å lage en egendefinert AR-markør.
01. Kom i gang
Åpne
start
mappe i din IDE og inne i
index.html.
Side Finn skriptkryssene. All kode i opplæringen vil gå inn i disse. For å teste appen må du ha en server, og hvis du vil teste på en telefon, må du være vert for filene på en HTTPS-server. Legg til de første variablene i skriptmerkene:
var modell1, modell2, modell3, telling = 0,
partikler, particlecount, partiklesystem;
VAR Loader = Ny tre.Colladaloader ();
For å gjøre Arcenearbeidet, vil en modell bli lastet inn. Du vil se at den en gang lastet den er lagret i variabelen
Modell1.
. Dette skaleres deretter og klones to ganger for de tre trinnene. I stedet for å laste tre forskjellige modeller, vil alle justeringene til en modell bli gjort i kode for å få den til å laste det raskt på mobilen.
På den første modellen kommer skyen i scenen, og dette vil bli tweened til en ny posisjon slik at skyen stiger ut av havet. Dette er satt til å gjenta for alltid, og det tar åtte sekunder i tween å animere opp og vise en skyforming.
var Cloud1 = Model1.GetObjectbyname ("Cloud", True);
Cloud1 = Cloud1.Children ;
ny tween. mellom (cloud1.position). til ({{
x: 0,
Y: 30,
z: -15.
}, 8000) .Repeat (uendelig) .aserende (tween.easing.quadratisk. I). Start ();
04. Skal den opp
Skyen er nedskalert for å være nesten usynlig. En annen mellom er tilsatt til skyen og dette skalerer skyen opp til sin normale størrelse. Med bevegelsen og skalingen, vil den gi den illusjonen at skyen stiger og danner ut av havet som det første trinnet i vannsyklusen.
cloud1.scale.x = cloud1.scale.y = cloud1.scale.z = 0,0;
ny tween. mellom (cloud1.scale). til ({{
X: 1,
Y: 1,
Z: 1
}, 8000) .Repeat (uendelig) .aserende (tween.easing.quadratisk. I)
Den neste skyen fra den andre modellen må plasseres der den første skyen avsluttet sin animasjon som en dannet sky i himmelen. Dette er gitt en tweened bevegelse for å posisjonere seg over landet, stiger litt over fjellet. Dette vil ta 12 sekunder å animere, da det er et større trekk.
var Cloud2 = Model2.GetObjectbyname ("Cloud", True);
Cloud2 = Cloud2.Children ;
cloud2.position.Set (0, 30, -15);
ny tween. mellom (cloud2.position). til ({{
x: 0,
Y: 50,
Z: -145.
}, 12000) .Repeat (uendelig) .aserende (tween.easing.quadratisk. I)
06. Gjør det regn
Nøkkelen til å gjøre dette illusjonsarbeidet tillater skyen å regne. Vannsyklusen har skytregnet som det beveger seg høyere over land. For å få effekten, vil et partikkel system bli brukt. Her opprettes mengden av partikler og partikkelmaterialet, ved hjelp av et regnfallsbilde.
Var Textureloader = Ny tre.TextureLoader ();
ParticleCount = 1500;
partikler = ny tre.geometri ();
var pmaterial = nytt tre.pointsmaterial ({
Farge: 0x3a4e5d,
Størrelse: 0,05,
Kart: Textureloader.Load ("img / rain.png"),
Phatest: 0.3,
Opacity: 0.9,
Transparent: True});
07. Lag regndråper
Ved hjelp av en for loop kan 1500 regndråper opprettes med en tilfeldig X, Y, Z-posisjon som vil være mellom skyen og bakken. Hver regndråpe får sin egen tilfeldige hastighet for å få regnet til å se mer naturlig ut. Partikkelen skyves inn i riktig toppunkt for 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-partikkel = Ny tre.Vector3 (PX, PY, PZ);
Particle.Velocity = Ny tre.Vector3 (0, - (Math.Random () * 0,9), 0);
partikler.vertices.push (partikkel); }
08. Arbeid på partikkelsystemet
Nå er partikkelsystemet skapt ut av geometrien og materialet. Partiklene er satt til å bli sortert slik at z-orderen er riktig, og deretter blir regnpartiklene laget et barn i den andre skyen. Overalt Shouden er tweened, regnet følger også, så det er ikke nødvendig å animere regnet etter skyen!
Partiklesystem = Nye tre .points (partikler, pmaterial);
Particlesystem.Sortparticles = True;
cloud2.add (partiklesystem);
09. Sett de endelige modellposisjonene
I den endelige modellen er skyen reposisjonert til sluttpunktet av den andre Cloud animasjonssyklusen. Denne nye skyen kommer bare til å sitte på himmelen og ikke animere. I stedet kommer elven å animere, så elvemodellen er lagret i en variabel, klar til å legge til 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. Fyll opp elven
Vannnivået i elven må stige
I det tredje trinnet av vannsyklusen løper vannet av åsene, fyller elver og innsjøer når den går tilbake til sjøen. Dette er den mest subtile bevegelsen, da det bare vil medføre å flytte høyden på elva, slik at det ser ut til å fylle opp. Alt er forhåndslastet nå, så
i det
funksjonen kalles.
Ny tween.tween (river.position) .to ({{
Y: 3.
}, 8000) .Repeat (uendelig). Sende (tween.easing.quadratisk. I). Start ()
i det();
});
Har du designfiler for å lagre? Sjekk ut vår guide til
skylagring
.
Neste side: Legg til AR-funksjonalitet og markører
