Hvordan kode en forstørret virkelighetsmarkør

Sep 12, 2025

hvordan

[1. 3]

Side 1 av 2:

Side 1

Side 1
Side 2

Augmented Reality har eksistert en stund nå, men med støtte fra WebrTC (sanntidskommunikasjon), er det mulig for brukere på Android og Desktop-enheter å få tilgang til en telefons kamera.

I dag kan IOS ikke støtte dette, da det ikke har blitt implementert i Webkit-nettleseren som Powers Safari, men det er i utvikling, og du kan sjekke statusen her . Hvis du har en iOS-enhet, trenger du ikke å gå glipp av, da du fortsatt kan bruke webkameraet på din stasjonære datamaskin.

Merk: For å få dette til å fungere på den mobile krom-nettleseren, må innholdet betjenes med et sikkert sokkellag (dvs. over HTTPS i stedet for standard http). Desktop jobber for tiden med vanlig HTTP skjønt.

For å laste ned filene du trenger for denne opplæringen, gå til Filsilo. , velg gratis ting og gratis innhold ved siden av opplæringen.

I denne opplæringen skal jeg vise deg hvordan du legger en forstørret virkelighetsmarkør foran et telefonkamera. Dette vil bli plukket opp av nettleseren og Ar.js. , og innholdet vil bli kartlagt over toppen i 3D, og stikker til AR-markøren.

Det er mange mulige bruksområder for denne teknikken. For eksempel vil du kanskje lage en enkel 3D kreativt CV. , og da kan AR Marker skrives ut på visittkortet ditt. Fordi du kan gå rundt markøren, er dette flott for innhold som du kanskje vil se fra forskjellige vinkler - tenk på en bestemt svensk møblerprodusent som gir deg animerte trinn som kan ses fra en hvilken som helst vinkel! Det er så mange muligheter som dette kan være nyttig for.

01. Legg bibliotekene

Start by linking up your project libraries — Start med å koble opp prosjektbibliotekene dine

Når du har lastet ned opplæringsfiler Gå til prosjektmappen, åpne Start-mappen i kodeditoren din og åpne deretter opp index.html. fil for redigering. På dette stadiet må bibliotekene være knyttet til - og det er ganske mange for dette prosjektet! Bibliotekene er i tre seksjoner: tre.js, jsartoolkit og three.js forlengelse for artoolkit og markør.

 & lt; script src = 'js / tre.js' & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "leverandør / jsartoolkit5 / build / artoolkit.min.js" & gt; & lt; / script & gt;
& lt; script src = "leverandø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-arkerkerControls.js" & gt; & lt; / script & gt;
& lt; script & gt; threex.artoolkitcontext.baseurl = '/' & lt; / script & gt;

02. Ta vare på CSS-styling

I den hode delen av siden, legg til noen manus Tags og slipp i stil regler for kropp og lerret element. Dette sikrer at de er plassert riktig på siden uten at standardmarginene er lagt til i nettleseren.

 Kropp {
  margin: 0px;
  Overflow: Skjult;
}
lerret {
  posisjon: absolutt;
  Topp: 0;
  Venstre: 0;
}

03. Legg til globale variabler

I den kropp delen av siden, legg til noen manus Tags hvor den gjenværende JavaScript-koden for denne opplæringen vil gå. Det er en rekke variabler som trengs: Den første linjen er for tre.js, den andre for AR.JS, den tredje for modellen og deretter en variabel for å laste modellen.

 Var Renderer, scene, kamera;
var artoolkitContext, onrenderfcts, artoolkitsource, markørroot, artoolkitmerker, lasttimemsek;
var modell, tube1, tube2, mid, detaljer, puls;
VAR Loader = Ny tre.Colladaloader ();

04. Legg inn modellen

Før scenen er satt opp, vil modellen lastes slik at den kan vises når markører oppdages. Dette er nedskalert med 10 for å passe nøyaktig på AR-markøren. Modellen er 10 cm for bredde og høyde, så markøren er 1 cm som oversetter til 1 økning i tre.js.

Loader.load ('Modell / Scene.dae', Funksjon (Collada) {
  Modell = Collada.scene;
  modell.scale.x = modell.scale.y = modell.scale.z = 0,1;
  Detaljer = Model.GetObjectByname ("Detaljer", True);

05. Fest noen displayproblemer

Fortsatt inne i Collada lastekoden, når modellen er lastet, vil det være et par rør som spinner rundt, slik at de finnes i Collada-scenen. Det første røret er funnet og dets materiale er grepet. Her er materialet satt til bare å gjøre på innsiden av modellen, ikke utsiden.

 Tube1 = Model.GetObjectByname ("Tube1", True);
var A = Tube1.Children  .materialer;
A.Transparent = sant;
A.Side = Tre ["backside"];
a.blending = tre ["additiveblending"];
a.opacity = 0,9;

06. Gjenta fikren

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! — Hvis den gjennomsiktighets- og additivblandingen ikke er aktivert, ser modellen ut som dette når den lastes og vises på toppen av AR-markøren - ikke veldig spennende og knapt synlig!

Som i det siste trinnet gjentas det samme prinsippet for det andre røret og blandingsmodus, som ligner de som finnes i ettervirkninger og Photoshop, er satt til å være en additiv blanding. Dette gjør det mulig for utsiden av pikslene å ha en mykere overgang til kamerabildet.

 Tube2 = Model.GetObjectByname ("Tube2", True);
c = tube2.barn  .materialet;
C.Transparent = sant;
c.side = tre ["backside"];
c.blending = tre ["additiveblending"];
c.opacity = 0,9;

07. Final Fix.

Den siste modellen er en spinnsirkel bare i midten av designet. Dette følger de samme reglene som før, men gjør ikke baksiden av objektet, rett foran. Opaciteten til hvert av disse materialene er satt til 90% bare for å gjøre det litt mykere. Når modellen er lastet, kalles init-funksjonen.

 midt = modell.getObjectbyname ("midt", sant);
  b = midt. Kildene  .materialet;
  b.Transparent = sant;
  b.blending = tre ["additiveblending"];
 b.opacity = 0,9;
  i det();
});

08. Initialiser scenen

Init-funksjonen er satt opp og inni her opprettes renderingsinnstillingene. Renderer bruker WBLGL for å gi den raskeste rendre hastigheten til innholdet, og bakgrunnsalfa-verdien er satt til gjennomsiktig, slik at kamerabildet kan ses bak dette.

 Funksjonsinit () {
  Renderer = Ny tre.WebGlrenderer ({
  Alpha: TRUE
  });
  Renderer.SetClearColor (ny tre.color ("lightgrey"), 0);
  Renderer.Setsize (window.Innerwidth, window.InnerHeight);
  Dokument.body.appendchild (Renderer.DomElement);

09. Opprett scenen displayet

Renderer er laget for å være i samme størrelse som nettleservinduet og legges til dokumentobjektmodellen på siden. Nå er det opprettet et tomt utvalg som vil lagre objekter som må gjengis. En ny scene er opprettet slik at innholdet kan vises inne i dette.

 onrenderfcts = [];
scene = ny tre.scene ();

10. Lys opp

For å kunne se innhold i scenen, akkurat som i den virkelige verden, er det nødvendig med lys. Den ene er et omgivende grått lys mens retningslyset er en dempet blå farge bare for å gi en liten fargetone til 3D-innholdet på skjermen i scenen.

Experiment with the lighting colours to give some different tints — Eksperimenter med belysningsfarger for å gi noen forskjellige toner

 var omgivende = ny tre.ambientlight (0x666666);
scene.add (omgivende);
var retningAllight = ny tre.directionallight (0x4e5ba0);
retningAllight.position.Set (-1, 1, 1) .normaliser ();
scene.add (retningAllight);

Neste: Avslutt din AR-markør

Nåværende side: Side 1

Neste side Side 2

Hvordan kode en forstørret virkelighetsmarkør

01. Legg bibliotekene

02. Ta vare på CSS-styling

03. Legg til globale variabler

04. Legg inn modellen

05. Fest noen displayproblemer

06. Gjenta fikren

07. Final Fix.

08. Initialiser scenen

09. Opprett scenen displayet

10. Lys opp

hvordan - Mest populære artikler

Hvordan historyboard i Photoshop

Hvordan tegne en rose: Nybegynner og avanserte tips

Photoshop Fargeendring: 2 Verktøy du trenger å vite

Slik gjør du realistiske gjennomsiktige overflater

Hvordan lage dine egne lerretskort

Hvordan bevege seg mellom Daz Studio og Cinema 4D

Lag et spillmiljø i uvirkelig motor 4

Hvordan lage en levende fairy queen

Kategorier