Share
Per legare con il nostro omaggio Papervision3D Essentials, il tutorial di oggi include anche un tema PV3D.
Questo tutorial in due parti ti mostrerà come iniziare con il motore Papervision3D, quindi come far saltare la tua creazione fuori dallo schermo usando un effetto anaglifo in combinazione con gli occhiali 3D.
Hai un paio di occhiali 3D in giro? Qui nel Regno Unito, Channel 4 gestisce una speciale settimana 3D - sette giorni di programmi TV trasmessi in 3D - così tante persone qui fanno. Mettiamoli per usare.
Questo tutorial in due parti ti mostrerà come iniziare con il motore Papervision3D e come fare in modo che la tua creazione salti fuori dallo schermo.
In questa prima parte, imparerai le basi di PV3D, finendo con qualcosa del genere:
... e nella seconda parte, imparerai l'effetto anaglifo per gli occhiali 3D e applicalo a ciò che hai fatto in questo modo:
Se si utilizza Flash, creare un nuovo file Flash ActionScript 3.0. Imposta la dimensione del palco per essere quello che vuoi - Mi attaccherò con il predefinito 550 per 400 pixel.
Mentre ci sei, crea un nuovo file ActionScript e salvalo come Main.as nella stessa cartella del FLA. Utilizzeremo questo file AS come FLA classe del documento, quindi fai clic su uno spazio vuoto nel tuo file FLA e inserisci Principale nella casella "Classe documento" del pannello Proprietà.
(Se non si utilizza l'IDE Flash, è sufficiente creare un nuovo progetto AS3.)
Vai alla pagina di download di Papervision. Esistono molte versioni diverse e alcuni tipi diversi di file (zip, swc, mxp). Basta prendere l'ultimo file .zip (dovrebbe dire In primo piano Vicino a esso). Viene chiamato quello che sto usando Papervision3D 2.1.920.zip (da utilizzare con il libro "Papervision3D Essentials").
Estrai il file zip che hai appena scaricato in qualsiasi punto del tuo disco rigido. Mi piace tenere tutti i diversi motori che uso nella stessa cartella, ma dipende da te.
Flash ha bisogno di sapere dove hai estratto Papervision prima che possa usarlo. Noi usiamo a classpath per questo: clicca Modifica> Preferenze, selezionare ActionScript, quindi fare clic Impostazioni di ActionScript 3.0 ... .
Nella casella che appare, fai clic sulla piccola icona "mirino", quindi trova la cartella in cui hai decompresso Papervision e fai clic su OK. Fai clic su OK per le altre caselle fino a quando non torni al FLA.
Se non stai utilizzando l'IDE Flash, dovrai impostarlo in un modo diverso. Ad esempio, in FlashDevelop, è necessario fare clic Strumenti> Classpathpaths globali.
In Papervision, tutti i tuoi oggetti 3D devono essere posizionati all'interno di a scena. È un po 'come lo Stage in ActionScript normale. Quindi, prima di fare qualsiasi cosa, dobbiamo creare un Scene3D oggetto che conterrà tutto il resto.
Passa al tuo file Main.as. Aggiungiamo rapidamente il codice base necessario per qualsiasi classe di documento:
package import flash.display.MovieClip; public class Main estende MovieClip public function Main ()
L'oggetto Scene3D è in org.papervision3d.scenes.Scene3D, quindi abbiamo bisogno di importare quello, quindi crea un nuovo pubblico var per mantenere la scena e infine creare l'oggetto scena reale: (righe 4, 8 e 12)
package import flash.display.MovieClip; import org.papervision3d.scenes.Scene3D; public class Main estende MovieClip public var scene: Scene3D; funzione pubblica Main () scene = new Scene3D ();
Per cominciare, creiamo un grande cubo semplice seduto nella nostra scena.
Seguiremo lo stesso tipo di passaggi di cui sopra per crearlo, quindi aggiungiamolo alla nostra scena: (righe 5, 10, 15, 16)
package import flash.display.MovieClip; import org.papervision3d.scenes.Scene3D; import org.papervision3d.objects.primitives.Cube; public class Main estende MovieClip public var scene: Scene3D; public var cube: Cube; funzione pubblica Main () scene = new Scene3D (); cube = new Cube (); scene.addChild (cube);
Nota che utilizziamo "addChild ()" per aggiungere il cubo alla scena, proprio come facciamo quando aggiungiamo un MovieClip allo stage.
Il codice sopra ti darà un errore se proverai ad eseguirlo. Questo perché non abbiamo detto al cubo come dovrebbero essere le sue superfici facciali.
Usi Papervision materiale per descrivere come appare una superficie. Possiamo creare un materiale molto semplice a tinta unita usando a ColorMaterial:
var grayMaterial: ColorMaterial = new ColorMaterial (0xCCCCCC);
Il "0xCCCCCC" rappresenta il colore grigio; basta prendere il codice colore di qualsiasi colore e sostituire il # con 0x:
Dato che un cubo ha sei facce, dobbiamo dargli sei materiali. Per fare questo mettiamo tutti e sei in una lista:
var materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (grayMaterial, "front"); materialsList.addMaterial (grayMaterial, "back"); materialsList.addMaterial (grayMaterial, "left"); materialsList.addMaterial (grayMaterial, "right"); materialsList.addMaterial (grayMaterial, "top"); materialsList.addMaterial (grayMaterial, "bottom");
... e poi passare quella lista al cubo quando la creiamo:
cube = new Cube (materialsList);
Quindi, il tuo intero codice dovrebbe apparire come questo: (non dimenticare il importare dichiarazioni!)
package import flash.display.MovieClip; import org.papervision3d.scenes.Scene3D; import org.papervision3d.objects.primitives.Cube; import org.papervision3d.materials.ColorMaterial; import org.papervision3d.materials.utils.MaterialsList; public class Main estende MovieClip public var scene: Scene3D; public var cube: Cube; funzione pubblica Main () var grayMaterial: ColorMaterial = new ColorMaterial (0xCCCCCC); var materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (grayMaterial, "front"); materialsList.addMaterial (grayMaterial, "back"); materialsList.addMaterial (grayMaterial, "left"); materialsList.addMaterial (grayMaterial, "right"); materialsList.addMaterial (grayMaterial, "top"); materialsList.addMaterial (grayMaterial, "bottom"); scene = new Scene3D (); cube = new Cube (materialsList); scene.addChild (cube);
Quindi non abbiamo errori, ma per vedere qualcosa, dobbiamo aggiungere un telecamera alla scena. Vedremo tutto attraverso la "lente" della fotocamera.
Aggiungere una telecamera è semplice come aggiungere un cubo: più semplice, infatti, dato che non è necessario aggiungereChild () alla scena:
import org.papervision3d.cameras.Camera3D;
camera var pubblica: Camera3D;
scene = new Scene3D (); cube = new Cube (materialsList); scene.addChild (cube); camera = new Camera3D (); // questa è la nuova riga in Main ()
Ora una telecamera è sulla scena, ma non è collegata a nessun output, quindi non possiamo ancora vedere il cubo!
Per impostazione predefinita, il cubo viene posizionato esattamente al centro della scena (in x = 0, y = 0, z = 0) e la telecamera viene posizionata a 1000 unità indietro (in x = 0, y = 0, z = -1000).
Come possiamo ottenere l'immagine che la videocamera vede nella finestra di Flash Player?
La risposta è, noi usiamo a viewport. Questo è un tipo di DisplayObject, come un MovieClip, quindi possiamo aggiungereChild () allo stage. Ma possiamo anche fare Papervision rendere (ad esempio, disegna) la vista della videocamera su questo viewport - è un po 'come avere un artista che disegna ciò che può vedere attraverso un obiettivo fotografico, quindi prendere il suo disegno e incollarlo a un televisore. Tranne più veloce.
Quindi dobbiamo creare un viewport e un renderer:
import org.papervision3d.view.Viewport3D; import org.papervision3d.render.BasicRenderEngine;
viewport var pubblica: Viewport3D; renderer var pubblico: BasicRenderEngine;
// metti questo alla fine di Main () viewport = new Viewport3D (); viewport.autoScaleToStage = true; // questo renderà il viewport grande quanto lo stage addChild (viewport); renderer = new BasicRenderEngine ();
Ora tutto ciò che dobbiamo fare è fare in modo che il renderer esegua il rendering effettivo. Per questo, ha bisogno di conoscere la scena, la fotocamera e il viewport:
renderer.renderScene (scene, camera, viewport);
Alla fine! Possiamo finalmente testare il SWF. Rullo di tamburi prego…
Incredibile! Astounding! OK bene, in realtà è piuttosto zoppo. Come possiamo anche dire che è un cubo? Sembra un quadrato.
Se ruotiamo il cubo, saremo in grado di dire se è effettivamente un cubo o meno.
Poiché il cubo è in tre dimensioni, la parola "ruotare" è un po 'confusa - quale direzione intendiamo? Dobbiamo specificare se ruotiamo intorno all'asse x, all'asse yo all'asse z.
Il Cubo l'oggetto ha tre proprietà che possiamo usare per definire questo, chiamato (non sorprendentemente) rotationX, rotationY e rotationZ. Cambiamo un paio di loro:
scene = new Scene3D (); cube = new Cube (materialsList); cube.rotationX = 25; // change rotation cube.rotationY = 40; // cambia rotazione scene.addChild (cubo); camera = new Camera3D ();
È meglio, ma dal momento che tutte le facce sono esattamente dello stesso colore, si fondono l'una nell'altra. Risolviamolo.
Invece di grigio, dipingo i lati con il logo ActiveTuts +.
Se stai utilizzando l'IDE Flash, crea un nuovo clip filmato e disegna o incolla l'immagine che desideri utilizzare. Ho incluso il logo nella libreria del FLA all'interno dello zip.
Fare clic con il tasto destro sul filmato e selezionare Proprietà. Seleziona "esporta per ActionScript" e assegnagli un nome di classe. Questo ti permetterà di accedervi usando il codice. Se non stai usando l'IDE Flash, lo zip contiene anche un SWC con un MovieClip chiamato ActiveTutsLogo che puoi usare oppure puoi creare un nuovo MovieClip nel codice e aggiungere l'immagine ad esso. entra nei dettagli di questo qui, però.)
Invece di a ColorMaterial useremo a MovieMaterial, e invece di specificare un colore, specificheremo un filmato. Quindi sostituisci questo:
var grayMaterial: ColorMaterial = new ColorMaterial (0xCCCCCC); var materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (grayMaterial, "front"); materialsList.addMaterial (grayMaterial, "back"); materialsList.addMaterial (grayMaterial, "left"); materialsList.addMaterial (grayMaterial, "right"); materialsList.addMaterial (grayMaterial, "top"); materialsList.addMaterial (grayMaterial, "bottom");
… con questo:
var logoMaterial: MovieMaterial = new MovieMaterial (new ActiveTutsLogo ()); // sostituisce "ActiveTutsLogo" sopra con il nome della classe del tuo filmato var materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (logoMaterial, "front"); materialsList.addMaterial (logoMaterial, "back"); materialsList.addMaterial (logoMaterial, "left"); materialsList.addMaterial (logoMaterial, "right"); materialsList.addMaterial (logoMaterial, "top"); materialsList.addMaterial (logoMaterial, "bottom");
Dovrai anche importare il MovieMaterial:
import org.papervision3d.materials.MovieMaterial;
Provalo di nuovo:
Bene, funziona, ma sembra un po 'ammaccato.
L'aspetto "ammaccato" è perché Papervision è impostato di default per disegnare le cose velocemente piuttosto che con precisione. Voglio assicurarmi che questo tutorial sia eseguito su computer più lenti, quindi lo lascerò, ma ecco come puoi migliorarlo:
Quando crei il cubo, puoi passarlo per definirne il numero segmenti ogni faccia è divisa in Più segmenti scegli, più accurato appare il cubo, ma più lentamente viene visualizzato.
Ho trovato che 10 è un buon numero di segmenti da utilizzare in ciascuna direzione. Ecco come il codice per questo aspetto:
cube = new Cube (materialsList, 500, 500, 500, 10, 10, 10);
Il quinto, il sesto e il settimo parametro definiscono il numero di segmenti utilizzati in ciascuna direzione. Per impostarli, però, dobbiamo specificare tutti i parametri prima anche il quinto.
Stiamo già specificando il primo parametro: questa è la lista dei materiali. Il secondo, il terzo e il quarto parametro definiscono la larghezza, la profondità e l'altezza del cubo. Questi sono impostati su 500 per impostazione predefinita, quindi li ho mantenuti gli stessi qui.
Se usi la riga di codice sopra, il tuo cubo sarà simile a questo:
Molto più ordinato!
Possiamo far girare un normale MovieClip aumentandolo rotazione proprietà ogni frame - e, naturalmente, possiamo fare lo stesso con il cubo e i suoi valori di rotazione X / Y / Z.
Crea un listener di eventi ENTER_FRAME, che eseguirà ogni frame:
import flash.events.Event;
// nella parte inferiore di Main () addEventListener (Event.ENTER_FRAME, onEnterFrame);
// come nuova funzione // all'interno della classe Main ma all'esterno della funzione Main () public function onEnterFrame (evt: Event): void cube.rotationX = cube.rotationX + 5; cube.rotationY = cube.rotationY + 5;
Questo farà girare il cubo un po 'di più su ogni fotogramma. Quindi se testate il SWF adesso ... il cubo rimarrà completamente immobile. huh?
Ripensa al pittore. Stiamo ancora guardando la sua vecchia immagine: abbiamo bisogno che lui ci disegni un nuovo fotogramma ogni fotogramma, altrimenti non vedremo cambiamenti!
Quindi, modifica la funzione onEnterFrame ():
public function onEnterFrame (evt: Event): void cube.rotationX = cube.rotationX + 5; cube.rotationY = cube.rotationY + 5; renderer.renderScene (scene, camera, viewport);
Controlla adesso:
Un cubo è grandioso, ma come Roman ti ha già mostrato come farlo con Away3D, andiamo un po 'oltre.
Aggiungiamone altri, per formare una linea orizzontale di cubi. Possiamo usare un semplice per loop per farlo; basta sostituire questo codice:
cube = new Cube (materialsList); cube.rotationX = 25; // change rotation cube.rotationY = 40; // cambia rotazione scene.addChild (cubo);
… con questo:
per (var i: int = -1; i <= 1; i++ ) cube = new Cube( materialsList ); cube.x = i * 350; cube.rotationX = 25; cube.rotationY = 40; scene.addChild( cube );
Nota che sto facendo in modo che la posizione x di ogni cubo dipenda da quanto siamo lontani dal ciclo. Se lo esegui, otterrai quanto segue:
Ops, i cubi sono troppo vicini. Possiamo ridurli per aggirare questo; basta cambiare il scala proprietà di ciascun cubo:
per (var i: int = -1; i <= 1; i++ ) cube = new Cube( materialsList ); cube.x = i * 350; cube.scale = 0.40; //make the cubes 40% of original size cube.rotationX = 25; cube.rotationY = 40; scene.addChild( cube );
In questo modo si risolve il problema dell'intersezione, ma solo uno dei nostri cubi sta girando. Come mai?
È perché il cubo variabile si riferisce sempre solo al scorso cubo creato - e la nostra funzione onEnterFrame () modifica solo le rotazioni di quel cubo.
Quindi, per risolvere questo problema, avremo bisogno di una matrice. Proprio come il nostro elenco di materiali memorizza diversi materiali, la nostra matrice memorizzerà diversi cubi.
public var cubeArray: Array;
cubeArray = new Array (); // crea la nuova matrice per (var i: int = -1; i <= 1; i++ ) cube = new Cube( materialsList ); cube.x = i * 350; cube.scale = 0.40; cube.rotationX = 25; cube.rotationY = 40; scene.addChild( cube ); cubeArray.push( cube ); //add the new cube to the array
("Push" significa semplicemente "aggiungi alla fine dell'elenco".)
Ora che ogni cubo si trova nell'array, possiamo fare un ciclo attraverso la matrice per ogni fotogramma e ruotarne ognuno di essi:
public function onEnterFrame (evt: Event): void per each (cube in cubeArray) cube.rotationX = cube.rotationX + 5; cube.rotationY = cube.rotationY + 5; renderer.renderScene (scene, camera, viewport);
Il ciclo "per ogni" rende il cubo le variabili si riferiscono a ciascun cubo a turno, uno alla volta, anziché solo all'ultimo cubo creato come prima. Ecco il risultato:
Successo!
Abbiamo creato una linea di cubi, quindi un quadrato non sarà difficile. Invece di fare solo tre cubetti, ne faremo tre Linee di tre cubi.
Per fare ciò, possiamo usare un loop-within-a-loop, in questo modo:
per (var i: int = -1; i <= 1; i++ ) for ( var j:int = -1; j <= 1; j++ ) //loop inside a loop cube = new Cube( materialsList ); cube.x = i * 350; cube.y = j * 350; //don't forget to change j! cube.scale = 0.40; cube.rotationX = 25; cube.rotationY = 40; scene.addChild( cube ); cubeArray.push( cube ); //don't forget this closing bracket either
Provalo
Bello. E si noti che non è stato necessario modificare il codice all'interno di onEnterFrame (); il ciclo che esegue ogni frame ruota solo ogni cubo all'interno della matrice, e stiamo ancora spingendo ogni singolo cubo sulla matrice.
Beh, sarebbe deludente fermarsi in una piazza, no? Dopotutto, questo è un tutorial 3D.
Mi aspetto che tu possa capire come fare questo passo da solo. Ma nel caso tu voglia confrontare:
per (var i: int = -1; i <= 1; i++ ) for ( var j:int = -1; j <= 1; j++ ) for ( var k:int = 0; k <= 2; k++ ) cube = new Cube( materialsList ); cube.x = i * 350; cube.y = j * 350; cube.z = k * 350; cube.scale = 0.40; cube.rotationX = 25; cube.rotationY = 40; scene.addChild( cube ); cubeArray.push( cube );
Sono stato un po 'subdolo qui. Ho iniziato k a 0 anziché a -1, perché altrimenti lo strato di cubi più in alto sarebbe troppo vicino alla fotocamera. Certo, puoi usare qualsiasi numero che ti piace.
Ehi, hai notato che l'effetto "ammaccato" è praticamente svanito ora che stiamo usando cubetti più piccoli?
Eccezionale!
Questo è solo un graffio sulla superficie di ciò che puoi fare con Papervision3D. Prima di passare agli occhiali 3D, ecco alcune cose che potresti sperimentare:
Nella seconda parte, imparerai come far funzionare la scena con gli occhiali 3D. Quindi se ne hai una coppia, non buttarle via!
Nel frattempo, grazie per aver letto la prima parte. Spero che tu l'abbia trovato utile. Se hai qualche domanda o se qualcosa non ti è chiaro, per favore pubblica un commento qui sotto.
Accentsconagua