Az elmúlt két évben robbanás történt a VR és AR technológiák környékén. A legfrissebb nagy dolog
kísérleti terv
, Ar is megérkezett az interneten, de ezzel az új technológiával új készségek jönnek létre, és most úgy érzi, mintha a Wild Westnek nincs jelentős szabványa.
Képes megjeleníteni a 3D az interneten nem új, de ha már elkerülésének, akkor meg kell ugrani technológiák, mint three.js vagy A-Frame (megnézzük a razzia
AR eszközöket próbálni
Teljes lista esetén).
Bármi is legyen a képzettségi szint, akkor nem fog sok különbséget tenni, ha nincs tisztességes tartalma. Gondolj az AR-re vonatkozó megfelelő felhasználási esetekre, mielőtt beugrottak. Ebben a cikkben megmutatjuk, hogyan hozhat létre több markeres AR tapasztalatot.
Érezd, hogy a képzettségi szintje nem egészen hozzá? A
weboldal építője
létrehoz egy webhelyet az Ön számára a fuss nélkül. Vagy ha egy összetett helyszínen merülsz, szerezd meg a
web hosting
jobb.
Több marker használata esetén lehetséges a folyamat különböző szakaszai vagy a marker alapú egyedi tartalma. Ebben a példában az alkalmazásunk felfedezi a vízciklust. Ugrás a 3. oldalon, hogy megtudja, hogyan hozhat létre egyéni AR jelzőt.
01. Kezdje el
Nyissa meg a
Rajt
Mappa az IDE-ben és a belsejében
index.html
Az oldal megtalálja a szkript címkéket. A bemutató összes kódja belép majd ezekbe. Az alkalmazás teszteléséhez szükség van egy kiszolgálóra, és ha egy telefonon szeretne tesztelni, akkor a fájlokat HTTPS-kiszolgálón kell befogadnia. Adja hozzá a kezdeti változókat a szkript címkéiben:
VAR Model1, Model2, Model3, Count = 0,
részecskék, részecskék, részecskemenet;
var betöltő = új három.Colladaloader ();
Az AR jelenet működéséhez egy modell kerül betöltésre. Látni fogja, hogy a betöltés után a változóban van tárolva
modell1
. Ezután skálázzuk és kétszer klónozzák a három lépést. Ahelyett, töltsön be három különböző modellek, minden beállítást egy modell kerül sor kódot, hogy gyorsan betöltődnek a mobil.
Az első modellen a felhő megtalálható a jelenetben, és ez egy új pozícióba kerül, hogy a felhő kiemelkedjen a tengerből. Ez akkor következik be, hogy ismételje meg örökre, és ez lesz a nyolc másodpercig az átkötő animálni, és azt mutatják, a felhő képződik.
A felhő szinte láthatatlanná válik. Egy másik Tween hozzáadódik a felhőhöz, és ez a felhőt a normál méretig mérlegeli. A mozgással és a skálázással az illúzió, hogy a felhő emelkedik és kiemelkedik a tengerből, mint az első lépés a vízciklus folyamatában.
A második modell következő felhőjét el kell helyezni, ahol az első felhő az animációt készítette, mint egy képződött felhő az égen. Ez egy tweened mozgást kap, hogy a föld felett helyezze el magát, kissé emelkedik a hegy felett. Ez 12 másodpercig tart, hogy animáljon, mivel ez egy nagyobb lépés.
Az illúziós munka megteremtésének kulcsa lehetővé teszi a felhő esővé. A vízciklus a felhő eső, mivel magasabb földet mozog. A hatás eléréséhez egy részecske-rendszert használnak. Itt a részecskék és a részecske anyag mennyisége esedékes képet használ.
VAR TexturEloader = Új három.TextUREloader ();
részlencount = 1500;
részecskék = új három.Geometria ();
var pmaterial = új három.pointsmaterial ({
Szín: 0x3A4E5D,
Méret: 0,05,
Térkép: textureloader.load ("img / rain.png"),
Phatest: 0,3,
Opacity: 0,9,
átlátszó: true});
07. Esőcseppek létrehozása
A hurok használatával 1500 esőcseppet hozhatunk létre egy véletlenszerű X, Y, Z pozícióval, amely a felhő és a talaj között lesz. Minden esőcsepp saját véletlenszerű sebességét kapja, hogy az eső természetesebbé váljon. A részecske a geometria helyes csúcsába kerül.
a (var i = 0; i & lt; részrecocount; i ++) {
var px = math.Random () * 60 - 30,
py = math.Random () * -10,
pz = math.Random () * 20-10;
var részecske = új három.Vector3 (PX, PY, PZ);
részecske.Velocity = új három.Vektor3 (0, - (Math.Random () * 0,9), 0);
részecskék.vertices.push (részecske); }
08. Munka a részecske rendszeren
Most a részecske rendszer a geometriából és az anyagból származik. A részecskéket úgy állítják be, hogy a z-rend helyes, majd az eső részecskék a második felhő gyermeke. Bárhol a felhő tweened, az eső is következik, ezért nem kell animálni az esőt a felhő után!
A végső modellben a felhő áthelyezhető a második felhő animációs ciklus végső helyére. Ez az új felhő csak az égen ül, és nem animál. Ehelyett a folyó animálni fog, így a folyami modell egy változóban van tárolva, készen áll a tween hozzáadására.
var cloud3 = modell3.getobjectbyname ("felhő", igaz);
Cloud3 = Cloud3.Children ;
cloud3.position.set (0, 50, -145);
var river = modell3.getobjectbyname ("folyó", igaz);
River = River.Children ;
10. Töltse ki a folyót
A folyó vízszintje fel kell emelkednie
A vízciklus harmadik lépésében a víz elfogy a hegyek, töltő folyók és tavak, miközben visszatér a tengerbe. Ez a leginkább finom mozgalom, mivel csak a folyó magassága mozgatja, hogy feltöltse. Mindent most előre betöltött, így a
benne
funkciót hívnak.
