Un cubo che ruota

Come accennato nella lezione precedente, un ambiente 3D è regolato da uno spazio che in papervision3D è denominato scene, l'occhio dell'osservatore chiamato camera e uno schermo in cui riprodurre le immagini in due dimensioni denominato viewport3D che è una novità della versione 2.

Il primo esempio che esaminiamo mostra come ruotare un cubo.

Cominciamo a scrivere il codice. Per prima cosa dobbiamo inizializzare uno Sprite (la nostra Viewport3D) nello stage in cui verrà disegnata la simulazione 3D.

viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);

scena = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();

Abbiamo assegnato le dimensioni alla viewport e abbiamo stabilito che non sarà ridimensionabile (terzo parametro) ma che accetterà eventi (quarto parametro).

materiale = new ColorMaterial(0x333333);
solido = new Cube(new MaterialsList({all:materiale}), 300, 200, 150);
scena.addChild(solido);

Qui creiamo un materiale con un colore unico e un cubo - al quale applichiamo il materiale stesso - dove definiamo le proporzioni altezza, larghezza e profondità.

Per aggiungere l'oggetto alla scena usiamo il consueto metodo addChild(). Con lo stesso criterio possiamo creare gruppi di oggetti aggiungendo non più il solido alla scena, ma un solido come figlio di altri solidi. Vedremo più avanti altri esempi a riguardo.

Infine l'aggiunta dell'EventListener permette di ruotare il cubo.

addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(e:Event):void {
  solido.rotationY += 2;
  solido.rotationX += 2;
  renderer.renderScene(scena, camera, viewport);
}

Molto importante l'istruzione renderer.renderScene, che ridisegna la scena sullo stage. Questa deve essere ridisegnata ad ogni modifica altrimenti gli effetti di una rotazione o di uno spostamento non saranno visibili.

Per concludere è importante considerare che per spostare un oggetto nello spazio 3D, e in particolare il nostro cubo, possiamo semplicemente utilizzare le proprietà x,y,z proprio come faremmo se stessimo lavorando con un semplice movieClip.

Possiamo vedere tutto il codice dell'esempio qui