Prima di analizzare come combinare più trasformazioni, vediamo come spostare il nostro cubo all’interno dello spazio tridimensionale di Sandy. Come è facile intuire, andremo a utilizzare l’oggetto Transform3D, questa volta però useremo la funzione translate().

Il pulsante che scatena l’evento nell’esempio si chiama translateButton e va a chiamare la funzione translate(), come possiamo vedere nel codice qui sotto (che va inserito nella funzione init()):

Listato 19. Pulsante e funzione per spostare il cubo nello spazio

These are the new constructs in the init() function and the event handler
    // Associamo la funzione translate al pulsante translateButton
    translateButton.onRelease = translate;
    // Renderizziamo la scena
    world.render();
}
function translate(){
    translation.translate(Number(xStep.text),Number(yStep.text),Number(zStep.text));
}

Ecco invece come cambia la funzione createScene():

Listato 20. Contenuto della funzione createScene()

// Creiamo un TransformationGroup
var tTrans:TransformGroup = new TransformGroup();
// Creiamo l’oggetto Transform3D
translation = new Transform3D;
// diciamo al’oggetto che la trasformazione sarà uno spostamento
tTrans.setTransform( translation );
// Aggiungiamo il cubo al gruppo di trasformazione
tTrans.addChild( cube );
// Infine aggiungiamo il gruppo di trasformazione a quello principale
bg.addChild( tTrans );

Ed ecco il risultato:

Traslazione del cubo nello spazio

“© Petit Publications 2006” – diritti riservati
19 / 51

Trasformazioni combinate

I Video di HTML.it

Giorgio Di Nardo, sviluppo app mobile-first