În ultimii doi ani, a existat o explozie în interesul tehnologiilor VR și AR. Cel mai recent lucru mare în
Design experimental
, AR a sosit și pe web, dar cu această nouă tehnologie vine noi abilități și chiar acum se simte ca vestul sălbatic, fără ca standardele majore să urmeze.
Abilitatea de a afișa 3D pe web nu este nimic nou, dar dacă ați evitat acest lucru, atunci trebuie să sari în tehnologii cum ar fi trei.js sau un cadru (aruncați o privire la runda noastră de
Ar instrumente pentru a încerca
pentru o listă completă).
Indiferent de nivelul de calificare la care vă aflați, nu va face prea multă diferență dacă nu aveți un conținut decent. Gândiți-vă la cazurile de utilizare adecvate pentru AR înainte de a sări în acest articol, vă vom arăta cum să creați o experiență AR multi-marker.
Simțiți-vă nivelul de calificare nu este destul de depus? A
Builder de site-uri web
Va crea un site pentru tine fără agitație. Sau dacă vă scufundați cu un site complex, obțineți
web hosting
dreapta.
Prin utilizarea mai multor markeri, este posibil să se afișeze diferite etape ale unui proces sau de orice conținut unic bazat pe marcatorul respectiv. În acest exemplu, aplicația noastră va explora ciclul de apă. Salt la pagina 3 pentru a afla cum să creați un marker personalizat.
01. Începeți
Deschide
start
dosarul din IDE și în interiorul
index.html.
Găsiți etichetele scriptului. Tot codul din tutorial va intra în interiorul acestora. Pentru a testa aplicația, va trebui să aveți un server și dacă doriți să încercați pe un telefon, va trebui să găzduiască fișierele de pe un server HTTPS. Adăugați variabilele inițiale în etichete de script:
VAR Model1, Model2, Model3, Count = 0,
particule, particule, sistem de particule;
VAR încărcător = New Three.Colladaloader ();
Pentru a face munca scenei AR, va fi încărcat un model. Veți vedea că odată încărcată este stocată în variabila
model1.
. Aceasta este apoi scalată și clonată de două ori pentru cei trei pași. Mai degrabă decât încărcați trei modele diferite, toate ajustările la un model vor fi efectuate în cod pentru a le încărca rapid pe mobil.
La primul model, norul va fi găsit în scenă și acest lucru va fi răsucit într-o nouă poziție, astfel încât norul să se ridice din mare. Acesta este setat să se repete pentru totdeauna și va dura opt secunde pentru ca Tween să animeze și să prezinte o formare de nor.
VAR Cloud1 = Model1.getObjectByName ("nor", adevărat);
Cloud1 = Cloud1.children ;
New tween. între (Cloud1.poziție) .to ({
X: 0,
Y: 30,
z: -15.
}, 8000) .Repeat (infinit) .Easing (tween.easing.quadratic.inout) .start ();
04. Scala-o sus
Norul este scalat pentru a fi aproape invizibil. Un alt Tween este adăugat la nor și acest cântărește norul până la dimensiunea normală. Cu mișcarea și scalarea, va da iluzia că norul crește și se formează din mare ca fiind primul pas în procesul ciclului de apă.
Următorul nor din cel de-al doilea model trebuie poziționat în cazul în care primul nor a terminat animația ca un nor format pe cer. Acest lucru este dat o mișcare de răsucire pentru a se poziționa peste pământ, ridicându-se puțin peste munte. Acest lucru va dura 12 secunde pentru a anima deoarece este o mișcare mai mare.
Cheia pentru a face această lucrare de iluzie permite norului să plouă. Ciclul de apă are ploaia de nor în timp ce se mișcă mai mult pe teren. Pentru a obține efectul, va fi utilizat un sistem de particule. Aici este creată cantitatea de particule și materialul de particule, folosind o imagine de picătură de ploaie.
var textureLoader = Noua 3TureTextRoader ();
particulecunt = 1500;
particule = noi trei.geometrie ();
VAR PMaterial = Nou trei.pointsMaterial ({
Culoare: 0x3A4E5D,
Dimensiune: 0.05,
Harta: TextureLoader.load ("img / ploaie.png"),
Phatest: 0.3,
Opacitate: 0.9,
transparent: true});
07. Creați picăturile de ploaie
Folosind o buclă pentru buclă, 1500 de ploaie pot fi create cu o poziție aleatorie X, Y, Z, care va fi între nor și teren. Fiecare ploaie este dată propria sa viteză aleatorie pentru a face ca ploaia să arate mai natural. Particulele sunt împinse în vârful corect al geometriei.
pentru (var i = 0; i & lt; particulecunt; i ++) {
var px = mateth.random () * 60 - 30,
PY = MATH.RANDMOM () * -10,
pz = mateth.random () * 20-10;
Var Particle = Noua Trei.Vection3 (Px, PY, PZ);
particule.velocity = nou trei.vector3 (0, - (Math.random () * 0,9), 0);
particulele.Ventices.push (particule); }
08. Lucrați pe sistemul de particule
Acum, sistemul de particule este creat din geometrie și material. Particulele sunt setate pentru a fi sortate astfel încât ordinea Z este corectă și apoi particulele de ploaie sunt făcute un copil al celui de-al doilea nor. Oriunde norul este răsucit, ploaia urmează, de asemenea, că nu este nevoie să animați ploaia după nor!
Sistemul de particule = noi trei.Points (particule, pMateriale);
particulelestem.sortparticle = true;
Cloud2.add (particulele);
09. Setați pozițiile modelului final
În modelul final, norul este repoziționat la fața locului de sfârșit al celui de-al doilea ciclu de animație cloud. Acest nou nor va sta doar pe cer și nu animă. În schimb, râul va anima, astfel încât modelul râului este stocat într-o variabilă, gata să adauge întrewenul la el.
VAR Cloud3 = Model3.getObjectByName ("nor", adevărat);
Cloud3 = Cloud3.Children ;
Cloud3.pozition.set (0, 50, -145);
Var River = Model3.getObjectByName ("Râul", TRUE);
râu = râu.Children ;
10. Umpleți râul
Nivelurile de apă din râu trebuie să crească
În a treia etapă a ciclului de apă, apa curge de pe dealuri, umplerea râurilor și lacurilor pe măsură ce se întoarce la mare. Aceasta este cea mai subtilă mișcare, deoarece va implica doar în mișcare înălțimea râului, astfel încât să pară să se umple. Totul este preîncărcat acum, așa că
init.
funcția este numită.
