Come codificare un marker di realtà aumentato

Jan 30, 2026
Come si fa

La realtà aumentata è stata in giro per un po 'di tempo, ma con il supporto di WebrTC (comunicazione in tempo reale), è possibile per gli utenti su Android e Desktop Devices per accedere alla fotocamera del telefono.

Allo stato attuale, iOS non può supportarlo in quanto non è stato implementato nel browser WebKit che alimenta safari, ma è in fase di sviluppo e puoi controllare lo stato Qui . Se hai un dispositivo iOS, non devi perdere, come puoi ancora utilizzare la webcam sul tuo computer desktop.

Nota: Per ottenere questo lavoro sul browser Chrome mobile, il contenuto deve essere servito da uno strato di socket sicuro (cioè sopra https anziché standard http). Desktop attualmente lavora con http regolare però.

  • Per scaricare i file necessari per questo tutorial, vai a Filelilo. , Seleziona cose gratis e contenuti gratuiti accanto al tutorial.

In questo tutorial ti mostrerò come posizionare un indicatore di realtà aumentato davanti a una fotocamera del telefono. Questo sarà raccolto dal browser e Ar.js. , e il contenuto sarà mappato sopra la parte superiore in 3D, attaccando al marker AR.

Ci sono molti usi possibili per questa tecnica. Ad esempio, potresti voler creare un semplice 3D curriculum creativo , e poi il marker AR potrebbe essere stampato sul tuo biglietto da visita. Poiché puoi passeggiare per il pennarello, questo è ottimo per i contenuti che potresti voler vedere da diversi angoli - Pensa a un certo produttore di mobili svedesi dandoti passi animati che possono essere visualizzati da qualsiasi angolazione! Ci sono così tante possibilità che questo possa essere utile per.

01. Aggiungi le librerie

Start by linking up your project libraries

Inizia collegando le tue librerie di progetto

Una volta che hai scaricato i file tutorial Vai alla cartella del progetto, apri la cartella Start nell'editor di codice e quindi apri il index.html. file per la modifica. In questa fase le biblioteche devono essere collegate - e ce ne sono parecchio per questo progetto! Le biblioteche sono in tre sezioni: tre.js, jsartoolkit e l'estensione tre.js per Artoolkit e Marker. 

 & lt; script src = 'js / tre.js' & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "fornitore / jsartoolkit5 / build / artoolkit.min.js" & gt; & lt; / script & gt;
& lt; script src = "fornitore / jsartoolkit5 / js / artoolkit.api.js" & gt; & lt; / script & gt;
& lt; script src = "trex-troolkitsource.js" & gt; & lt; / script & gt;
& lt; script src = "Threx-articoloolkitcontext.js" & gt; & lt; / script & gt;
& lt; script src = "trex-ararkercontrols.js" & gt; & lt; / script & gt;
& lt; script & gt; trex.artoolkitcontext.baseurl = '/' & lt; / script & gt;

02. Prenditi cura dello styling CSS

Nel capo Sezione della pagina, aggiungi alcuni script. tag e calo delle regole di stile per il corpo e il tela elemento. Ciò garantisce che siano posizionati correttamente sulla pagina senza i margini predefiniti aggiunti dal browser. 

 Body {
  Margine: 0px;
  Overflow: nascosto;
}
tela {
  Posizione: assoluto;
  Top: 0;
  a sinistra: 0;
}

03. Aggiungi variabili globali

Nel corpo Sezione della pagina, aggiungi alcuni script. Tag dove il codice JavaScript rimanente per questo tutorial andrà. Ci sono un certo numero di variabili necessarie: la prima riga è per tre.js, il secondo per AR.JS, il terzo per il modello e quindi una variabile per caricare il modello. 

 Var Renderer, scena, fotocamera;
Var ArtoolkitContext, onRenderFCCT, ArtoolkiTource, Markerroot, Artoolkitmarker, LastTimemsec;
Var Model, Tube1, Tube2, Mid, Dettagli, Pulse;
var loader = nuovo tre.colladaloader ();

04. Carica il modello

Prima che la scena venga impostata il modello verrà caricato in modo che possa essere visualizzata quando vengono rilevati marcatori. Questo è ridimensionato da 10 per adattarsi esattamente al marker AR. Il modello è di 10 cm per la larghezza e l'altezza, quindi il marker è 1 cm che si traduce in 1 incremento in tre.js. 

caricatore.load ('modello / scena.dae', funzione (Collada) {
  modello = collada.scene;
  modello.scale.x = modello.scale.y = model.scale.z = 0.1;
  Dettagli = modello.GetObjectbyname ("Dettagli", true);

05. Fissare alcuni problemi di visualizzazione

Ancora all'interno del codice di caricamento della Collada, una volta caricato il modello ci sarà un paio di tubi che girano in modo che si trovino nella scena della Collada. Il primo tubo è stato trovato e il suo materiale è afferrato. Qui il materiale è impostato per rendere appena all'interno del modello, non all'esterno. 

 Tube1 = modello.GetObjectbyName ("Tube1", TRUE);
var a = tube1.children 
 .materiale;
A.Transparent = True;
a.side = tre ["backside"];
A. Bredendo = tre ["additiviblende"];
a.opacity = 0.9;

06. Ripeti la correzione

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!

Se la trasparenza e la fusione additiva non sono abilitate, il modello è simile a questo quando viene caricato e visualizzato in cima al marker AR - non molto eccitante e appena visibile!

Come nell'ultimo passaggio, questo stesso principio viene ripetuto per il secondo tubo e la modalità di fusione, simile a quelli trovati in After Effects e Photoshop, è impostato per essere una miscela additiva. Ciò consente all'esterno dei pixel di avere una transizione più morbida all'immagine della telecamera. 

 tube2 = modello.GetObjectbyname ("tube2", true);
c = tube2.children 
 .materiale;
c.Transparent = true;
c.side = tre ["backside"];
c.venditore = tre ["additivo percendio"];
c.opacity = 0.9;

07. Final fix.

L'ultimo modello è un cerchio di filatura proprio al centro del design. Questo segue le stesse regole di prima ma non rendono il retro dell'oggetto, solo la parte anteriore. L'opacità di ciascuno di questi materiali è stata impostata sul 90% solo per renderla leggermente più morbida. Una volta che il modello è caricato viene chiamato la funzione Init. 

 MID = modello.GetObjectbyName ("MID", TRUE);
  b = metà.children 
 .materiale;
  b.transparent = true;
  B. Breding = tre ["additivibending"];
 b.opacity = 0.9;
  dentro();
});

08. Inizializza la scena

La funzione Init è impostata e all'interno qui vengono create le impostazioni del rendering. Il renderer utilizza WebGL per dare la velocità di rendering più veloce al contenuto e il valore alfa background è impostato su Trasparente in modo che l'immagine della telecamera possa essere vista dietro di questo. 

 Funzione init () {
  rendering = nuovo tre.webglrendar ({
  ALPHA: TRUE.
  }););
  rendering.setClearColor (New Tre.Color ('Lightgrey'), 0);
  renderer.sesize (window.innerwidth, window.innerheight);
  document.body.appendchild (rendering.domelement);

09. Creare il display della scena

Il renderer è fatto per avere le stesse dimensioni della finestra del browser e aggiunta al modello oggetto documento della pagina. Ora viene creata un array vuoto che memorizzerà gli oggetti che devono essere resi. Viene creata una nuova scena in modo che il contenuto possa essere visualizzato all'interno di questo. 

 onRenderFCTS = [];
scena = nuovo tre.scene ();

10. Accendere

Per essere in grado di vedere il contenuto nella scena, proprio come nel mondo reale, sono necessarie luci. Uno è una luce grigia ambientale mentre la luce direzionale è un colore blu mutante solo per dare una leggera tinta al contenuto 3D in mostra nella scena.

Experiment with the lighting colours to give some different tints

Sperimentare con i colori dell'illuminazione per dare alcune tonalità diverse 
 VAR Ambient = New Tre.AmbientLight (0x666666);
scena.add (ambiente);
var direzionetallight = nuovo tre.Directionallight (0x4e5ba0);
direzionallight.position.set (-1, 1, 1) .normiralize ();
scena.add (direzionallight);

Successivo: Finisci il tuo marker AR

  • 1.
  • 2.

Pagina corrente: Pagina 1

Come si fa - Articoli più popolari

Compositing in animazione: impara le basi

Come si fa Jan 30, 2026

(Immagine di immagine: Design Blackmagic) In questo articolo, prevederemo l'arte del compositing per 3D. Esplorando c..

Come creare un'app con VUE.JS

Come si fa Jan 30, 2026

L'ecosistema JavaScript è cambiato per oltre un decennio, il che significa che gli sviluppatori front-end hanno dovuto tenere tr..

Come girare il giorno nella notte in Photoshop

Come si fa Jan 30, 2026

Le conversioni giorno per notte sono state in giro per tutto il tempo che Photoshop ha avuto strati di aggiustamento, ma padroneg..

Come catturare la luce con gli oli

Come si fa Jan 30, 2026

La luce è qualcosa che ispira sempre i pittori - se è il sole che splende sulle pietre di un edificio o di un fiore in un vaso ..

Come scolpire un goblin stampato 3D

Come si fa Jan 30, 2026

Il concetto di questo progetto, il goblin di funghi, viene da un disegno del mio amico Adrian Smith. Ho lavorato per rendere ques..

Come ottenere di più dalle trame digitali

Come si fa Jan 30, 2026

Lavorazione digitale ti libera per fare tanti errori che ti piace, in uno spazio di lavoro in cui viene portato l'elemento del ri..

Come creare un ambiente invernale

Come si fa Jan 30, 2026

Prima di iniziare a lavorare su un'immagine personale di solito inizio a pensare a quello che voglio vedere nel lavoro finito. Ne..

Come utilizzare la funzione 'Match Font' di Photoshop

Come si fa Jan 30, 2026

Designer e creativi da tutti i campi sono come mazze nel loro appetito per raccogliere cose luminose e brillanti. Probabilmente a..

Categorie