Recentemente sono venuto a conoscenza di un metodo per sviluppare realtà virtuale (VR) utilizzando semplice HTML. Potete trascinare l’immagine qui sotto con il mouse navigando nella stanza.
Per vedere a schermo intero dovete cliccare qui (si apre in un’altra finestra). Se state guardando con uno smartphone, cliccate sull’icona a forma di visorino: l’immagine si sdoppierà per la visione binoculare.
Il metodo utilizza il tag a-scene
, di cui trovate una ampia documentazione nel sito A-Frame.io
Il codice per realizzare l’immagine qui sopra è il seguente:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Salone • A-Frame</title> <meta name="description" content="Salone • A-Frame"> <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script> </head> <body> <a-scene> <a-assets> <img id="texture-pavimento" src="pavimento.png" > <img id="texture-legno" src="legno.png" > </a-assets> <a-entity id="stanza"> <a-box id="pavimento" position="0 -0.1 0.4229" width="4.35" height="0.2" depth="7.2457" src="#texture-pavimento"></a-box > <a-entity id="muri" > <a-box id="soffitto" position="0 3.05 0.4229" width="4.35" height="0.2" depth="7.2457"></a-box> [...] </a-entity> <a-entity id="scaffalatura"> <a-entity id="scaffali-legno" > <a-box position="-0.925 0.325 -2.825" width="2.1" height=".05" depth="0.35" src="#texture-legno" > <a-animation attribute="rotation" begin="click" to="360 0 0"></a-animation> </a-box> [...] </a-entity> </a-entity> </a-entity> <a-sky color="black"></a-sky> <a-entity> <a-camera> <a-cursor color="#2E3A87"></a-cursor> </a-camera> </a-entity> <a-light type="point" color="white" intensity="0.8" position="0 2.6 -1.2886"></a-light> <a-light type="point" color="white" intensity="0.8" position="0 2.6 2.1343"></a-light> </a-scene> </body> </html>
Notate nell’head
del documento il richiamo alla libreria Javascript corrispondente. Il pavimento, i muri e gli scaffali sono realizzati con i tag a-box
. Da notare inoltre che grazie ai tag a-animation
è possibile animare i singoli elementi. Nel nostro caso le animazioni si attivano puntando il cursore posto al centro dell’immagine su uno dei ripiani in legno e facendo clic con il mouse.
Tutti gli elementi possono essere inoltre manipolati tramite il DOM (e qui ci vorrebbe uno sviluppatore vero).