A-Frame WebXR - Parte 1 - Setup e creazione della scena

Per questo tutorial useremo glitch.com come ambiente di sviluppo. Se non sapete cos’è seguite questo tutorial.

Dopo aver inserito lo script di riferimento ad AFrame, andremo ad inserire nel body il tag <a-scene>. Come prima cosa andremo ad inserire una sfera ad 1m di altezza e cinque metri dalla camera (0 1 -5) con un raggio di 1 m e di colore rosso (#ff0000) all’interno del nostro progetto.

Aggiungiamo anche uno sfondo (a-sky) di colore azzurro.

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-sky color="#00ffff"></a-sky>
    </a-scene>
  </body>
</html>

Carichiamo negli assets di glitch il file che useremo come texture.

Carichiamo il file che trovate a questo link.

Una volta caricato clicchiamo sull’immagine appena caricata, si aprirà una finestra e poi clicchiamo sul bottone Copy per copiare il codice.

Torniamo nel file index.html e aggiungiamo il tag a-plane con posizione 0 0 0 e una rotazione -90 0 0 con una larghezza ed altezza di 10 aggiungendo la texture con src=”inserire il codice copiato”. Questo tag aggiunge il pavimento con la texture selezionata.

<a-plane position="0 0 0" rotation="-90 0 0" width="10" height="10" src="INSERIRE IL CODICE COPIATO"></a-plane>

Copiamo il codice appena inserito e posizioniamolo a 5 m di altezza (position=”0 5 0″) e lo ruotiamo di 90 (rotation=”90 0 0″).

<a-plane position="0 0 0" rotation="-90 0 0" width="10" height="10" src="INSERIRE IL CODICE COPIATO"></a-plane>
<a-plane position="0 5 0" rotation="90 0 0" width="10" height="10" src="INSERIRE IL CODICE COPIATO"></a-plane>

Nello stesso modo creiamo le altre 4 pareti per creare una stanza.

<a-plane position="0 2.5 5" rotation="0 0 0" width="10" height="5" src="INSERIRE IL CODICE COPIATO"></a-plane>
<a-plane position="0 2.5 -5" rotation="0 180 0" width="10" height="5" src="INSERIRE IL CODICE COPIATO"></a-plane>
<a-plane position="5 2.5 0" rotation="0 -90 0" width="10" height="5" src="INSERIRE IL CODICE COPIATO"></a-plane>
<a-plane position="-5 2.5 0" rotation="0 90 0" width="10" height="5" src="INSERIRE IL CODICE COPIATO"></a-plane>

Testiamo il risultato nel browser di Oculus inserendo il link composto dal nome del progetto e dal sito glitch.me nel mio caso oculus-go.glitch.me

Di seguito il codice fino a questo punto:

<!doctype html>
<html>
    <head>
        <title>A-Frame WebXR Oculus</title>
        <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>      
    </head>
    <body>
      <a-scene>
      <a-sphere position="0 1 -5" radius="1" color="#FF0000" shadow></a-sphere>
      <a-plane position="0 0 0" rotation="-90 0 0" width="10" height="10" src="INSERIRE IL CODICE COPIATO"></a-plane>
      <a-plane position="0 5 0" rotation="90 0 0" width="10" height="10" src="INSERIRE IL CODICE COPIATO"></a-plane>
      <a-plane position="0 2.5 5" rotation="0 0 0" width="10" height="5" src="INSERIRE IL CODICE COPIATO"></a-plane>
      <a-plane position="0 2.5 -5" rotation="0 180 0" width="10" height="5" src="INSERIRE IL CODICE COPIATO"></a-plane>
      <a-plane position="5 2.5 0" rotation="0 -90 0" width="10" height="5" src="INSERIRE IL CODICE COPIATO"></a-plane>
      <a-plane position="-5 2.5 0" rotation="0 90 0" width="10" height="5" src="INSERIRE IL CODICE COPIATO"></a-plane>
      </a-scene>
    </body>
</html>

Nel prossimo tutorial inseriremo i controller e attiveremo il teleport.

Tutorial parte 2

Post Views: 122