Hur man kodar en förstärkt verklighetsmarkör

Feb 2, 2026
Hur

Augmenterad verklighet har funnits ett tag nu, men med stöd av WEBRTC (realtidskommunikation) är det möjligt för användare på Android och stationära enheter att komma åt en telefons kamera.

För närvarande kan IOS inte stödja detta eftersom det inte har implementerats i WebKit-webbläsaren som driver safari, men det är i utveckling och du kan kontrollera statusen här . Om du har en iOS-enhet behöver du inte missa, eftersom du fortfarande kan använda webbkamera på din stationära dator.

Notera: För att få det här arbetet med mobilen Chrome-webbläsaren måste innehållet serveras med ett säkert socketskikt (dvs över https istället för standard http). Skrivbordet arbetar för närvarande med vanlig http men.

  • För att ladda ner de filer du behöver för den här handledningen, gå till Filerilo , välj Gratis grejer och gratis innehåll bredvid handledningen.

I den här handledningen ska jag visa dig hur man placerar en förstärkt verklighetsmarkör framför en telefonkamera. Detta kommer att hämtas av webbläsaren och Ar.js , och innehållet kommer att kartläggas över toppen i 3D, som håller fast vid AR-markören.

Det finns många möjliga användningsområden för denna teknik. Du kanske till exempel vill skapa en enkel 3D Creative CV , och då kan Ar-markören skrivas ut på ditt visitkort. Eftersom du kan gå runt markören, är det här bra för innehåll som du kanske vill se från olika vinklar - tänk på en viss svensk möbeltillverkare som ger dig animerade steg som kan ses från vilken vinkel som helst! Det finns så många möjligheter att detta kan vara användbart för.

01. Lägg till biblioteken

Start by linking up your project libraries

Börja med att länka upp dina projektbibliotek

När du har hämtade de handledningsfilerna Gå till projektmappen, öppna startmappen i din kodredigerare och öppna sedan upp index.html Fil för redigering. I detta skede måste biblioteken kopplas upp - och det finns en hel del för det här projektet! Biblioteken är i tre avsnitt: Three.js, JSartoolkit och Three.JS-förlängningen för ArtoolKit och Marker. 

 & lt; script src = 'js / tre.js' & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "leverantör / jsartoolkit5 / build / artoolkit.min.js" & gt; & lt; / script & gt;
& lt; script src = "leverantör / jsartoolkit5 / js / artoolkit.api.js" & gt; & lt; / script & gt;
& lt; script src = "trex-artoolkitsource.js" & gt; & lt; / script & gt;
& lt; script src = "trex-artoolkitcontext.js" & gt; & lt; / script & gt;
& lt; script src = "trex-arkarcontrols.js" & gt; & lt; / script & gt;
& lt; script & gt; trex.artoolkitcontext.baseurl = '/' & lt; / script & gt;

02. Ta hand om CSS-styling

I huvud Sektion på sidan, lägg till några manus Taggar och släpp i stilreglerna för kropp och den duk element. Detta säkerställer att de placeras korrekt på sidan utan standard marginaler som adderas av webbläsaren. 

 kropp {
  Marginal: 0px;
  Överflöde: Dold;
}
canvas {
  position: absolut;
  Topp: 0;
  Vänster: 0;
}

03. Lägg till globala variabler

I kropp Sektion på sidan, lägg till några manus Taggar där den återstående JavaScript-koden för den här handledningen kommer att gå. Det finns ett antal variabler som behövs: den första raden är för tre.js, den andra för ar.js, den tredje för modellen och sedan en variabel för att ladda modellen. 

 Var renderer, scen, kamera;
Var Artoolkitcontext, Onrenderfcts, Artoolkitsource, Markerroot, Artoolkitmarker, LastTimemsec;
VAR-modell, Tube1, Tube2, Mid, Detaljer, Puls;
var lastare = ny tre.colladaloader ();

04. Ladda modellen

Innan scenen är inställd kommer modellen att laddas så att den kan visas när markörer detekteras. Detta är nedskalat med 10 för att passa exakt på AR-markören. Modellen är 10 cm för bredden och höjden, så markören är 1 cm som översätter till 1 ökning i tre.js. 

lastare. ('modell / scen.dae', funktion (Collada) {
  Modell = Collada.Scene;
  model.scale.x = modell.scale.y = model.scale.z = 0,1;
  Detaljer = modell.getObjectByname ("Detaljer", sant);

05. Fixa vissa visningsproblem

Fortfarande inuti Collada-laddningskoden, när modellen är laddad kommer det att finnas ett par rör som snurrar runt så de finns i Collada-scenen. Det första röret finns och dess material grepps. Här är materialet inställt på att bara göra på insidan av modellen, inte utsidan. 

 Tube1 = Model.getObjectByname ("Tube1", sant);
VAR A = Tube1.Children 
 .material;
a.Transparent = sant;
A.Side = Tre ["baksida"];
a.blending = tre ["additiveblending"];
A.Opacity = 0,9;

06. Upprepa fixeringen

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!

Om den transparency och additivblandningen inte är aktiverad, ser modellen ut så här när den laddas och visas ovanpå AR-markören - inte mycket spännande och knappt synlig!

Liksom i det sista steget upprepas samma princip för det andra röret och blandningsläget, som liknar de som finns i After Effects och Photoshop, är inställd på att vara en tillsatsblandning. Detta gör det möjligt för utsidan av pixlarna att ha en mjukare övergång till kamerabilden. 

 TUBE2 = MODELL.GETOBjectByname ("Tube2", sant);
C = Tube2.Children 
 .material;
c.transparent = sant;
c.side = tre ["baksida"];
c.blending = tre ["additiveblending"];
C.Opacity = 0,9;

07. Final Fix

Den sista modellen är en spinncirkel precis i mitten av designen. Detta följer samma regler som tidigare men gör inte baksidan av objektet, bara framsidan. Opaciteten hos var och en av dessa material har ställts till 90% för att göra det lite mjukare. När modellen är laddad kallas INIT-funktionen. 

 Mid = Model.GetObjectByname ("MID", sant);
  b = mid.children 
 .material;
  b.transparent = sant;
  B. Blending = Tre ["Additiveblending"];
 b.Opacity = 0,9;
  i det();
});

08. Initialisera scenen

Init-funktionen är inställd och inuti här skapas Renderer-inställningarna. Renderer använder WebGL för att ge den snabbaste renderhastigheten till innehållet, och bakgrundsvärdet är inställt på transparent så att kamerabilden kan ses bakom detta. 

 Funktion init () {
  renderer = ny tre.webglrenderer ({
  Alpha: sant
  });
  renderer.setClearcolor (New Three.Color ('LightGrey'), 0);
  renderer.setsize (window.innerwidth, window.innerheight);
  document.body.appendchild (renderer.domeLement);

09. Skapa scenskärmen

Renderer är gjord för att vara lika stor som webbläsarfönstret och läggas till i dokumentets objektobjektmodell. Nu skapas en tom array som lagrar objekt som måste göras. En ny scen skapas så att innehållet kan visas inuti detta. 

 Onrenderfcts = [];
scen = ny tre.scene ();

10. Ljus upp

För att kunna se innehåll i scenen, precis som i den verkliga världen, behövs ljus. En är ett omgivande grått ljus medan riktljuset är en dämpad blå färg bara för att ge en liten nyans till 3D-innehållet på displayen i scenen.

Experiment with the lighting colours to give some different tints

Experimentera med belysningsfärgerna för att ge några olika tints 
 Var Ambient = Ny tre.ambientlight (0x666666);
scen.add (omgivande);
var riktning = ny tre.directionallight (0x4e5ba0);
DirectionAllight.Position.Set (-1, 1, 1) .Normalisera ();
scene.add (riktning);

Nästa: Avsluta din AR-markör

  • 1
  • 2

Nuvarande sida: Sida 1

Hur - Mest populära artiklar

Mixed-Media Art Tutorial: Hur vattenfärg över digitalt konstverk

Hur Feb 2, 2026

(Bildkredit: Naomi Vandoren) Som en oberoende konstnär tycker jag om den kreativa processen så mycket som tillfreds..

Stil en webbplats med Sass

Hur Feb 2, 2026

Du kan göra mycket med CSS - kanske mer än du kanske tror - men det ärable stilarket har sina begränsningar. I ett modernt we..

Hur man kombinerar 3D och komisk konst i Zbrush

Hur Feb 2, 2026

Sida 1 av 2: Sida 1 Sida 1 Sida 2 3D Specialist Glen Southern ..

Lägg till flera språkstöd till vinkel

Hur Feb 2, 2026

I den här handledningen kommer vi att ta dig igenom processen att göra din app tillgänglig och användarvänlig för människo..

Nivån upp din VR-art

Hur Feb 2, 2026

Jag började använda Cinema 4D några månader efter att ha fått mitt VR-headset för ett år sedan. Fram till dess hade jag an..

Kom igång med diffus

Hur Feb 2, 2026

Ett av de enklaste sätten att få lite extra liv till någon bit av 3d konst är att lägga till färg och textur till den. Det finns en mängd olika namn som ges till denna p..

Gör dina tecken pop med färg och ljus

Hur Feb 2, 2026

Jag gillar verkligen att arbeta i färg, oavsett om det är i Photoshop cc eller måla traditionellt med akvarelle..

Skapa en digital etch en skiss

Hur Feb 2, 2026

I den här handledningen tar vi den mekaniska ritningen Toy Etch en skiss som en inspiration och försök att genomföra dessa fu..

Kategorier