Come costruire un'app AR

Jan 24, 2026
Come si fa

Negli ultimi due anni, c'è stata un'esplosione di interesse che circonda le tecnologie VR e AR. L'ultima cosa grande in design sperimentale , AR è arrivato anche sul web, ma con questa nuova tecnologia arriva nuove abilità, e in questo momento sembra che il selvaggio ad ovest senza standard importanti da seguire.

La possibilità di visualizzare 3D sul Web non è nulla di nuovo, ma se lo hai evitato, allora devi saltare in tecnologie come tre.js o A-fotogramma (dai un'occhiata al nostro roundup di Strumenti AR da provare per una lista completa).

Qualunque sia il livello di abilità, non farà molte differenze se non hai qualche contenuto decente. Pensa a casi di utilizzo appropriati per AR prima di saltare. In questo articolo ti mostreremo come creare un'esperienza AR multi-marker.

Senti il ​​tuo livello di abilità non è proprio vero? UN Builder del sito web creerà un sito per te senza il trambusto. O se stai immettendo con un sito complesso, ottieni il web hosting giusto.

Utilizzando più marcatori, è possibile mostrare diverse fasi di un processo o qualsiasi contenuto unico in base a quel marker. In questo esempio, la nostra app esplorerà il ciclo dell'acqua. Vai a pagina 3 per imparare come creare un indicatore AR personalizzato.

01. Inizia

Apri il inizio cartella nel tuo IDE e all'interno del index.html. Pagina Trova i tag script. Tutto il codice nel tutorial entrerà all'interno di questi. Per testare l'app dovrai disporre di un server e se si desidera verificare su un telefono, è necessario ospitare i file su un server HTTPS. Aggiungi le variabili iniziali negli script tags: 

 VAR Model1, Model2, Model3, Conte = 0,
  particelle, particelleria, particelle;
  var loader = nuovo tre.colladaloader ();

02. Carica il modello

scene

Utilizzare l'icona in alto a destra per ingrandire l'immagine

Per rendere il lavoro della scena AR, verrà caricata un modello. Vedrai che una volta caricato è memorizzato nella variabile modello1. . Questo viene quindi ridimensionato e clonato due volte per i tre passaggi. Piuttosto che caricare tre diversi modelli, tutte le regolazioni di un modello verranno eseguite nel codice per renderlo caricare rapidamente sul cellulare. 

 Loader.load ('Landscap1.dae', funzione (Collada) {
  modello1 = collada.scene;
  model1.scale.x = model1.scale.y = model1.scale.z = 0,015;
  modello2 = modello1.clone ();
  modello3 = modello1.clone ();

03. Impostare il cimatore

Sul primo modello, il cloud sarà trovato nella scena e questo sarà tradito in una nuova posizione in modo che la nuvola sale dal mare. Questo è impostato per ripetere per sempre e ci vorranno otto secondi per l'animazione e mostrare una nuvola di formatura. 

 var cloud1 = model1.getobjectbyname ("cloud", true);
  cloud1 = cloud1.children 
;
  New Tween.tween (cloud1.position) .to ({
  x: 0,
  Y: 30,
  z: -15.
  }, 8000) .repeat (infinito) .ailing (tween.aing.quadratic.inout) .start ();

04. scalalo

La nuvola è ridimensionata per essere quasi invisibile. Un altro Tween viene aggiunto al cloud e questa scala la nuvola fino alla sua dimensione normale. Con il movimento e il ridimensionamento, darà l'illusione che la nuvola stia in aumento e formando fuori dal mare come primo passo nel processo del ciclo dell'acqua. 

 cloud1.scale.x = cloud1.scale.y = cloud1.scale.z = 0.0;
  New Tween.tween (cloud1.scale) .to ({
  X: 1,
  Y: 1,
  z: 1.
  }, 8000) .repeat (infinito) .ailing (tween.aing.quadratic.inout) .start ();

05. Imposta la seconda nuvola

the water cycle scene

Una seconda nuvola siederà sopra la montagna

La prossima cloud del secondo modello deve essere posizionata dove la prima nuvola ha terminato la sua animazione come una nuvola formata nel cielo. Questo viene dato un movimento trattenuto per posizionarsi sulla terra, aumentando leggermente sopra la montagna. Ci vorranno 12 secondi per animare come è una mossa più grande. 

 var cloud2 = model2.getobjectbyname ("cloud", true);
  cloud2 = cloud2.children 
;
  cloud2.position.set (0, 30, -15);
  New Tween.tween (cloud2.position) .to ({
  x: 0,
  Y: 50,
  z: -145.
  }, 12000) .repeat (infinito) .ailing (tween.aing.quadratic.inout) .start ();

06. Rendilo pioggia

La chiave per rendere questo lavoro di illusione è consentendo alla pioggia della nuvola. Il ciclo dell'acqua ha la pioggia della nuvola mentre si muove più in alto sulla terra. Per ottenere l'effetto, verrà utilizzato un sistema di particelle. Qui viene creata la quantità di particelle e il materiale delle particelle, utilizzando un'immagine di goccia di pioggia. 

 VAR Textureloader = nuovo tre.Textureloader ();
particlecount = 1500;
particelle = nuovo tre.geometry ();
var platerial = nuovo tre.PointMaterial ({
  Colore: 0x3A4E5D,
  Dimensioni: 0,05,
  Mappa: textureloader.load ("img / rain.png"),
  Phatest: 0.3,
  Opacità: 0.9,
  trasparente: vero});

07. Creare le gocce di pioggia.

Utilizzando A per Loop, 1500 gocce di pioggia possono essere create con una posizione casuale x, y, z che sarà tra il cloud e il terreno. Ogni goccia di pioggia viene data la propria velocità casuale per rendere la pioggia più naturale. La particella viene spinta nel vertice corretto della geometria. 

 per (var i = 0; i & lt; particlecount; i ++) {
  var px = math.random () * 60 - 30,
  Py = math.random () * -10,
  PZ = Math.random () * 20 - 10;
  Var particle = nuovo tre.Vector3 (PX, PY, PZ);
  particelle.velocità = nuovo tre.Vector3 (0, - (matematica.random () * 0.9), 0);
  particelle.vertici.push (particella); }

08. Lavorare sul sistema di particelle

Ora il sistema di particelle è stato creato dalla geometria e dal materiale. Le particelle sono impostate per essere ordinate in modo che l'ordine Z sia corretto e poi le particelle di pioggia sono fatte un figlio della seconda nuvola. Ovunque la nuvola è passata, la pioggia segue anche, quindi non c'è bisogno di animare la pioggia seguendo la nuvola! 

 ParticleSystem = Nuovi tre.Puntato (particelle, Pmateriali);
ParticleSystem.SortParticles = True;
cloud2.add (particello);

09. Impostare le posizioni del modello finale

Nel modello finale, il cloud è riposizionato al punto finale del secondo ciclo di animazione cloud. Questa nuova nuvola si siederà nel cielo e non animata. Invece il fiume sta per animare, quindi il modello del fiume è immagazzinato in una variabile, pronta per aggiungere il tween ad esso. 

 var cloud3 = model3.getobjectbyname ("cloud", true);
  cloud3 = cloud3.children 
;
  cloud3.position.set (0, 50, -145);
  var river = model3.getobjectbyname ("fiume", vero);
  River = River.Children 
;

10. Riempi il fiume

the water cycle model

I livelli dell'acqua nel fiume devono aumentare

Nel terzo gradino del ciclo dell'acqua l'acqua scorre dalle colline, riempiendo fiumi e laghi mentre ritorna al mare. Questo è il movimento più sottile in quanto comporta semplicemente lo spostando l'altezza del fiume in modo che sembra riempire. Tutto è precaricato ora, quindi il dentro la funzione è chiamata. 

 New Tween.tween (river.position) .to ({
  Y: 3.
  }, 8000) .repeat (infinito) .easing (tween.aing.quadratic.inout) .tart ();
  dentro();
});

Hai dei file di progettazione per salvare? Dai un'occhiata alla nostra guida a deposito cloud. .

Pagina successiva: Aggiungi funzionalità e marcatori AR

  • 1.
  • 2.
  • 3.

Pagina corrente: Costruisci un'app AR: passaggi 01-10

Come si fa - Articoli più popolari

Come photoshop qualcuno in una figura

Come si fa Jan 24, 2026

(Immagine di immagine: futuro, Matt Smith) Imparare come Photoshop qualcuno in un'immagine è un'abilità super utile..

Master la spazzola del miscelatore in Photoshop

Come si fa Jan 24, 2026

Gli strumenti di pittura digitale hanno seriamente avanzato negli ultimi anni. Gli artisti possono utilizzare tablet per produrre..

Come strutturare le query dei supporti in Sass

Come si fa Jan 24, 2026

Praticamente ogni sito ora è costruito con almeno un cenno del web design reattivo. Il modo in cui strutturaremo questi stili re..

Come combinare l'arte 3D e comica in Zbrush

Come si fa Jan 24, 2026

Pagina 1 di 2: Pagina 1 Pagina 1 Pagina 2 Lo specialista 3D Gl..

Step-by-Step: Come imitare vernice ad olio in Corel Painter

Come si fa Jan 24, 2026

Sembra solo ieri quando stavo giocando con gli amici delle scuole superiori nei mondi fantastici pieni di cavalieri, maghi, barbari e tesori nascosti nei dungeon. Come adolescenti, i possedim..

Come influenzare le classifiche di Google con il tuo contenuto

Come si fa Jan 24, 2026

Il tuo contenuto non sta andando da nessuna parte a meno che le persone non possano cercarlo e trovarlo, quindi i contenuti dovre..

Come aggiungere divertenti sfondi CSS ai tuoi siti

Come si fa Jan 24, 2026

Il tempo era uno sfondo della pagina web era una minuscola immagine di piastrelle - e spesso orribile, aggressivamente ad assalta..

Come creare Hair in Cinema 4D

Come si fa Jan 24, 2026

Ispirato alla fantastica arte del personaggio di Carlos Ortega Elizalde e Lois van Baarle, ho deciso di provare la mia mano alla ..

Categorie