Cum se codifică un marker de realitate augmentat

Feb 2, 2026
să

Realitatea augmentată a fost în jur de o vreme acum, dar cu sprijinul WebRTC (comunicare în timp real), este posibil ca utilizatorii de pe dispozitivele Android și desktop să acceseze camera unui telefon.

În prezent, iOS nu poate susține acest lucru, deoarece nu a fost implementat în browserul Webkit care puteri Safari, dar este în curs de dezvoltare și puteți verifica starea Aici . Dacă aveți un dispozitiv iOS, nu trebuie să pierdeți, deoarece puteți utiliza în continuare camera web pe computerul dvs. desktop.

Notă: Pentru a obține această lucrare la browserul Chrome Mobile, conținutul trebuie să fie servit de un strat securizat de socket (adică peste https, mai degrabă decât http standard). Desktop lucrează în prezent cu HTTP obișnuit.

  • Pentru a descărca fișierele de care aveți nevoie pentru acest tutorial, mergeți la Filesilo. , selectați Free Stuff și Conținut gratuit lângă Tutorial.

În acest tutorial vă voi arăta cum să plasați un marcator de realitate augmentat în fața unei camere telefonice. Acest lucru va fi preluat de browser și AR.JS. , iar conținutul va fi cartografiat în partea de sus în 3D, lipind la markerul AR.

Există o mulțime de utilizări posibile pentru această tehnică. De exemplu, ați putea dori să creați un simplu 3D CV-ul creativ. , iar apoi marcajul AR ar putea fi tipărită pe cartea dvs. de vizită. Pentru că puteți merge în jurul markerului, acest lucru este minunat pentru conținutul pe care ați putea dori să îl vedeți din diferite unghiuri - gândiți-vă la un anumit producător de mobilier suedez care vă oferă pași animați care pot fi vizualizați din orice unghi! Există atât de multe posibilități pentru ca acest lucru să fie util.

01. Adăugați bibliotecile

Start by linking up your project libraries

Începeți prin conectarea bibliotecilor de proiect

Odată ce ai a descărcat fișierele Tutorial Accesați dosarul proiectului, deschideți dosarul Start din editorul de cod și apoi deschideți apoi index.html. fișier pentru editare. În acest stadiu, bibliotecile trebuie să fie legate - și există destule câteva pentru acest proiect! Bibliotecile sunt în trei secțiuni: Trei.Js, Jsartoolkit și Extensia Three.js pentru Artoolkit și Marker. 

 și lt; script src = 'js / trei.js' & gt; / script & gt;
& Lt; script src = "js / colladaloader.js" & gt; / script & gt;
"script src =" vendor / jsartoolkit5 / build / artoolkit.min.js "& gt; / script & gt;
"script src =" vendor / jsartoolkit5 / js / artoolkit.api.js "& gt; / script & gt;
"Script Src =" Threx-Artoolkitsource.js "& gt; / script & gt;
"script src =" trix-arteroolkitcontext.js "& gt; / script & gt;
& lt; script src = "Threx-ArmarkerControls.js" & gt; / script & gt;
& lt; script & gt; trix.artoolkitContext.baseurl = '/' & lt; / script & gt;

02. Aveți grijă de stilul CSS

În cap secțiunea paginii, adăugați unele Script Etichete și scădere în regulile de stil pentru corp si Canvas. element. Acest lucru asigură că acestea sunt plasate corect pe pagină fără margini implicite adăugate de browser. 

 corp {
  Marja: 0px;
  Depășirea: ascunsă;
}
Canvas {
  Poziție: absolută;
  Top: 0;
  stânga: 0;
}

03. Adăugați variabile globale

În corp secțiunea paginii, adăugați unele Script Etichete în cazul în care codul JavaScript rămas pentru acest tutorial va merge. Există o serie de variabile necesare: prima linie este pentru trei.js, a doua pentru AR.Js, a treia pentru model și apoi o variabilă pentru a încărca modelul. 

 Var Renderer, scenă, cameră;
Var ArtoolkitContext, onrenderfcts, Artoolkitsource, Markerroot, Artoolkitmarker, LastTimeMSEC;
model var, tub1, tub2, mijloc, detalii, puls;
VAR încărcător = New Three.Colladaloader ();

04. Încărcați modelul

Înainte de configurarea scenei, modelul va fi încărcat astfel încât să poată fi afișat când sunt detectate markerii. Acest lucru este scalat cu 10 pentru a se potrivi exact pe marcatorul AR. Modelul este de 10 cm pentru lățime și înălțime, astfel încât marcajul este 1 cm care se traduce la 1 increment în trei. 

loader.load ('Model / Scene.Dae', Funcție (Collada) {
  model = colada.scene;
  model.scale.x = model.scale.y = model.scale.z = 0,1;
  Detalii = model.getObjectByName ("detalii", TRUE);

05. Fixați unele probleme de afișare

Încă în interiorul codului de încărcare Collada, odată ce modelul este încărcat, vor exista câteva tuburi care se rotesc în jur, astfel încât acestea să fie găsite în scena Colladei. Primul tub se găsește și materialul său este apucat. Aici materialul este setat să facă doar pe interiorul modelului, nu în exterior. 

 Tube1 = Model.getObjectByName ("Tube1", TRUE);
var a = tub1.children 
 .Material;
A.Transparent = adevărat;
A. Three Three ["Backside"];
A.blending = trei ["ADOSTIVELYIND"];
A.Opacitate = 0,9;

06. Repetați fixarea

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!

Dacă transparența și amestecarea aditivului nu este activată, modelul arată ca acesta când este încărcat și afișat pe partea de sus a markerului AR - nu este foarte interesant și abia vizibil!

Ca și în ultimul pas, același principiu este repetat pentru cel de-al doilea tub și modul de amestecare, similar cu cele găsite în efecte după efecte și Photoshop, este setat să fie un amestec aditiv. Acest lucru permite ca exteriorul pixelilor să aibă o tranziție mai ușoară la imaginea camerei. 

 Tube2 = Model.getObjectByName ("Tube2", TRUE);
c = Tube2.copii 
 .Material;
c.Transparent = adevărat;
c.side = trei ["spate"];
c.blending = trei ["aditivleryding"];
c.Opacitate = 0,9;

07. FIX FIX.

Ultimul model este un cerc de filare doar la mijlocul designului. Aceasta urmează aceleași reguli ca și înainte, dar nu face partea din spate a obiectului, doar față. Opacitatea fiecăruia dintre aceste materiale a fost stabilită la 90% doar pentru a face puțin mai moale. Odată ce modelul este încărcat, funcția init este apelată. 

 Mid = Model.getObjectByName ("MID", TRUE);
  B = Mid.Children 
 .Material;
  b.transparent = adevărat;
  B.blending = trei ["ADIVITIVELYNIDING"];
 B.Opacitate = 0,9;
  init ();
});

08. Inițializați scena

Funcția Init este configurată și în interior aici setările Renderer sunt create. Rendererul utilizează WebGL pentru a da cea mai rapidă viteză de redare la conținut, iar valoarea alfa de fundal este setată la transparent, astfel încât imaginea camerei să poată fi văzută în spatele acestui lucru. 

 funcția init () {
  Renderer = Nou trei.webglrenderer ({
  Alpha: Adevărat
  });
  Renderer.SetClearcolor (Nou Three.Color ("Lightgrey"), 0);
  Renderer.setsize (fereastră.Innerwidth, fereastră.innerheaight);
  document.body.appenddchild (Renderer.domelement);

09. Creați afișarea scenei

Rendererul este făcut pentru a avea aceeași dimensiune ca și fereastra browserului și a fost adăugată la modelul obiectului de documente al paginii. Acum este creată o matrice goală care va stoca obiecte care trebuie să fie redate. O nouă scenă este creată astfel încât conținutul să poată fi afișat în interiorul acestui lucru. 

 onrenderfcts = [];
scena = nouă trei.Scene ();

10. Se aprinde

Pentru a putea vedea conținutul în scenă, la fel ca în lumea reală, sunt necesare lumini. Una este o lumină gri ambientală în timp ce lumina direcțională este o culoare albastră dezactivată doar pentru a da o nuanță ușoară la conținutul 3D de pe ecran.

Experiment with the lighting colours to give some different tints

Experimentați cu culorile de iluminare pentru a da niște nuanțe diferite 
 var ambiental = noul trei.Ambient (0x666666);
scena.add (ambient);
Var DirecțieLight = Nou trei.directionallight (0x4E5BA0);
directionAlift.position.set (-1, 1, 1) .normalizeaza ();
scena.add (directionAliflig);

Înainte: Finalizați markerul AR

  • 1.
  • 2.

Pagina curenta: Pagina 1

să - Cele mai populare articole

Cum să accelerați și să optimizați site-urile WordPress

să Feb 2, 2026

(Credit Imagine: Web Designer) WordPress a început ca o platformă simplă de blogging, dar a evoluat în sistemul d..

Cum să atragă un braț

să Feb 2, 2026

(Credit de imagine: Patrick J Jones) Învățând cum să atragă un braț care arată realist este o parte vitală a..

Creați un material de plăci în substanța de designer de substanțe

să Feb 2, 2026

Substanța Designer este un instrument excelent pentru crearea de tot felul de materiale pentru dvs. 3D Art. . Aic..

Cum se atrage reflecții metalice

să Feb 2, 2026

Când lumina lovește un obiect metalic, acesta poate reflecta înapoi pe orice obiect din apropiere într-un mod neobișnuit. Î..

Stitch și Composit 360 Imagini

să Feb 2, 2026

Cu adăugarea de CARA VR Plugin La Nucke, avem acum un instrument puternic la dispoziția noastră pentru cusătura și compozitarea imaginilor noastre 360. În ..

Construiți un simplu player muzical cu reacția

să Feb 2, 2026

Reacţiona Este o bibliotecă populară JavaScript pentru construirea interfețelor utilizatorilor, iar în acest tut..

Creați cerneluri mixte cu InDesign

să Feb 2, 2026

Pagina 1 din 2: Creați o senzație de cerneală mixtă Creați o senzaț..

15 sfaturi pentru optimizarea transfrontalieră

să Feb 2, 2026

Design pentru toate dispozitivele! Anna Dahlström. va vorbi despre importanța ..

Categorii