Journey til neste dimensjon med Papervision3D: Del 1
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I tråd med vår Papervision3D Essentials giveaway, dagens tutorial har også en PV3D tema.
Denne todelte veiledningen vil vise deg hvordan du kommer i gang med Papervision3D motor, deretter hvordan du gjør din skapelse hoppe ut av skjermen ved hjelp av en anaglyph effekt i kombinasjon med 3D-briller.
Innledning
Fikk et par 3D-briller liggende rundt? Her i Storbritannia, er Channel 4 kjører en spesiell 3D uke - sju dager av TV-programmer som sendes i 3D - så masse folk her gjør. La oss ta dem i bruk.
Denne todelte veiledningen vil vise deg hvordan du kommer i gang med Papervision3D motor, og deretter hvordan du gjør din skapelse hoppe ut av skjermen.
I denne første delen vil du lære det grunnleggende PV3D, og endte opp med noe som dette:
... og i den andre delen, vil du lære om anaglyph effekt for 3D-briller, og bruke den til hva du har gjort som så:
Trinn 1: Oppsett
Hvis du bruker Flash, opprette en ny Actionscript 3.0 Flash-fil. Angi størrelsen på scenen for å bli hva du vil -. Jeg vil holde med standard 550 av 400 piksler
Mens du er i gang, lage en ny Actionscript-fil, og lagre den som Main.as (Hvis du ikke bruker Flash IDE, bare lage en ny AS3 prosjekt.) Leder over til Papervision Last ned Side. Det er mange forskjellige versjoner og noen forskjellige typer filer (zip, SWC, MXP). Bare ta den nyeste .zip filen (det bør si Utvalgt Extract zip-filen du nettopp lastet ned til hvor som helst på harddisken. Jeg liker å holde alle de forskjellige motorer jeg bruker i samme mappe, men det er opp til deg Flash behov for å vite hvor du pakket Papervision før det kan bruk det. Vi bruker en classpathen I boksen som vises, klikker du den lille "trådkors" -ikonet, og deretter finner mappen hvor du pakket Papervision og klikk på OK. Klikk OK til de andre boksene til du kommer tilbake til FLA. Hvis du ikke bruker Flash IDE, må du sette dette på en annen måte. For eksempel, i FlashDevelop, bør du klikke Verktøy > Global Classpaths I Papervision, må alle 3D-objekter plasseres inne i en scene Bytt til Main.as fil. La oss raskt legge basen koden som trengs for ethvert dokument Klasse: Scene3D objektet er i org.papervision3d.scenes.Scene3D Til å begynne med, la oss bare lage en stor vanlig kube sitter i vår scene Vi vil følge den samme slags trinn som. ovenfor for å lage den, og deretter legge den til vår scene: (linje 5, 10, 15, 16) Merk at vi bruker "addChild ()" for å legge kuben til scenen, akkurat som vi gjør når du legger til en MovieClip til Stage Koden over vil gi deg en feilmelding hvis du prøver å kjøre den. Det er fordi vi ikke har fortalt kuben hva dets overflater bør se ut. Papervision bruksområder materialer "0xCCCCCC" representerer fargen grå; bare ta fargekoden av alle farger og erstatte # Fordi en kube har seks ansikter, må vi gi den seks materialer. For å gjøre dette setter vi alle seks i en liste: ... og deretter vedta at listen til kuben når vi lager det: Så, bør hele koden ende opp som ser slik ut: (ikke glem de import Så har vi noen feil, men for å se noe, må vi legge til en kamera Legge til et kamera er like enkelt som å legge en kube - enklere, faktisk, som vi ikke trenger å addChild () det til scenen.: Nå et kamera er på scenen, men det er ikke koblet til noe svar, så vi kan fortsatt ikke se kuben Som standard er kuben plasseres rett smellkyss i midten av scenen (ved x = 0, y = 0, z = 0), og kameraet er plassert 1000 enheter tilbake fra det (ved x = 0, y = 0, z = -1000). Hvordan kan vi få det bildet som kameraet ser inn i Flash Player-vinduet? Svaret er at vi bruke en view Så vi trenger for å lage en view og en renderer: Nå er alt vi trenger å gjøre er å gjøre det renderer gjøre faktiske rendering. For dette, må den vite scenen, kameraet, og synsfeltet: Endelig! Vi kan endelig teste ut SWF. Trommevirvel, please ... Utrolig! Forbløffende! OK fint, det er faktisk ganske halt. Hvordan kan vi også fortelle det er en kube? Det ser ut som en firkant Hvis vi rotere kuben, vil vi være i stand til å fortelle om det er faktisk en kube eller ikke Siden kuben er i tre dimensjoner, ordet "roter" er litt forvirrende - hvilken retning mener vi? Vi trenger å spesifisere om vi roterer rundt x-aksen, y-aksen, eller z-aksen. Cube Det er bedre, men siden alle ansikter er nøyaktig samme farge, de bare flette inn i hverandre. La oss fikse det I stedet for grå, jeg kommer til å male sidene med ActiveTuts + logo Hvis du bruker. Flash IDE, opprette et nytt filmklipp og tegne eller lime inn bildet du ønsker å bruke. Jeg har tatt med logoen i min FLA biblioteket inne i zip. Høyreklikk på filmklipp og velg Egenskaper. Sjekk "eksport for Action" og gi den en klasse navn. Dette vil gi deg tilgang til den ved hjelp av kode. (Hvis du ikke bruker Flash IDE, inneholder zip også en SWC med en MovieClip kalt ActiveTutsLogo som du kan bruke. Eller du kan opprette en ny MovieClip i kode og legge bildet til det. Jeg har ikke tenkt å gå inn i detaljer om det her, men.) I stedet for en ColorMaterial ... med dette: Du må også importere MovieMaterial: Test det igjen: Vel, det fungerer, men det ser litt bulkete "bulkete" utseende er fordi Papervision er satt som standard for å trekke ting raskt i stedet for nøyaktig . Jeg vil være sikker på denne opplæringen vil kjøre på tregere datamaskiner, så jeg kommer til å la det bli med det, men her er hvordan du kan forbedre det: Når du oppretter kuben, kan du gi det parametere til definere hvor mange segmenter Jeg har funnet ut at 10 er et godt antall segmenter som skal brukes i hver retning.. Slik kode for som ser: Den femte, sjette og syvende parametere definerer antall segmenter som brukes i hver retning. For å sette dem, men vi må spesifisere alle parametrene før Vi er allerede spesifisere første parameter -. Det er materialliste. Den andre, tredje og fjerde parametere definerer bredde, dybde og høyde av kuben. Disse er satt til 500 som standard, så jeg har holdt dem det samme her Hvis du bruker ovenfor linje med kode, vil kuben se slik ut:.! Mye penere Vi kan gjøre en vanlig MovieClip snurre rundt ved å øke sin rotasjon Opprett en ENTER_FRAME hendelse lytteren, som vil kjøre hver ramme. Dette vil gjøre kuben slå litt mer hver ramme. Så hvis du teste SWF ut nå ... kuben vil holde seg helt i ro. Huh Tenk tilbake til maleren. Vi er fortsatt ute på sin gamle bildet - vi trenger ham til å trekke oss en ny hver ramme, eller vi vil ikke se noen endringer Så, modifisere onEnterFrame () -funksjonen: Sjekk det ut nå: En kube er flott, men som Roman allerede viste deg hvordan du gjøre det med Away3D, la oss ta ting litt videre. La oss legge til noen flere, for å danne en horisontal linje av kuber. Vi kan bruke en enkel for ... med dette: Merk at jeg gjør x-posisjonen til hver kube avhenge av hvor langt vi er gjennom løkken. Hvis du kjører denne, vil du få følgende: Whoops, kuber er for nær hverandre. Vi kan krympe dem å komme rundt dette; bare endre skalere Så det løser krysset problem, men bare en av våre kuber er spinning. Hvordan kommer Det er fordi kube Så for å fikse dette, trenger vi en Array. Akkurat som vår liste materialer lagret flere materialer, vil vår Array lagre flere kuber ("Push" betyr bare "legge til slutten av listen".) Nå som hver kube er i Array, vi kan sløyfe gjennom Array hver ramme og rotere hver av dem: "for hver" løkke gjør kube Suksess Vi har laget en linje av kuber, så en firkant ikke kommer til å være vanskelig. I stedet for bare å lage tre kuber, vil vi lage tre linjer For å gjøre dette, kan vi bruke en løkke-i-løkke, slik:. Test det ut: Nice. Og merk at vi ikke trengte å endre koden inne onEnterFrame () i det hele tatt; loop som går hver ramme bare roterer hver kube inne i Array - og vi er fortsatt presser hver eneste kube på Array Vel, det 'd være skuffende å stoppe på en firkant, ville det ikke? Tross alt, dette er en 3D tutorial. Jeg forventer at du kan finne ut hvordan du gjør dette trinnet på egen hånd. Men i tilfelle du ønsker å sammenligne: Jeg har vært litt sleipe her. Jeg har begynt å k på 0 i stedet for på -1, fordi ellers frontrste laget av kuber ville være for nært kameraet. Selvfølgelig kan du bruke hvilken som helst tall du vil. Hei, la du merke til at den "bulkete" effekten har i utgangspunktet forsvunnet nå som vi bruker mindre kuber? Awesome Dette er bare toppen av isfjellet av hva du kan gjøre med Papervision3D. Før vi går videre til 3D-briller, her er et par ting du kan eksperimentere med: I den andre delen, vil du lære hvordan du gjør din scene arbeid med 3D-briller. Så hvis du har et par, ikke kaste dem bort! I mellomtiden, takk for at du leser den første delen. Jeg håper du fant det nyttig. Hvis du har spørsmål, eller om noe var forvirrende, kan du legge inn en kommentar nedenfor. Anmeldelser
i samme mappe som FLA. Vi kommer til å bruke dette som filen som FLA er dokument klasse
, så klikker du på en blank plass i FLA-filen, og skriv inn Hoved
i "Dokument klassen" boksen av eiendommene . panelet
Trinn 2: Last ned Papervision3D
ved siden av). Den jeg bruker heter Papervision3D 2.1.920.zip (for bruk med "Papervision3D Essentials" bok)
Trinn 3:. Pakk ut zip
Trinn 4:. Sett en CLASSPATH
for dette: Klikk på Rediger > Preferanser
, velger du Action
klikk på Actionscript 3.0 Innstillinger ...
.
Trinn 5:. Still Scene i Papervision
. Det er typen som scenen i vanlig Actionscript. Så, før vi gjør noe vi trenger for å lage en Scene3D
objekt som skal inneholde alt annet.
pakke {import flash.display.MovieClip; public class Hoved strekker MovieClip {offentlig funksjon main () {}}}
, så vi trenger å import
det, deretter opprette en ny offentlig Var
å holde scenen, og til slutt lage selve scenen objekt: (linje 4, 8 og 12)
pakke {import flash.display.MovieClip; import org.papervision3d.scenes.Scene3D; public class Hoved strekker MovieClip {public Var scene: Scene3D; offentlig funksjon main () {scene = new Scene3D (); }}}
Trinn 6: Legg en Cube
pakke {import flash.display.MovieClip; import org.papervision3d.scenes.Scene3D; import org.papervision3d.objects.primitives.Cube; public class Hoved strekker MovieClip {public Var scene: Scene3D; offentlig Var kube: Cube; offentlig funksjon main () {scene = new Scene3D (); cube = new Cube (); scene.addChild (kube); }}}
Trinn 7:. Color Cube
å beskrive hvordan en overflate ser ut. Vi kan gjøre en veldig enkel, single-farget materiale ved hjelp av en ColorMaterial Bilde:
Var grayMaterial: ColorMaterial = new ColorMaterial (0xCCCCCC);
med 0x Bilde:
Var materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (grayMaterial, "front"); materialsList.addMaterial (grayMaterial, "tilbake"); materialsList.addMaterial ( grayMaterial, "venstre"); materialsList.addMaterial (grayMaterial, "rett"); materialsList.addMaterial (grayMaterial, "topp"); materialsList.addMaterial (grayMaterial, "bottom");
kube = new Cube (materialsList);
uttalelser! )
pakke {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 Hoved strekker MovieClip {public Var scene: Scene3D; offentlig Var kube: Cube; offentlig funksjon main () {var grayMaterial: ColorMaterial = new ColorMaterial (0xCCCCCC); Var materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (grayMaterial, "front"); materialsList.addMaterial (grayMaterial, "tilbake"); materialsList.addMaterial (grayMaterial, "venstre"); materialsList.addMaterial (grayMaterial, "riktig"); materialsList.addMaterial (grayMaterial, "topp"); materialsList.addMaterial (grayMaterial, "bottom"); scene = new Scene3D (); cube = new Cube (materialsList); scene.addChild (kube); }}}
Trinn 8: Legge til et kamera
til scenen. Vi får se alt gjennom kameraets "lens"
import org.papervision3d.cameras.Camera3D; offentlig Var kamera: Camera3D; scene = new Scene3D (); kube = new Cube (materialsList); scene.addChild (kube), kamera = new Camera3D (); //dette er den nye linjen i Main ()
Trinn 9: Legg en View og en Renderer
. Dette er en type Displayobject, som en MovieClip, slik at vi kan addChild () det til scenen. Men vi kan også gjøre Papervision gjengi plakater (dvs. trekke) kameraets syn på denne view - det er litt som å ha en artist tegne hva han kan se gjennom en kameralinse, så tar hans tegning og stikker den til en TV-apparatet. Unntatt raskere
import org.papervision3d.view.Viewport3D, import org.papervision3d.render.BasicRenderEngine; offentlig Var view. Viewport3D; offentlig Var renderer : BasicRenderEngine; //sette dette på slutten av main () view = new Viewport3D (); viewport.autoScaleToStage = true; //dette vil gjøre synsfeltet like stor som stageaddChild (view); renderer = new BasicRenderEngine ();
Trinn 10: Render Scene
renderer.renderScene (scene, kamera, view);
Trinn 11:.. Roter Cube
objekt har tre egenskaper vi kan bruke til å definere dette, kalles (overraskende) rotationX
, rotationY Hotell og rotationZ
. La oss endre et par av dem:
scene = new Scene3D (); kube = new Cube (materialsList); cube.rotationX = 25; //endre rotationcube.rotationY = 40; //endre rotationscene.addChild (kube), kamera = new Camera3D ();
Trinn 12:. Reskin Cube
vi kommer til å bruke en MovieMaterial
, og i stedet for å angi en farge, vi vil angi et filmklipp. Så erstatte dette:
Var grayMaterial: ColorMaterial = new ColorMaterial (0xCCCCCC); Var materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (grayMaterial, "front"); materialsList.addMaterial (grayMaterial, "tilbake"); materialsList.addMaterial (grayMaterial, "venstre"); materialsList.addMaterial (grayMaterial, "rett"); materialsList.addMaterial (grayMaterial, "topp"); materialsList.addMaterial (grayMaterial, "bottom");
Var logoMaterial: MovieMaterial = new MovieMaterial (ny ActiveTutsLogo ()); //erstatte "ActiveTutsLogo" ovenfor med Class navnet på filmen clipvar materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (logoMaterial, "front"); materialsList.addMaterial (logoMaterial, "tilbake"); materialsList.addMaterial (logoMaterial, "venstre"); materialsList.addMaterial (logoMaterial, "rett"); materialsList.addMaterial (logoMaterial, "topp"); materialsList .addMaterial (logoMaterial, "bottom");
importere org.papervision3d.materials.MovieMaterial;
Step 13 (ekstrautstyr). Fjern de Dents
hvert ansikt er delt opp i til. Jo flere segmenter du velger, ser mer nøyaktig kuben - men jo saktere det blir gjengitt
cube = new Cube (materialsList, 500, 500, 500, 10, 10, 10);
femte samt
Trinn 14: Gjør Cube Spin
eiendom hver ramme - og selvfølgelig, vi kan gjøre det samme med kuben og dens rotationX /Y /Z-verdiene
import flash.events.Event; //nederst i main () addEventListener ( Event.ENTER_FRAME, onEnterFrame); //som en ny funksjon //inne i hovedklassen, men utenfor main () functionpublic funksjon onEnterFrame (evt: Hendelses): void {cube.rotationX = cube.rotationX + 5; cube.rotationY = cube.rotationY + 5;}
Trinn 15: Re-gjengi Scene Hver Frame
publikum! funksjon onEnterFrame (evt: Hendelses): void {cube.rotationX = cube.rotationX + 5; cube.rotationY = cube.rotationY + 5; renderer.renderScene (scene, kamera, view);}
Trinn 16: Legg Flere Cubes
løkke til å gjøre det; bare erstatte denne koden:
cube = new Cube (materialsList); cube.rotationX = 25; //endre rotationcube.rotationY = 40; //endre rotationscene.addChild (kube);
for (var i: int = 1; i < = 1; i ++) {kube = new Cube (materialsList); cube.x = i * 350; cube.rotationX = 25; cube.rotationY = 40; scene.addChild (kube);}
Trinn 17: krympe Cubes
tilhører hver kube:
for (var i: int = 1; i < = 1; i ++) {kube = new Cube (materialsList); cube.x = i * 350; cube.scale = 0,40; //gjør kuber 40% av opprinnelig størrelse cube.rotationX = 25; cube.rotationY = 40; scene.addChild (kube);}
Trinn 18: Tilsett Cubes til en Array
variabel alltid refererer bare til siste Anmeldelser kube skapt - og vår onEnterFrame () -funksjonen bare endrer rotasjoner av at en kube.
offentlig Var cubeArray: Array; cubeArray = new Array ();. //opprette den nye Arrayfor (var i: int = 1; i < = 1; i ++) {kube = new Cube (materialsList); cube.x = i * 350; cube.scale = 0,40; cube.rotationX = 25; cube.rotationY = 40; scene.addChild (kube); cubeArray.push (kube); //legger den nye kuben til array}
Trinn 19: Gjør alle Cubes Spin
offentlig funksjon onEnterFrame (evt: Hendelses): void {for hver (kube i cubeArray) {cube.rotationX = kube .rotationX + 5; cube.rotationY = cube.rotationY + 5; } Renderer.renderScene (scene, kamera, view);}
variabel refererer til hver kube i sving, en om gangen, i stedet for bare til det siste kube opprettet som det gjorde før. Her er resultatet:
Trinn 20: Lag en Square of Cubes
av tre kuber
for (var i: int = 1; i < = 1; i ++) {for (var j: int = 1; j < = 1; j ++) //sløyfe inne i en løkke {kube = new Cube ( materialsList); cube.x = i * 350; cube.y = j * 350; //ikke glem å endre j! cube.scale = 0,40; cube.rotationX = 25; cube.rotationY = 40; scene.addChild (kube); cubeArray.push (kube); } //Ikke glem dette avsluttende brakett enten}
Trinn 21:. Lag en kube av Cubes
for (var i: int = 1; i < = 1; i ++) {for (var j: int = 1; j < = 1; j ++) {for (var k: int = 0; k < = 2; k ++) {kube = 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 (kube); cubeArray.push (kube); }}}
Flere ideer til å prøve
Flytte kubene, i stedet for å rotere dem, du kan bare endre x, y og z-egenskapene til hver kube.
Bytte kuber med kuler: hvis du importerer org.papervision3d.objects.primitives.Sphere
du kan bruke Sphere klassen. Sjekk ut docs på dette her
Kontrollere kamera med musen. Du kan få musens x- og y-posisjon til enhver tid med mouseX Hotell og mousey
egenskaper. Du kan bevege kameraet ved å endre sin x, y og z-egenskaper. Hvorfor ikke koble de to sammen?
å bli videreført ...