Web tech – Andy War

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

Inserimento di SVG

Gli SVG sono dei disegni vettoriali descritti con un linguaggio simile a quello delle pagine web. E’ possibile animarli tramite i fogli di stile e tramite JavaScript.

Per il piccolino qui sopra ho utilizzato un CSS allegato direttamente al file.

Per questo rotante ho utilizzato l’attributo animateTransform applicato direttamente al disegno.

Per questo qui sopra ho utilizzato uno script con una funzione sinusoidale. Lo script agisce tramite il DOM sull’attributo “transform” dello SVG. Ho aggiunto due bottoni che tramite eventListeners fanno partire e fermare l’animazione. Molti degli script li ho presi da qui.

Waiting for the Merge

Ultimamente si sono sviluppati strumenti eccellenti per il lavoro collaborativo, primo tra tutti GitHub, staordinariamente semplice anche per i non geek. Il Merge è quando il tuo ramo di sviluppo viene integrato nel progetto principale.