back to top
Enter your search query...
AltroGuide

AR sul Web con Three.js: Guida Completa e Tutorial Pratico

Introduzione

AR sul Web con Three.js è il nuovo orizzonte dello sviluppo frontend che unisce la potenza di Three.js, la più popolare libreria JavaScript per la grafica 3D nel browser, con le potenzialità delle API WebXR e di librerie come AR.js. Il risultato è la Realtà Aumentata fruibile direttamente tramite un sito web, senza dover installare app native. Questa possibilità apre scenari innovativi in campi come e-commerce, marketing, didattica e intrattenimento.

Nel seguente articolo, esploreremo a fondo i concetti chiave per implementare AR sul Web con Three.js e AR.js, realizzando un progetto pratico in cui un cubo 3D si sovrappone a un marker stampato e inquadrato dalla fotocamera. Mostreremo anche come ottimizzare le performance e introdurre spunti su come ampliare l’esperienza con animazioni, modelli 3D complessi e world tracking. Il tutto con riferimenti a risorse esterne, come la documentazione ufficiale di Three.js, e link interni a contenuti di CyberAlchimista che approfondiscono le performance JavaScript e altre best practice.

Se stai cercando di capire come partire con la AR sul Web con Three.js, questa guida di circa 4000 parole (al netto del codice) fa al caso tuo. Tuffiamoci subito!

1. AR sul Web con Three.js: panoramica e potenzialità

La Realtà Aumentata (AR) si basa sul sovrapporre contenuti digitali alla realtà inquadrata dalla fotocamera. Tradizionalmente, le applicazioni AR erano app native (iOS o Android) che sfruttavano ARKit o ARCore. Oggi, però, con l’avvento di WebXR e librerie come AR.js, è possibile erogare un’esperienza AR direttamente dal browser, semplificando notevolmente la fruizione e la condivisione.

1.1 Perché la AR sul Web con Three.js è vantaggiosa

  1. Accessibilità immediata: non serve installare nulla. Basta aprire un link e concedere i permessi alla fotocamera.
  2. Cross-platform: funziona (in teoria) su desktop, laptop, tablet e smartphone, sempre che il browser supporti le API necessarie.
  3. Potenzialità 3D: con Three.js puoi creare oggetti, materiali, luci e animazioni come in un videogioco, ma tutto in un normale sito web.

Per approfondire la creazione di animazioni complesse in JavaScript (anche se non strettamente in AR), puoi consultare il nostro articolo su Animazioni JavaScript Avanzate con GSAP: Guida Completa. Se invece vuoi uno sguardo sulle performance JavaScript in generale, ti consigliamo JavaScript Performance Optimization: Tecniche Avanzate per l’Ottimizzazione JavaScript.

2. Scegliere la tecnologia: AR.js, WebXR e 8thWall

Per creare progetti di AR sul Web con Three.js, ci si affida spesso a:

  1. AR.js: libreria open source che semplifica il tracciamento di marker (in formato .patt), con un’ottima integrazione in Three.js.
  2. WebXR: lo standard (in evoluzione) per VR e AR su web. Implementa funzionalità di advanced tracking (come world tracking), ma può essere ancora poco stabile su alcuni browser e dispositivi.
  3. 8thWall: soluzione proprietaria molto potente, con markerless AR, image tracking e world tracking evoluto. È però a pagamento per i progetti pubblici.

Nel tutorial pratico, useremo AR.js, ideale per un primo approccio e per prototipi marker-based. Se cerchi un approccio più orientato all’HTML dichiarativo, esiste anche A-Frame, che semplifica la creazione di scene VR/AR e si integra con AR.js.

3. WebXR e AR sul Web con Three.js: scenari e sfide

3.1 Dove brilla la AR via web

  • Appuntamenti fieristici e marketing: un link con un progetto AR che l’utente può subito provare con il suo smartphone, inquadrando gadget o brochure.
  • E-commerce: far apparire un modello 3D di un prodotto sopra un marker, così che l’utente possa ispezionarlo “dal vivo”.
  • Educazione: inquadrare un foglio o un libro (dotato di marker) per sbloccare modelli anatomici, molecole 3D, planimetrie storiche.

3.2 Sfide tecniche

  • Supporto browser: iOS in particolare limita alcune funzioni WebXR.
  • Performance: la pipeline AR include elaborazione video e rendering 3D in tempo reale. Le performance vanno curate (vedi anche il nostro articolo su Web Performance: introduzione ai Core Web Vitals 2025 per principi di base).
  • Concessione dei permessi: l’utente deve fidarsi e accettare di concedere la fotocamera a un sito.

4. Concetti chiave per AR sul Web con Three.js

Per realizzare AR sul Web con Three.js e AR.js, è necessario comprendere quattro elementi fondamentali: scene, camera, renderer e marker.

  1. Scene (Scena): in Three.js, una Scene() è il contenitore di tutti gli oggetti 3D, luci, modelli, ecc.
  2. Camera: la camera 3D si sovrappone alla fotocamera reale. AR.js calcola in tempo reale la posizione e i parametri di proiezione.
  3. Renderer: WebGLRenderer trasforma la scena 3D in un’immagine 2D. In AR.js, spesso lo sfondo è trasparente, così da vedere la ripresa video “sotto” gli oggetti 3D.
  4. Marker: un pattern stampato, ad esempio in formato .patt, che AR.js riconosce e traccia. Tutti gli oggetti 3D all’interno di un markerRoot (un THREE.Group) verranno visualizzati in corrispondenza del marker reale inquadrato.

5. Setup di progetto: AR sul Web con Three.js (marker-based)

5.1 Ambiente di sviluppo

  • Un server locale: ad esempio http-server di Node.js.
  • Browser compatibile (Chrome, Firefox, Safari 13+).
  • Marker stampato: se usi “hiro.patt”, è una buona base di test.
  • camera_para.dat: parametri generici per AR.js, scaricabili dal repository GitHub di AR.js.

5.2 Struttura file

ar-cube-demo/
├─ index.html
├─ script.js
└─ data/
   ├─ camera_para.dat
   └─ markers/
      └─ hiro.patt

Puoi sostituire “hiro.patt” con un tuo pattern personalizzato, generato con i tool di AR.js.

6. Esempio Pratico: Cubo 3D con AR.js e Three.js

Ora realizziamo un prototipo di AR sul Web con Three.js che mostra un cubo rosso sopra il marker “hiro”.

6.1 index.html

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <title>AR Cube Demo</title>
  <!-- Librerie base: Three.js e AR.js -->
  <script src="https://cdn.jsdelivr.net/npm/three@0.145.0/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/arjs@3.3.2/three.js/build/ar-threex.js"></script>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    #ar-container {
      width: 100vw;
      height: 100vh;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="ar-container"></div>
  <script src="script.js"></script>
</body>
</html>

6.2 script.js

let scene, camera, renderer;
let markerRoot;
let arToolkitSource, arToolkitContext;
let cube;

function init() {
  // Crea la scena
  scene = new THREE.Scene();

  // Crea il renderer
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.domElement.style.position = 'absolute';
  renderer.domElement.style.top = 0;
  document.getElementById('ar-container').appendChild(renderer.domElement);

  // Inizializza webcam come sorgente AR
  arToolkitSource = new THREEx.ArToolkitSource({ sourceType: 'webcam' });
  arToolkitSource.init(() => onResize());

  window.addEventListener('resize', onResize);

  // Configura ArToolkitContext
  arToolkitContext = new THREEx.ArToolkitContext({
    cameraParametersUrl: 'data/camera_para.dat',
    detectionMode: 'mono'
  }, () => {
    camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
  });

  // Crea la camera e aggiungila alla scena
  camera = new THREE.Camera();
  scene.add(camera);

  // Crea il gruppo markerRoot
  markerRoot = new THREE.Group();
  scene.add(markerRoot);

  // Controlli per il marker "hiro"
  new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
    type: 'pattern',
    patternUrl: 'data/markers/hiro.patt'
  });

  // Aggiunge un cubo
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  cube = new THREE.Mesh(geometry, material);
  cube.position.set(0, 0.5, 0);
  markerRoot.add(cube);

  animate();
}

function onResize() {
  arToolkitSource.onResizeElement();
  arToolkitSource.copyElementSizeTo(renderer.domElement);
  if (arToolkitContext.arController !== null) {
    arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas);
  }
}

function animate() {
  requestAnimationFrame(animate);

  if (arToolkitSource.ready) {
    arToolkitContext.update(arToolkitSource.domElement);
  }

  // Rotazione del cubo
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

window.addEventListener('load', init);

6.3 Come testare

  1. Avvia un server locale (es. npx http-server . nella cartella).
  2. Apri http://localhost:8080 in Chrome/Firefox e consenti l’accesso alla webcam.
  3. Stampa o visualizza “hiro.patt” su un altro dispositivo.
  4. Inquadra il marker: dovresti vedere il cubo rosso apparire sullo schermo, ruotando in tempo reale.

7. Approfondimenti: animazioni, modelli 3D e multi-marker

Una volta compreso come funziona un singolo cubo in AR sul Web con Three.js, puoi espandere il concetto in molti modi:

  1. Importare modelli 3D: Ad esempio .gltf, .obj o .fbx, grazie ai loader di Three.js. Puoi visualizzare personaggi animati, oggetti di design, prototipi.
  2. Multi-marker: AR.js supporta la gestione di più marker contemporaneamente. Potresti creare piccole “isole” 3D posizionate su ogni marker.
  3. Animazioni complesse: Usa Animazioni JavaScript Avanzate con GSAP: Guida Completa per rendere dinamici i movimenti, i fade-in e i passaggi di stato.
  4. Audio: Fa partire un suono quando il marker viene rilevato o quando l’oggetto viene cliccato.
  5. Interattività: Se l’utente tocca l’oggetto (da mobile) o clicca (da desktop), puoi cambiare texture, colore o far partire un’animazione.

8. Performance e best practice

8.1 Ottimizzazione del codice JavaScript

La AR sul Web con Three.js implica la combinazione di computer vision (tracciamento marker) e rendering 3D. Per mantenere un frame rate elevato:

  • Evita calcoli superflui nel loop animate().
  • Minimizza le chiamate a console.log().
  • Riduci la complessità degli shader o delle luci in tempo reale se noti rallentamenti.

Se vuoi approfondire le tecniche di performance, consulta JavaScript Performance Optimization: Tecniche Avanzate per l’Ottimizzazione JavaScript.

8.2 Dimensione dei modelli e texture

Carica modelli leggeri e texture compresse. Lo streaming di grandi risorse potrebbe rallentare molto, specialmente su rete mobile.

8.3 Dispositivi mobili e considerazioni UX

  • HTTPS: su mobile, l’accesso a fotocamera e sensori può richiedere protocollo HTTPS.
  • Ergonomia: spiega all’utente come tenere il device e inquadrare il marker in buone condizioni di luce.
  • Fallback: se il device è vecchio e non supporta le API, fornisci un messaggio alternativo o un contenuto statico.

Per un inquadramento più generale delle prestazioni web, vedi anche Web Performance: introduzione ai Core Web Vitals 2025.

9. Marker-based vs Markerless

Finora, abbiamo visto un approccio marker-based all’AR sul Web con Three.js. E se volessimo evitare un marker fisico?

  1. Markerless (world tracking): Richiede un device con sensori e un browser compatibile con WebXR Device API. Si basa sul rilevamento di feature dell’ambiente (es. piani o punti).
  2. Soluzioni proprietarie: come 8thWall, che implementa advanced tracking e occlusione, ma a pagamento.

Per molti progetti didattici o di marketing “rapido”, la marker-based AR risulta ancora la più semplice e affidabile.

10. Casi d’uso reali di AR sul Web con Three.js

  1. E-commerce d’arredo: L’utente “posa” un mobile virtuale sul marker a terra per valutarne dimensioni e colore.
  2. Giochi a caccia di marker: Raccogli 5 marker sparsi in un ambiente e sblocca un contenuto extra.
  3. Libri interattivi: Inquadrando il marker stampato sul testo, appare un modello 3D esplicativo (ad esempio un dinosauro o un organo anatomico).

11. Risoluzione dei problemi comuni

  • Webcam non funziona: controlla i permessi del browser e verifica che tu stia servendo la pagina in locale (non con file://).
  • Marker non riconosciuto: il pattern è troppo piccolo, stampato male o l’illuminazione è scarsa. Prova a ingrandire il marker.
  • Lag e scatti: probabilmente la GPU del device è saturata. Riduci la complessità 3D e chiudi eventuali tab pesanti.
  • Errore 404 su camera_para.dat: assicurati che il percorso del file sia corretto.

12. Espandere la propria competenza AR: risorse interne ed esterne

12.1 Link interni su CyberAlchimista

12.2 Link esterni

  • Three.js.org – Sito ufficiale con documentazione, esempi e guide.
  • A-Frame – Framework basato su HTML per AR/VR, ottimo per progetti rapidi.
  • AR.js su GitHub – Repository ufficiale con esempi e tutorial.
  • MDN WebXR Device API – Riferimento per le API standard WebXR, incluse le funzioni AR e VR.

13. Oltre il cubo: idee creative

Ora che hai padroneggiato un prototipo base di AR sul Web con Three.js, puoi sperimentare con:

  1. Modelli complessi: Importa un .gltf e aggiungi animazioni.
  2. Interattività: Gestisci eventi di click/tap sugli oggetti 3D per modificare colore, mostrare popup, avviare suoni.
  3. Sincronizzazione multi-utente: Con WebSockets o WebRTC, più persone vedono lo stesso oggetto 3D dal proprio device.
  4. Effetti particellari: fiammate, nebbie o scie attorno al marker per scenari più spettacolari.
  5. Integrazione con altre API: ad esempio, recuperare info da un’API esterna e mostrarle in AR.

14. Esperienza utente e design AR

Realizzare un progetto di AR sul Web con Three.js non basta: devi curare l’esperienza utente. Consigli:

  • Includi istruzioni chiare su come inquadrare il marker (luce, distanza, angolo).
  • Usa un indicatore di stato (es. “Marker non rilevato” / “Marker rilevato!”).
  • Assicurati che l’interfaccia sia responsiva su mobile.
  • Fornisci un pulsante per attivare/disattivare eventuali animazioni o suoni, così da non infastidire l’utente.

15. AR markerless e il futuro di AR sul Web con Three.js

  • World tracking: consentirebbe di posizionare gli oggetti in qualsiasi punto dell’ambiente, senza marker. È già possibile su device moderni con alcune limitazioni.
  • Occhiali AR: in un domani prossimo, potremmo navigare pagine web e vedere gli oggetti 3D integrati nel mondo reale, senza dover usare la fotocamera di uno smartphone.
  • Integrazione con IA: per generare modelli 3D on the fly o riconoscere oggetti reali (e non solo marker).

Chi sperimenta già oggi con AR sul Web con Three.js si troverà avvantaggiato quando queste tecnologie diventeranno mainstream.

16. Conclusioni: perché vale la pena investire in AR sul Web con Three.js

La AR sul Web con Three.js coniuga accessibilità, potenza 3D e immediatezza di condivisione. Sebbene presenti ancora vincoli in termini di performance e compatibilità, i progressi rapidi di browser e standard WebXR aprono prospettive interessanti. Dalla semplice demo con un cubo rosso che ruota sul marker “hiro” puoi arrivare a sviluppare esperienze immersive, con animazioni avanzate e interattività personalizzata.

Grazie all’ecosistema di Three.js, puoi importare modelli e materiali di alta qualità, e con AR.js puoi garantire un tracking sufficientemente stabile su molti dispositivi. Per spingersi oltre, potresti sperimentare con librerie come A-Frame o soluzioni commerciali come 8thWall se hai bisogno di tracciamento di superfici e feature avanzate.

In ogni caso, il futuro del web appare sempre più immersivo: comprendere come funziona la AR sul Web con Three.js significa farsi trovare pronti per le sfide di domani, quando la navigazione web si integrerà con l’ambiente circostante e la distinzione tra reale e digitale sarà sempre più sottile.

Condividi

Articoli Recenti

Categorie popolari

AltroJSCSSTipsGuide

Potrebbe interessarti:

© Copyright - CyberAlchimista
Sviluppato da Gioacchino