Orientation API e WebSocket – Un cubo con CSS3D

26 luglio 2012

Creare un cubo con i CSS3D

Utilizzando in modo avanzato le proprietà di rotazione e traslazione nello spazio tridimensionale possiamo costruire un cubo: cominciamo col definire la sua struttura HTML composta dai sei div dedicati alle facce e dal div contenitore:

<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>Un cubo</title>
</head>
<body>
<div id="container">
<div class="square bottom"></div>
<div class="square left"></div>
<div class="square right"></div>
<div class="square front"></div>
<div class="square top"></div>
<div class="square back"></div>
</div>
</body>
</html>

Segue la definizione del foglio di stile, per prima cose impostiamo alcune proprietà base, centrando il contenuto rispetto ai due assi, definendo la profondità prospettica ed abilitando la modalità di visualizzazione in 3D:

html,body{
  height: 100%;
}

body{
  display: box;
  box-align: center;
  box-pack: center;
  perspective: 800px;
  background-image: radial-gradient(center center, white, gray);
}

div#container{
  position: relative;
  width: 800px;
  height: 800px;
  transform-style: preserve-3d;
  transform: translateZ(-800px) rotateY(0deg);
}

Quindi impostiamo la classe .square, comune a tutte le facce del cubo:

div.square {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 800px;
}

Ora dobbiamo applicare una trasformazione diversa ad ogni singola faccia, considerando che il centro della trasformazione corrisponde al centro di ogni elemento possiamo pensare di applicare una rotazione seguita da una traslazione di metà della dimensione della faccia, ad esempio:

div.square.left {
  background: green; 
  transform: rotateY(90deg) translateZ(-400px);
}

allo stesso modo risolviamo la disposizione delle altre facce:

div.square.bottom { 
  background: red;
  transform: rotateX(90deg) translateZ(-400px);
}
div.square.right{
  background: blue;
  transform: rotateY(270deg) translateZ(-400px);
}
div.square.front{
  background: yellow;
  transform: rotateY(0deg) translateZ(-400px);
}
div.square.top{
  background: purple;
  transform: rotateX(270deg) translateZ(-400px);
}
div.square.back{
  background: orange;
  transform: rotateY(180deg) translateZ(-400px);
}

Aggiungiamo il comodissimo Prefix Free di Lea Verou per l’aggiunta automatica dei prefissi sperimentali

<!-- scaricalo da http://leaverou.github.com/prefixfree/ -->
<script src="../prefixfree.js"></script>

e testiamo quanto sviluppato finora:

Figura 2. (clic per ingrandire)

Ovviamente la faccia più vicina alla telecamere oscura le altre e non abbiamo ancora sviluppato nessun legame tra l’oggetto che abbiamo costruito e le Device Orientation API. Ma rimediamo subito.

Per complicare la situazione, e rendere più interessante l’esperimento, in questo caso attingiamo dalle informazioni prelevate da tutte e tre le variabili; in questa condizione è importante mantenere l’ordine della trasformazione inverso rispetto a alle variabili ricevute, quindi gamma, beta e alpha:

window.addEventListener ("deviceorientation", traccia, false);

function traccia(evento) {
  document.getElementById('container').style['-webkit-transform'] =
          "translateZ(-800px)" +
          "rotateY(" + ( -evento.gamma ) + "deg) " +
          "rotateX(" + evento.beta + "deg) " +
          "rotateZ(" + ( evento.alpha ) + "deg) ";
  
  document.getElementById('container').style['transform'] =
  document.getElementById('container').style['-webkit-transform'];
}

Aggiorniamo la pagina sul nostro device per apprezzare il risultato:

Figura 3. (clic per ingrandire)

Dentro al cubo

Ma cosa succede se spostiamo la telecamera all’interno del cubo? Per farlo e sufficiente modificare una sola riga nel progetto precedente, nella fattispecie la proprietà transform del #container traslando il cubo lungo l’asse z fino a portare la telecamera all’interno di esso:

transform: translateZ(800px) rotateY(0deg);

Aggiorniamo la nostra demo e potremo compiacerci di aver creato un semplicissimo sistema per gestire un tour vrtuale a 360° dove l’utente può indirizzare la telecamera orientando il proprio device.

Figura 4. (clic per ingrandire)

Ma non è finita, costruendo una cubemap, o utilizzandone una dalla rete, e associando ad ogni faccia del nostro cubo la giusta porzione della cubemap è possibile ottenere un vero e proprio panorama esplorabile a 360 gradi, ecco uno screenshot dimostrativo:

Figura 5. (clic per ingrandire)

Se vuoi aggiornamenti su Orientation API e WebSocket - Un cubo con CSS3D inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Orientation API e WebSocket - Un cubo con CSS3D

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy