La realtà virtuale tramite HTML

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).

Pubblicato
Etichettato come Web tech

Di Andy War

Born in Naples, 1965, lived in Princeton and France, then back to Italy. Comics. Grendizer, Star Wars, Lucky Luke. Architecture, Punk Rock. Sciattoproduzie, structures. Digital animations, running, hospitals. I live and work in Rome, married with two children.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.