Journey til neste dimensjon med Papervision3D: Part 2
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Fortsetter videre fra del 1 hvor vi fikk tak i Papervision3D, del 2 tar vår scene litt lenger. I denne avsluttende delen vil du lære å lage rullerende kuber hoppe ut på betrakteren med 3D-briller.
Innledning
Jeg vet det står der oppe at denne opplæringen er om Papervision3D i Flash, men egentlig er det om å lure hjernen din. Vi kommer til å gjøre hjernen din tror at det å se på en faktisk 3D-objektet, når det faktisk er det bare å se et 2D-bilde.
Hvis du er kjent med Papervision3D, vil du være i stand til å følge dette gjennom å bruke ethvert prosjekt som har en scene, et kamera, og et visningsfelt. Hvis ikke, sjekk ut del 1 av denne opplæringen først, som jeg kommer til å fortsette fra der vi slapp. Her er den type ting vi skal jobbe mot:
Trinn 1: Legg Andre kamera
Pek med fingeren i lufta, og hold den opp foran nesen Se på det med bare høyre øye åpent, så med bare venstre. Se hvordan det ser ut til å hoppe fra venstre til høyre, mens det er i bakgrunnen knapt ser ut til å bevege seg i det hele tatt? Hjernen merker disse forskjellene mellom hva hver av øynene ser og bruker dem til å generere en full 3D-simulering av verden rundt deg. I ditt hode. Kjapt. Ganske imponerende! Hvis vi skal lure hjernen din, må vi gjøre hver av dine øyne se et annet bilde. Så for å starte, la oss legge til en annen "øye" (et annet kamera) til åstedet. Dette vil bli brukt til å lage bildet for høyre øye, mens eksisterende kameraets bilde vil bli matet til venstre øye. Opprett en ny offentlig variabel kalt camera2 ... og initialisere det i main () konstruktør funksjon: Vi trenger en annen view å ta kameraets utgang, så legger du til følgende: (jeg er rushing gjennom dette, siden vi dekket det hele forrige gang.) Husk, viewport2 ... og legger til en ny linje for å gjengi det andre kameraet til andre synsfeltet, slik: Gjør det samme i ditt onEnterFrame () -funksjonen også: Hvis du tester ut dette nå, vel, det vil se det samme som det gjorde før : Men det er ingen overraskelse: for én ting, de to kameraene er på nøyaktig samme sted Som standard kameraer er plassert på (x = 0, y = 0, z = -1000) - kan du sjekke ved å gjøre trace (camera.x, camera.y, camera.z) Så sett. ovenfra, ser scenen ut: Sett fra siden, er det slik: Slik skal etterligne våre egne øyne, bør vi setter vår andre kameraet litt til høyre for vår første: La oss prøve å flytte den 50 piksler til høyre, og se hva som skjer. Sette dette i Main (), et sted etter å lage det andre kameraet: Nå teste det ut, og se hva du får: Det ser rart , men det er helt klart å jobbe! Området rundt kubene er gjennomsiktig i hvert synsfeltet, så det første kan sees bak andre Det vil være nyttig å kunne se! på hva hvert kamera er å se individuelt, så la oss ta øyet analogien videre ved å gjøre dem "kyss" når vi klikker. Først legger en hendelse lytteren til hver synsfeltet, for å oppdage museklikk: Sett at på slutten av Main () -funksjonen. Ikke glem å importere MouseEvent: Legg disse nye funksjonene til koden, utenfor hoved () -funksjonen men inne i hovedklassen: Når vi Klikk på den første synsfeltet, trenger vi det til å bli usynlig, mens den andre blir synlig (og vice-versa for når vi klikker på andre). Så endre hendelsesbehandlinger som så: Prøv det ut: Merk at du må klikke på en av kubene; de gjennomsiktige områder ikke fyre av et klikk MouseEvent Du kommer til å trenge et par 3D "anaglyph" briller; den type der hver linse er en annen farge. Paret jeg bruker har en gul linse i venstre øye og en blå linse i høyre øye (kalt ColorCode3D system), men andre fargekombinasjoner er også populært, som rødt og cyan. Du kan finne disse brillene på eBay for et par dollar: bare søk etter 3d briller Alternativt kan du også lage din egen! André postet en kommentar på den første delen av denne opplæringen forklarer at han bruker Tic-Tac esker med forskjellige farger for å gjøre sitt. Geni! Selv om mine eksempler vil bli gjort for gule og blå briller, vil jeg prøve å forklare prinsippene, slik at du kan lage din arbeide med hva farger du har. Det er litt vanskelig, så kan du legge inn en kommentar nedenfor hvis dette blir forvirrende Hver piksel på datamaskinen din er som en gruppe på tre lyspærer: én . rød, en grønn og en blå Ved å justere lysstyrken på hver "bulb" vi kan endre fargen på at pixel: Glassene i 3D-brillene stoppe lys fra noen av disse knoller fra å komme gjennom. For eksempel, den blå linsen i mine briller blokkerer rødt og grønt lys fra å nå mitt øye Så hvis jeg ser på dette bildet gjennom min blå linse, vil jeg ikke være i stand til å lese den. Ingen lys når mitt øye fra det svarte området fordi alle tre pærer er slått av. Og ingen lys når mitt øye fra det grønne området, fordi bare den grønne pæren er slått på, og den blå linsen filtrerer det ut. Så alt jeg ser er en svart firkant. Nå, OK, hvis du prøver dette selv kan du oppleve at dette er ikke helt sant. Objektivet er nok ikke 100% ren blå, så det skal la litt grønt og rødt lys gjennom. Eller kanskje din skjermens farger er kalibrert forskjellig på mine, så den grønne teksten har en liten mengde av rødt og blått i den. For å være ærlig, det samme er sant for meg -., Men det spiller ingen rolle, så lenge teksten er vanskelig Vårt mål er å gjøre det vanskelig for høyre øye for å se bildet fra venstre kamera, og på samme måte for venstre øye og riktig kamera Den blå linsen er over min høyre øye, så i teorien hvis jeg fjerner alle de blå fra venstre kameraets bilde, jeg vil ikke være i stand til å se det med mitt høyre øye. I dette trinnet, da, la oss gjøre det venstre synsfeltet bilde bare avgir rødt og grønt lys; ingen blått lys i det hele tatt. Vi kan gjøre dette ved hjelp av en ColorTransform Deretter oppretter du en ny offentlig variabel for å holde en forekomst av klassen: Nå faktisk lage dette ny forekomst inne main (): Til slutt, forteller Flash for å bruke denne ColorTransform til venstre kameraets view: (Det siste linjen må være etter at du har opprettet synsfeltet og fargen forvandle Det er nok enklest bare for å sette det helt på slutten av main ()) SWF vil ikke se noe annerledes ennå, fordi ColorTransform ikke endre bildet i det hele tatt som standard. Vi kan velge hva brøkdel av hver pære lys vi ønsker å slippe gjennom ved endre blueMultiplier Innstilling noen av disse til en Så å drenere alt av det blå ut av det venstre synsfeltet, kan vi gjøre dette: Du må sette som før linjen som gjelder transformeringen til synsfeltet, som dette: Hvis brillene har en rød eller grønn linse over høyre øye, så bør du sette redMultiplier Test SWF: Det er vanskelig å få ut " en "av logoen gjennom den blå linsen, men det er ikke vanskelig i det hele tatt å få ut formen på kubene mot at hvit bakgrunn Hvis du endre bakgrunnen på SWF, vil du se problemet. Fordi den "hvite" området rundt kubene er faktisk ikke hvit, men heller gjennomsiktig og la den hvite bakgrunnen til SWF showet gjennom, det er ikke berørt av ColorTransform. For å fikse dette, må vi gi view en solid hvit bakgrunn at kubene vil bli gjengitt på toppen av. Det er enkelt nok; bare gå tilbake til der du opprettet synsfeltet: ... og legge til et par linjer å trekke en hvit firkant som er like stor som den scenen: Test det ut igjen: Bildet bør være veldig svak, kjedelig og vanskelig å se gjennom høyre linse, men så enkelt som det vanlige bildet for å se gjennom den venstre linsen Vi må gjøre det samme for det høyre synsfeltet nå. Så, lage din nye ColorTransform: Nå gjelder denne nye transformere til høyre synsfeltet: Siden min venstre linse er gul, jeg trenger å tømme all den gule ut av denne view (Hvis din venstre objektivet er rød, så dette trinnet er enkelt - bare sette redMultiplier Men hvordan får vi gult ut av rød, grønn og blå Hvis vi bruker maling, vi kunne ikke; gul er en primærfarge i dette tilfellet. Men når du arbeider med lys, ting er annerledes. Ta en titt på denne: Bilde fra Wikimedia Commons. Takk, Mike Horvath og jacobolus! Som du kan se, rød og grønn mix sammen for å lage gult (noe som forklarer hvorfor bakgrunnen til venstre synsfeltet ble gul når vi fjernet alle de blå). Så for å fjerne alle de gule fra vårt bilde, trenger vi å fjerne alle de røde og alt det grønne Vi kan gjøre dette slik:! Oh, høyre, må vi fylle i bakgrunnen av denne view også Gjør dette på samme måte som før: Test det ut: Den gule linsen på brillene mine faktisk lar en god del blått lys gjennom, men det er fortsatt mye mørkere når sett gjennom at objektivet enn når sett gjennom den blå linse, og det er det som teller Så vi har fått våre to bilder satt opp og farge forvandlet. Problemet er, i øyeblikket kan vi bare se en av dem om gangen. Den mest opplagte måten å la oss se begge på en gang er å redusere alfa (gjennomsiktig) av synsfeltet på forsiden, slik: Test ut dette: Ah. OK, ikke en rousing suksess. Alpha klart ikke det riktige verktøyet for jobben; hva annet har vi fått Flash gir oss valg av flere forskjellige blandingsmodi legge Så hvis en bestemt bildeelement i det første bildet har den grønne pære slått på og de to andre helt av, og det samme piksel i det andre bildet har den blå pære fullt på og de to andre helt av, så når blandet sammen de grønne og blå pærer vil være fullt på, og den røde pæren vil være fullt ut. Hvis første og andre bilder både har den røde pæren halvveis på og de to andre helt av, deretter blandet bilde vil ha den røde ballongen helt på, mens de to andre bo utenfor. Få bildet? Flott, la oss bruke den. Slett linjen vi bare skrev at justert alpha, og erstatte det med dette: (Vi trenger ikke å bruke Blend Mode til begge feltene, bare en på toppen av listen display) Test det ut.! Det er mer som det Hvis du ser på det gjennom ett øye av gangen, bør du legge merke til at hvert øye ser en annen view mer promintently. Du vil sannsynligvis også kunne se en svak skygge av den andre synsfeltet, men det er ikke et problem; Hjernen din kan ignorere det. Men bildet er ikke helt ser 3D ennå. La oss sortere det ut Selv om øynene dine ser forskjellige bilder, er ikke dette nok til å lure hjernen din. Hjernen din er ganske smart, ser du; noen vil også si at det er den smarteste organ i kroppen din. Den vet at den skal bruke andre ledetråder for å finne ut hvorvidt en gjenstand er 3D. Perspektiv, for eksempel:. Hvor lite et objekt bør se basert på hvor langt unna det er Hovedproblemet her er at våre to kameraer er plassert mye lenger fra hverandre enn våre egne øyne er. Det er ikke overraskende, siden jeg plukket nummer 50 på måfå. Den faktiske avstanden vi bør bruke kommer til å avhenge av en rekke ting, som hvor langt unna du er fra skjermen og hvor stor skjermen din er, så jeg kan ikke bare gi deg et magisk tall å bruke. Vi må finne ut av det manuelt. Vi kan gjøre dette ved å prøve mange forskjellige tall en etter en, men dette er kjedelig, og vil ta en evighet. Jeg har en bedre idé Legg til denne linjen i onEnterFrame () -funksjonen. Nå endrer onClickViewport og onClickViewport2 funksjoner til følgende: Kjør SWF, og beveger musen til venstre og høyre. Det vil se slik ut: Sett brillene på, slå av lysene, og bevege musen til du finner "sweet spot" hvor bildet ser ut til å bli solid. Klikk med musen på dette punktet, og det vil spore opp et nummer. Noterer det Når du har funnet den optimale separasjon, slette linjen vi nettopp har lagt til onEnterFrame () -funksjonen: Nå finner du den linjen i Main () der du justere avstanden mellom kameraene: . ..og erstatte 50 med uansett hvor mange du noterte ned. Jeg fant ut at 18 var en god del å bruke for mitt oppsett Til slutt teste SWF:.! Ta-da Vel gjort - du har laget en 3D-scene i Flash og brukt noen sinn lureri å overføre den til en 3D-scene inne i hodet ditt;) Hvis du har forstått alt du gikk gjennom, bør du være i stand til å bruke samme teknikk for å lage 3D anaglyph bilder med andre 3D-motorer. Jeg nevnte i den første delen som du kanskje har lyst til å prøve noe som gjør det mulig for brukeren å bevege kameraet med musen. Nå har du lagt den anaglyph effekt, flytte kameraene forover og bakover vil se veldig imponerende. Takk for at du leser denne opplæringen, jeg håper du har funnet det nyttig. Som alltid, hvis du har noen spørsmål, kan du be dem i kommentarfeltet nedenfor. Anmeldelser
...
offentlig Var camera2: Camera3D;
kamera = new Camera3D ();
Trinn 2: Opprette en ny View
offentlig Var viewport2: Viewport3D; viewport2 = new Viewport3D (); viewport2.autoScaleToStage = true; //dette vil gjøre synsfeltet like stor som stageaddChild (viewport2);
Trinn 3: Gi det andre kameraet til Second View
vil være tom før vi gjør noe for det. Vi trenger ikke å opprette en ny renderer for dette; bare bruke den eksisterende to ganger. Så, i Main (), ta denne koden:
renderer = new BasicRenderEngine (); renderer.renderScene (scene, kamera, view);
renderer = new BasicRenderEngine (); renderer.renderScene (scene, kamera, view); renderer.renderScene (scene, camera2, viewport2);
renderer.renderScene (scene, kamera, view); renderer.renderScene (scene, camera2, viewport2);
Trinn 4: Separer Kameraer
camera2.x = camera.x + 50;
Trinn 5:. Gjør det Wink
viewport.addEventListener (MouseEvent.CLICK, onClickViewport); viewport2.addEventListener (MouseEvent.CLICK, onClickViewport2);
import flash.events.MouseEvent;
Trinn 6: Sette opp Click-hendelsen Handlers
offentlig funksjon onClickViewport (mouseEvt: MouseEvent): void {} offentlig funksjon onClickViewport2 (mouseEvt: MouseEvent): void {}
Trinn 7: Veksle View Sikt
offentlig funksjon onClickViewport (mouseEvt: MouseEvent): void {viewport.visible = false; viewport2.visible = true;} offentlig funksjon onClickViewport2 (mouseEvt: MouseEvent): void {viewport.visible = true; viewport2.visible = false;}
Trinn 8:. Finn Noen 3D-briller
Trinn 9: forstå hvordan Briller Work
En hvit piksel har alle tre pærer slått på full
En svart piksel har alle tre slått av
En grønn piksel har grønn pære slått på, og de to andre slått av
å lese
Trinn 10:. Gjør det venstre synsfeltet Invisible til ditt høyre øye
. Disse er enkle å sette opp; først, importere klassen:
import flash.geom.ColorTransform;
offentlig Var leftViewportColorTransform: ColorTransform;
leftViewportColorTransform = new ColorTransform ();
viewport.transform.colorTransform = leftViewportColorTransform;
Trinn 11:.. Fjern alle de blå fra View
, greenMultiplier Hotell og redMultiplier
egenskapene til vår ColorTransform.
forteller Flash å la den være alene, mens sette den til 0
forteller Flash for å slå den av helt. Og, naturligvis, 0,5
vil gjøre det utgang halvparten av normal mengde, 2.0
vil gjøre det doble det, og så videre.
leftViewportColorTransform.blueMultiplier = 0;
leftViewportColorTransform.blueMultiplier = 0; viewport.transform.colorTransform = leftViewportColorTransform;
eller greenMultiplier
til 0
, snarere enn den blå. For andre farger, må du bruke en blanding av rødt, grønt og blått - mer om det i trinn 15.
Trinn 12: Fyll de gjennomsiktige områdene
view = new Viewport3D (); viewport.autoScaleToStage = true; //dette vil gjøre synsfeltet så stor som den scenen
view = new Viewport3D (); viewport.autoScaleToStage = ekte; //dette vil gjøre synsfeltet like stor som stageviewport.graphics.beginFill (0xFFFFFF); //0xFFFFFF er whiteviewport.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Trinn 13:. Opprett en ny ColorTransform
offentlig Var rightViewportColorTransform: ColorTransform; rightViewportColorTransform = new ColorTransform ();
Trinn 14: Påfør New ColorTransform
viewport2.transform.colorTransform = rightViewportColorTransform;
Trinn 15:. Fjern alle de gule fra View
av din nye ColorTransform til 0.)
RightViewportColorTransform = new ColorTransform (); rightViewportColorTransform.redMultiplier = 0; rightViewportColorTransform.greenMultiplier = 0; viewport2.transform.colorTransform = rightViewportColorTransform;
Trinn 16:. Fyll de gjennomsiktige områdene
viewport2 = new Viewport3D (); viewport2.autoScaleToStage = true; //dette vil gjøre synsfeltet like stor som stageviewport2.graphics.beginFill (0xFFFFFF); //0xFFFFFF er whiteviewport2.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Trinn 17:. fusjonere de to Images
viewport2.alpha = 0,5;
Trinn 18: Bland To Images
, metoder for å blande to fremstillings objekter sammen. Det er en fullstendig liste over dem her, men jeg bare kommer til å fokusere på den som heter legge
.
blanding modus går gjennom hver piksel i to bilder og legger sammen lysstyrken for hver av de tre lyskilder.
viewport2.blendMode = "legge";
Trinn 19:. Tweak Separation
Camera2.x = camera.x + (mouseX * 0,1);
offentlig funksjon onClickViewport (mouseEvt: MouseEvent): void {trace (camera2.x - camera.x);} offentlig funksjon onClickViewport2 (mouseEvt: MouseEvent): void {trace (camera2.x - kamera. x);}
Trinn 20: Sett Separation
camera2 .x = camera.x + (mouseX * 0,1);
camera2.x = camera.x + 50;
Konklusjon