Come codificare un marker di realtà aumentato

Sep 16, 2025
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

Come Photoshop su iPhone (sì, è una cosa)

Come si fa Sep 16, 2025

(Immagine di credito: Jason Parnell-Brookes) SALTA A: Photoshop Express. ..

Chiaroscuro Art: una guida passo-passo

Come si fa Sep 16, 2025

Realizzare Chiaroscuro Art si tratta di usare la composizione della luce e dell'ombra per creare profondità e, soprattutto, l'umore. In questo tutorial, approfondiremo i regni artistici dell..

Come creare un robot Papercraft

Come si fa Sep 16, 2025

Divertiti solo la scorsa estate, sono ancora abbastanza nuovo per il mondo dell'illustrazione freelance. Il mio stile e il mio pr..

Come utilizzare Adobe Capture CC

Come si fa Sep 16, 2025

Adobe Capture CC è un'app fantastica che consente di trovare caratteri e colori semplicemente scattando una foto. Potresti chiederti cosa siano stati usati i caratteri nella tua rivista pref..

Le regole della reattiva tipografia Web

Come si fa Sep 16, 2025

La tipografia Web reattiva è dura, è necessario avere entrambe le costolette di design e il know-how tecnico. Ma comunque complicato potrebbe essere, ottenendo che non è sbagliato non è u..

Come creare un logo retrò con Affinity Designer

Come si fa Sep 16, 2025

Facile da usare e con un certo numero di strumenti creativi sotto la cintura, Affinity Designer è un'ottima alternativa a ..

Crea un etch digitale uno schizzo

Come si fa Sep 16, 2025

In questo tutorial, prendiamo il giocattolo del disegno meccanico a un schizzo come ispirazione e tenta di implementare queste ca..

Crea effetti pittori in Photoshop cc

Come si fa Sep 16, 2025

Adobe ha rilasciato due nuovi tutorial video per aiutarti a portare il tuo Photoshop Nuvola creativa abilità al l..

Categorie