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

WordPress 4.7

E’ uscita oggi la versione 4.7 di WordPress, il CMS più utilizzato nel web. Ancora una volta fondamentale il mio contributo, con ben 79 stringhe tradotte in italiano. Alcune stringhe erano tipo “Yes”, “No”, “Maybe”, puntualmente tradotte in “Sì”, “No”, “Boh”.

Prova Calypso

Calypso è una app per gestire i propri siti basati su WordPress. I siti devono risiedere su WordPress.com oppure su un proprio server ma con il plugin Jetpack, dato che sfrutta la REST API. Calypso è interamente scritto in Javascript, ed è open source.