La realtà virtuale tramite HTML

Recentemente sono venuto a conoscenza di un metodo per sviluppare realtà virtuale (VR) utilizzando semplice 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).

Autore: 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 *