Vediamo allora il contenuto della funzione createScene() che si occupa di "piazzare" l'oggetto (nel nostro caso un cubo) all'interno del mondo.
Listato 3. funzione che mette l'oggetto all'interno del mondo
function createScene( bg:Group ):Void {
// Creazione del cubo
// Creiamo un cubo con i lati di 50 pixel
var cube:Object3D = new Box( 50, 50, 50, 'quad' );
// Per dare un aspetto migliore al cubo realizziamo una skin
// In questo caso creiamo una skin con un colore verde, semi trasparente, e i bordi neri
var skin:Skin = new MixedSkin( 0x00FF00, 80, 0, 100, 1 );
// Quindi applichiamo la skin al cubo
cube.setSkin( skin );
// e infine aggiungiamo il cubo alla scena
bg.addChild( cube );
}
Impostando tutti i lati alla stessa lunghezza (nel nostro caso 50 pixel) abbiamo ottenuto un cubo.
Può essere creato con modalità "tri", con tre vertici per ogni faccia, oppure in modalità "quad" (quella che abbiamo usato), con quattro vertici per ogni faccia.
Per dare un look migliore all'esempio, abbiamo anche creato una skin per il cubo; le skin utilizzabili in Sandy sono molte, nel nostro esempio era sufficiente una MixedSkin, dove si stabilisce un colore per le facce e uno per i bordi.
Gli argomenti della funzione MixedSkin sono colore e trasparenza delle facce, colore, trasparenza e spessore delle linee.
Il cubo viene infine aggiunto alla scena. Testando il filmato il risultato sarà il seguente
Scena con il cubo creato
Il risultato non sembra certo un cubo in 3D, però noi abbiamo spostato la telecamera solo sull'asse Z, pertanto semplicemente la telecamera è posizionata di fronte al cubo.
Ecco come cambia il codice, della funzione createScene(), applichiamo dei cambiamenti al cubo:
Listato 4. Cambiamenti al codice di createScene()
function createScene( bg:Group ):Void {
// LA PRIMA PARTE RESTA INVARIATA
// Creazione del cubo
// Creiamo un cubo con i lati di 50 pixel
var cube:Object3D = new Box( 50, 50, 50, 'quad' );
// Per dare un aspetto migliore al cubo realizziamo una skin
// In questo caso creiamo una skin con un colore verde, semi trasparente, e i bordi neri
var skin:Skin = new MixedSkin( 0x00FF00, 80, 0, 100, 1 );
// Quindi applichiamo la skin al cubo
cube.setSkin( skin );
// e infine aggiungiamo il cubo alla scena
bg.addChild( cube );
// AGGIUNGIAMO QUESTA PARTE
// Per vedere il cubo veramente in 3D, applicheremo alcune trasformaizoni
// Innanzitutto creiamo un oggetto TransformGroup
var tg:TransformGroup = new TransformGroup();
// Poi creiamo un oggetto Transform3D, per applicare trasformazioni in 3 dimensioni
var rotation:Transform3D = new Transform3D();
// Quindi eseguiamo le modifiche
// Ruotiamo il cubo
rotation.rot(20,30,0);
// Impostiamo la trasformazione nel gruppo creato in precedenza
tg.setTransform( rotation );
// e aggiungiamo il cubo al gruppo stesso
tg.addChild( cube );
// Quindi aggiungiamo tutto il gruppo di trasformazione al gruppo principale del mondo 3D
bg.addChild( tg );
}
Per ruotare o spostare un oggetto (o un gruppo di oggetti) dobbiamo creare un TransformationGroup, e applicare a esso le trasformazioni.
Tali trasformazioni sono fatte dall'oggetto Transform3D e il tipo di trasformazione viene impostato chiamando le funzioni di questo oggetto (infatti nella funzione abbiamo richiamato la funzione rot per la rotazione); i parametri per la funzione rot sono la rotazione rispettivamente intorno agli assi x,y e z.
Nel nostro esempio abbiamo ruotato il cubo di 20 gradi sull'asse X e di 30 gradi sull'asse Y.
Infine abbiamo inserito il cubo nel TransformationGroup, e quest'ultimo nel gruppo principale (creato, ricordiamo, nella funzione init).
Il risultato dopo queste modifiche sarà quello illustrato qui sotto.
Scena con il cubo ruotato
"© Petit Publications 2006" - diritti riservati
