Hogyan kódolhat egy bővített valóságjelzőt

Sep 15, 2025

kézikönyv

Page 1 of 2:

1 oldal

1 oldal
2. oldal

A bővített valóság már most már körülötte, de a WEBRTC (valós idejű kommunikáció) támogatásával lehetséges, hogy az Android és az asztali eszközökhasználók hozzáférjenek egy telefon kamerájához.

Jelenleg az iOS nem tudja támogatni ezt, mivel a Safari-t befolyásoló Webkit böngészőben nem hajtották végre, de a fejlesztés, és ellenőrizheti az állapotot itt . Ha rendelkezik iOS-eszközzel, akkor nem kell kihagynia, mert még mindig használhatja a webkamerát az asztali számítógépen.

Jegyzet: Ahhoz, hogy ezt a mobil króm böngészőjén dolgozzon, a tartalmat biztonságos aljzatréteggel kell ellátni (azaz a https helyett a standard http). A Desktop jelenleg rendszeres httpkal működik.

Töltse le a szükséges fájlokat, hogy menjen a bemutatóhoz Filesilo , Válassza ki az ingyenes dolgokat és ingyenes tartalmakat a bemutató mellett.

Ebben a bemutatóban megmutatom, hogyan kell elhelyezni egy bővített valóságjelzőt egy telefonkamera előtt. Ezt a böngésző és a böngésző felveszi Ar.js , és a tartalom a tetején 3D-s tetején leszel, ami az AR markerhez ragaszkodik.

Sok lehetséges felhasználási lehetőség van erre a technikára. Például érdemes létrehozni egy egyszerű 3D-t kreatív folytatás , majd az AR jelző kinyomtatható a névjegykártyájára. Mivel a marker körül tudsz járni, ez nagyszerű a tartalomhoz, amit a különböző szögekről szeretnél látni - gondoljon egy bizonyos svéd bútorgyártó, amely animált lépéseket ad, amelyek bármilyen szögből megtekinthetők! Olyan sok lehetőség van, hogy ez hasznos lehet.

01. Adja hozzá a könyvtárakat

Start by linking up your project libraries — Indítsa el a projektkönyvtárak összekapcsolásával

Miután Ön letöltötte a bemutatófájlokat megy a projekt mappában nyissa meg a Start mappát a kód szerkesztőben, majd nyissa ki a index.html szerkesztéshez szükséges fájl. Ebben a szakaszban a könyvtárakat összekapcsolni kell - és nagyon kevés a projekt! A könyvtárak három szakaszban vannak: három.js, jartoolkit és a három.js kiterjesztés az Artoodkit és Marker.

 & lt; scrcipt src = 'js / three.js' & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "vendor / jartoolkit5 / build / artoolkit.min.js" & gt; & lt; / script & gt;
& lt; script src = "vendor / jsartoolkit5 / js / artoolkit.api.js" & gt; & lt; / script & gt;
& lt; script src = "háromx-artoolkitsource.js" & gt; & lt; / script & gt;
& lt; script src = "háromx-artoolkitcontext.js" & gt; & lt; / script & gt;
& lt; script src = "háromx-armadercontrols.js" & gt; & lt; / script & gt;
& lt; script & gt; háromx.artoolkitcontext.baseurl = '/' & lt; / script & gt;

02. Vigyázzon a CSS-stílusra

Ban,-ben fej Az oldal részét adja hozzá forgatókönyv Címkék és csepp a stílus szabályainak a test és a vászon elem. Ez biztosítja, hogy helyesen helyesen helyezzék el az oldalt a böngésző által hozzáadott alapértelmezett margók nélkül.

 test {
  Margó: 0px;
  túlcsordulás: rejtett;
}
vászon {
  Pozíció: abszolút;
  Top: 0;
  Bal: 0;
}

03. Globális változók hozzáadása

Ban,-ben test Az oldal részét adja hozzá forgatókönyv Címkék, ahol a fennmaradó JavaScript kód a bemutatóhoz megy. Számos változó szükséges: az első sor három.js, a második az ar.js, a harmadik a modell, majd a változó a modell betöltéséhez.

 VAR renderer, jelenet, kamera;
var Artoolkitcontext, OnrenderFCTS, Artoolkitsource, MarkerRoot, Artoolkitmarker, Lasttimemsec;
var modell, cső1, Tube2, Közép, részletek, impulzus;
var betöltő = új három.Colladaloader ();

04. Töltse be a modellt

Mielőtt a jelenet be van állítva, a modell betöltődik, hogy megjelenjen, ha a jelölők észlelése. Ezt 10-re csökkenti, hogy pontosan illeszkedjen az AR markerre. A modell 10 cm a szélesség és magasság, így a marker 1 cm, amely 1 növekményt jelent három.js.

Loader.load ('Model / scene.dae', függvény (Collada) {
  modell = collada.scene;
  Model.scale.x = Model.scale.y = Model.scale.z = 0,1;
  Részletek = Model.GetobjectbyName ("Részletek", True);

05. Javítsa meg néhány megjelenítési problémát

Még mindig a COLLADA betöltési kódja, miután a modell betöltötte, lesz egy pár csövek, amelyek körül forognak, így megtalálhatók a Collada jelenetben. Az első cső megtalálható, és az anyag megragadja. Itt az anyag csak a modell belsejében van, nem pedig kívülről.

 Tube1 = modell.getobjectbyName ("Tube1", igaz);
var a = tube1.chydren  .material;
a.transparent = igaz;
a.side = három ["hátoldal"];
A.Blending = Három ["adalékfizetés"];
A.opacity = 0,9;

06. Ismételje meg a javítást

If the transparency and additive blending is not enabled, the model looks like this when loaded and displayed on top of the AR marker – not very exciting and barely visible! — Ha az átlátszóság és az adalék keverés nincs engedélyezve, a modell úgy néz ki, mintha betöltötte és megjelenik az AR marker tetején - nem túl izgalmas és alig látható!

Mint az utolsó lépésben, ugyanazt az elvet megismételjük a második csőre és a keverési módra, hasonlóan a hatások és a Photoshop-ban találhatóakhoz hasonlóan, additív keverék. Ez lehetővé teszi a képpontok külső részét, hogy lágyabb áttérés legyen a kamera képére.

 Tube2 = modell.getobjectbyname ("Tube2", igaz);
C = TUBE2.HILDER  .material;
c.transparent = igaz;
c.side = három ["hátoldal"];
C.Blending = Három ["adalékfizetés"];
C.opacity = 0,9;

07. Végső javítás

Az utolsó modell egy forgó kör csak a tervezés közepén. Ez ugyanazokat a szabályokat, mint korábban, de nem teszi az objektum hátulját, csak az első. Az egyes anyagok átlátszatlanságát 90% -ra állították be, hogy kissé lágyabb legyen. Miután betöltötte az init funkciót.

 Mid = Model.getobjectbyName ("MID", TRUE);
  b = közép.Hirdetek  .material;
  b.transparent = igaz;
  B.Blending = Három ["adalékfizetés"];
 B.opacity = 0,9;
  benne();
});

08. A jelenet inicializálása

Az Init funkció be van állítva, és innen belül van a renderelő beállításai. A renderelő a WebGL-t használja, hogy a leggyorsabban megjelenő sebességet a tartalomhoz adja, és a háttér alfa értéke átlátszóra van állítva, hogy a kamera képe mögött látható legyen.

 FUNKCIÓ INIT () {
  renderer = új három.webglroderer ({
  Alpha: Igaz
  });
  renderer.setclearcolor (új három.Color ('Lightgrey'), 0);
  renderer.setsize (window.innerwidth, window.innerheight);
  document.body.appendchild (renderer.domelemement);

09. Hozzon létre a jelenet kijelzését

A renderelő ugyanolyan méretű, mint a böngészőablak, és hozzáadja az oldal dokumentumobjektummodelljéhez. Most egy üres tömb létrejön, amely tárolja az objektumokat, amelyeket meg kell adni. Új jelenet jön létre, hogy a tartalom megjelenjen ehhez.

 OnrenderFCTS = [];
jelenet = új három.scene ();

10. Figyeljen fel

Ahhoz, hogy a helyszínen tartsák a tartalmat, csakúgy, mint a valós világban, fények szükségesek. Az egyik egy környezeti szürke fény, míg az irányított fény egy elnémított kék szín csak azért, hogy enyhe árnyalatú legyen a képernyőn megjelenő 3D-s tartalomhoz.

Experiment with the lighting colours to give some different tints — Kísérletezzen a világítási színekkel, hogy különböző árnyalatokat adjon

 var ambient = új három.ambientlight (0x666666);
jelenet.add (környezeti);
var directrilight = új három.direkciós (0x4e5ba0);
directilight.position.set (-1, 1, 1) .normalizálja ();
Scene.add (Irányítás);

Következő: Végezze el az AR markerét

Aktuális oldal: 1 oldal

Következő oldal 2. oldal

Hogyan kódolhat egy bővített valóságjelzőt

01. Adja hozzá a könyvtárakat

02. Vigyázzon a CSS-stílusra

03. Globális változók hozzáadása

04. Töltse be a modellt

05. Javítsa meg néhány megjelenítési problémát

06. Ismételje meg a javítást

07. Végső javítás

08. A jelenet inicializálása

09. Hozzon létre a jelenet kijelzését

10. Figyeljen fel

kézikönyv - Most Popular Articles

Instagram Reels Tutorial: A kezdő útmutató

Hogyan kell fotózni valakit egy képbe

Használja az Adobe XD-t a mikro-kölcsönhatások létrehozásához

Adaptív elrendezések építése média lekérdezések nélkül

Kollázshatás létrehozása a böngészőben CSS-vel

Hogyan építsünk egy AR alkalmazást

Készítsen kísérteties textúrákat vegyes média technikákkal

Hogyan kell dolgozni a HTML videóval

Kategóriák