Sådan kaster du en forstørret virkelighedsmarkør

Feb 2, 2026

hvordan

Side 1 af 2:

Side 1

Side 1
Side 2.

Augmented Reality har eksisteret i et stykke tid nu, men med støtte fra WebRTC (realtid kommunikation) er det muligt for brugere på Android og desktop-enheder at få adgang til et telefonens kamera.

I øjeblikket kan IOS ikke understøtte dette, da det ikke er blevet implementeret i Webkit-browseren, der styrker Safari, men det er i udvikling, og du kan tjekke status her . Hvis du har en iOS-enhed, behøver du ikke gå glip af, da du stadig kan bruge webcam på din stationære computer.

Bemærk: For at få dette til at arbejde på mobilkrombrowseren, skal indholdet betjenes med et sikkert stikkontakt (dvs. over HTTPS snarere end standard HTTP). Desktop arbejder i øjeblikket med regelmæssigt HTTP.

For at downloade de filer, du har brug for til denne vejledning, skal du gå til FileSilo. , vælg gratis ting og gratis indhold ved siden af vejledningen.

I denne vejledning skal jeg vise dig, hvordan du placerer en forstørret reality markør foran et telefonkamera. Dette vil blive afhentet af browseren og Ar.js. , Og indhold vil blive kortlagt over toppen i 3D, der stikker til AR-markøren.

Der er masser af mulige anvendelser til denne teknik. For eksempel vil du måske oprette en simpel 3D Creative Resume. , og så kan AR-markøren udskrives på dit visitkort. Fordi du kan gå rundt om markøren, er det godt for indhold, som du måske vil se fra forskellige vinkler - tænk på en vis svensk møbelproducent, der giver dig animerede trin, der kan ses fra enhver vinkel! Der er så mange muligheder, at dette kan være nyttigt for.

01. Tilføj bibliotekerne

Start by linking up your project libraries — Start med at forbinde dine projektbiblioteker

Når du har vist. Downloadede vejledningsfilerne Gå til projektmappen, åben mappen Start i din kode editor, og åbn derefter index.html. Fil til redigering. På dette stadium skal bibliotekerne være knyttet op - og der er et par af dette projekt! Bibliotekerne er i tre sektioner: Three.js, JSArtoolKit og Tre.js Extension for ArtoolKit og Marker.

 & lt; script src = 'js / tre.js' & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "sælger / jsartoolkit5 / build / artoolkit.min.js" & gt; & lt; / script & gt;
& lt; script src = "sælger / 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-armarkercontrols.js" & gt; & lt; / script & gt;
& lt; script & gt; trex.artoolkitcontext.baseurl = '/' & lt; / script & gt;

02. Pas på CSS styling

I hoved Afsnit på siden, tilføj nogle manuskript Tags og slip i stilreglerne for legeme og lærred element. Dette sikrer, at de placeres korrekt på siden uden standardmargenerne, der er tilføjet af browseren.

 krop {
  Margin: 0px;
  Overløb: Skjult;
}
lærred {
  position: absolut;
  TOP: 0;
  Venstre: 0;
}

03. Tilføj globale variabler

I legeme Afsnit på siden, tilføj nogle manuskript Tags, hvor den resterende JavaScript-kode for denne vejledning vil gå. Der er en række variabler, der er nødvendige: Den første linje er til tre.js, den anden til ar.js, den tredje for modellen og derefter en variabel til at indlæse modellen.

 Var Renderer, Scene, Kamera;
Var ArtoolkitContext, OnRenderFcts, ArtoolKitsource, Markerrot, ArtoolKitMarker, LastTimemsc;
VaR-model, Tube1, Tube2, MID, detaljer, Puls;
var loader = ny tre.colladaLoader ();

04. Læg modellen

Før scenen er oprettet, vil modellen blive indlæst, så den kan vises, når markører opdages. Dette skaleres ned med 10 for at passe nøjagtigt på AR-markøren. Modellen er 10 cm for bredden og højden, så markøren er 1 cm, som oversætter til 1 stigning i tre.js.

LOADER.LOAD ('MODEL / SCENE.DAE', FUNKTION (COLLADA) {
  model = collada.scene;
  model.scale.x = model.scale.y = model.scale.z = 0,1;
  Detaljer = model.getobjectbyname ("Detaljer", TRUE);

05. Fix nogle skærmproblemer

Stadig inde i Collada loading-koden, når modellen er indlæst, vil der være et par rør, der springer rundt, så de findes i Collada-scenen. Det første rør er fundet, og dets materiale greb. Her er materialet indstillet til bare at gøre på indersiden af modellen, ikke ydersiden.

 TUBE1 = MODEL.GETOBJECTBYNAME ("TUBE1", TRUE);
Var A = Tube1.Children  .materiale;
a.transparent = true;
A.Side = tre ["bagside"];
A.Blending = tre ["addivebending"];
A.Opacity = 0,9;

06. Gentag filen

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 gennemsigtigheden og additivblandingen ikke er aktiveret, ser modellen ud som denne, når den lægges og vises oven på AR-markøren - ikke meget spændende og næppe synlig!

Som i det sidste trin gentages det samme princip for det andet rør og blandingsfunktionen, der ligner dem, der findes i eftervirkninger og Photoshop, er indstillet til at være en additivblanding. Dette gør det muligt for pixelsens yderside at have en blødere overgang til kameraets billede.

 TUBE2 = MODEL.GETOBJECTBYNAME ("TUBE2", TRUE);
C = Tube2.Children  .materiale;
c.transparent = sandt;
c.side = tre ["bagside"];
c.BLENDING = tre ["addivebending"];
c.opacity = 0,9;

07. endelig FIX.

Den sidste model er en spinning cirkel lige ved midten af designet. Dette følger de samme regler som før, men gør ikke bagsiden af objektet, bare forsiden. Opaciteten af hvert af disse materialer er sat til 90% for blot at gøre det lidt blødere. Når modellen er indlæst, kaldes init-funktionen.

 MID = MODEL.GETOBJECTBYNAME ("MID", TRUE);
  B = Mid.Children  .materiale;
  b.transparent = sandt;
  B.Blending = tre ["addivebending"];
 b.Opacity = 0,9;
  i det();
});

08. Initialisere scenen

Init-funktionen er oprettet, og indenfor er der oprettet Renderer-indstillingerne. Rendereren bruger WebGL til at give den hurtigste renderhastighed til indholdet, og baggrunds alfa-værdien er indstillet til gennemsigtig, så kameraets billede kan ses bag dette.

 Funktion init () {
  renderer = ny tre.webgrenderer ({
  Alpha: TRUE.
  });
  renderer.setclearcolor (New Three.Color ('LightGrey'), 0);
  renderer.Sethize (vindue.innerwidth, window.innerheight);
  dokument.body.appendchild (renderer.domelement);

09. Opret scenens display

Rendereren er lavet til at være den samme størrelse som browservinduet og tilføjes til dokumentobjektmodellen på siden. Nu er der oprettet et tomt array, der vil gemme objekter, der skal gøres. En ny scene er skabt, så indholdet kan vises inde i dette.

 OnRenderFcts = [];
scene = ny tre.Scene ();

10. Lys UP.

For at kunne se indhold i scenen, ligesom i den virkelige verden, er lyset nødvendige. Den ene er et omgivende gråt lys, mens retningslyset er en dæmpet blå farve, bare for at give en lille farvetone til 3D-indholdet på displayet i scenen.

Experiment with the lighting colours to give some different tints — Eksperimentere med lysfarverne for at give nogle forskellige toner

 VaR Ambient = ny tre.ambientlight (0x666666);
scene.add (omgivende);
Var directionallight = nyt tre.directionallight (0x4e5ba0);
directionallight.position.set (-1, 1, 1). Normalisering ();
scene.add (directionallight);

Næste: Afslut din AR-markør

Nuværende side: Side 1

Næste side Side 2.

Sådan kaster du en forstørret virkelighedsmarkør

01. Tilføj bibliotekerne

02. Pas på CSS styling

03. Tilføj globale variabler

04. Læg modellen

05. Fix nogle skærmproblemer

06. Gentag filen

07. endelig FIX.

08. Initialisere scenen

09. Opret scenens display

10. Lys UP.

hvordan - Mest populære artikler

Sådan opretter du 3D-scanninger med virkelighedsfangst

Opret din egen kalligrafisk børste i Illustrator

5 Hot New CSS-funktioner og hvordan du bruger dem

Sådan tegner du en stor kat med pasteller

Sluk fotos til 3D animationer med Photoshop

Byg en simpel musikafspiller med reagere

Sådan opretter du et stiliseret 3D-tegn til spil

Prototype En flydende handlingsknap i pixat

Kategorier