Che cos'è un giroscopio?

Un giroscopio è un piccolo sensore all'interno del tuo telefono, tablet o laptop che misura la rotazione attorno a tre assi. Combinato con l'accelerometro e il magnetometro, indica al dispositivo in quale direzione è inclinato, quanto velocemente sta ruotando e verso quale direzione è rivolto. Questi dati alimentano la rotazione automatica dello schermo, la realtà aumentata, i giochi di corse, le foto panoramiche, il conteggio dei passi e la stabilizzazione delle immagini.

I dispositivi moderni espongono queste informazioni ai browser web attraverso l'API DeviceOrientationEvent. Il browser segnala tre angoli — alfa, beta e gamma — che insieme descrivono l'orientamento del dispositivo nello spazio 3D rispetto alla Terra.

Comprendere alfa, beta e gamma

I tre angoli di orientamento descrivono ciascuno la rotazione attorno a un asse diverso:

  • Alfa (0–360°) — Rotazione attorno all'asse Z (verticale). Immagina di far ruotare il dispositivo piatto su un tavolo; alfa è la direzione simile a una bussola.
  • Beta (-180–180°) — Rotazione attorno all'asse X (sinistra-destra). Questa è l'inclinazione anteriore-posteriore, come se inclinassi il dispositivo verso o lontano da te.
  • Gamma (-90–90°) — Rotazione attorno all'asse Y (alto-basso). Questa è l'inclinazione sinistra-destra, come se inclinassi il dispositivo di lato.

Descrizione dello strumento

Questo strumento legge i dati di orientamento in tempo reale dal giroscopio del tuo dispositivo e li renderizza come un modello 3D che rispecchia il tuo movimento in tempo reale. Visualizza anche i valori grezzi di alfa, beta e gamma in gradi in modo da poter verificare che il sensore funzioni correttamente e produca letture accurate.

Esempi

Posizione del dispositivo Alfa Beta Gamma
Disteso, schermo in alto, parte superiore verso N 0° 0° 0°
Tenuto in verticale in modalità portrait 0° 90° 0°
Inclinato con bordo destro verso il basso (landscape) 0° 0° 90°
Ruotato 180° disteso, schermo ancora in alto 180° 0° 0°

Funzionalità

  • Modello 3D in tempo reale che ruota in sincronia con il tuo dispositivo
  • Letture in tempo reale di alfa, beta e gamma in gradi
  • Rileva se il browser supporta l'API di orientamento

Come funziona

Lo strumento si iscrive all'evento deviceorientation del browser, che si attiva ogni volta che l'orientamento del tuo dispositivo cambia. Ogni evento fornisce i valori attuali di alfa, beta e gamma. Il modello 3D utilizza Three.js per convertire questi angoli in una rotazione quaternione, applicata con interpolazione fluida su ogni frame di animazione per evitare tremolii.

Limitazioni

  • Richiede un dispositivo con un giroscopio integrato (la maggior parte dei desktop e molti laptop non ne hanno uno)
  • iOS Safari richiede un'autorizzazione esplicita tramite un gesto dell'utente prima che i dati del sensore vengano condivisi
  • Richiede un contesto sicuro (HTTPS) sulla maggior parte dei browser moderni
  • Alcuni browser segnalano l'orientamento solo quando la pagina è in primo piano

Suggerimenti

  • Se le letture rimangono a zero, il tuo dispositivo probabilmente non ha un giroscopio o il browser sta bloccando l'accesso
  • Su iOS, tocca il pulsante "Abilita movimento" dopo il caricamento della pagina — l'autorizzazione non può essere concessa automaticamente
  • Posiziona il dispositivo piatto su una superficie stabile per confermare i valori di base prima di testare le inclinazioni