Share
Continuând din partea 1, unde ne-am confruntat cu Papervision3D, partea a 2-a face scena noastră un pic mai departe. În această parte finală veți învăța cum să faceți cuburile dvs. revolving săriți la vizualizator cu ochelari 3D.
Știu că se spune acolo că acest tutorial este despre Papervision3D în Flash, dar de fapt este vorba despre înșelăciunea creierului. Vom face creierul să creadă că se uită la un obiect 3D real, când de fapt doar văd o imagine 2D.
Dacă sunteți familiarizat cu Papervision3D, veți putea urmări acest lucru folosind orice proiect care are o scenă, o cameră foto și un port de vizualizare. Dacă nu, verificați mai întâi Partea 1 din acest tutorial, deoarece voi continua de unde am rămas. Iată genul de lucru pe care îl vom lucra:
Îndreptați degetul în aer și țineți-l în fața nasului.
Uită-te la el doar cu ochiul tău drept deschis, apoi doar cu stânga ta. Vedeți cum pare să sară de la stânga la dreapta, în timp ce ceea ce se află în fundal pare să nu se miște deloc?
Creierul tău observă aceste diferențe între ceea ce văd fiecare dintre ochii tăi și le folosește pentru a genera o simulare 3D completă a lumii din jurul tău. In mintea ta. Imediat. Destul de impresionant!
Dacă vă vom înșela creierul, va trebui să facem ca fiecare dintre voi să vadă o imagine diferită. Deci, pentru a începe, să adăugăm un alt "ochi" (altă cameră) la scenă. Acest lucru va fi folosit pentru a crea imaginea pentru ochiul drept, în timp ce imaginea camerei existente va fi alimentată la ochiul stâng.
Creați o nouă variabilă publică numită Camera2...
public var camera2: Camera3D;
... și inițializați-o în funcția constructor principal ():
camera = nou Camera3D ();
Avem nevoie de un alt port de vizualizare pentru a scoate rezultatul camerei, deci adăugați următoarele:
public var viewport2: Viewport3D;
viewport2 = noul Viewport3D (); viewport2.autoScaleToStage = true; // aceasta va face portul de vizualizare la fel de mare ca și scenariul addChild (viewport2);
(Mă grăbesc prin asta, deoarece am acoperit-o ultima oară.)
Tine minte, viewport2 va fi gol până când nu vom face ceva. Nu este nevoie să creați un nou renderer pentru acest lucru; utilizați doar unul de două ori. Deci, în Main (), luați acest cod:
renderer = new BasicRenderEngine (); renderer.renderScene (scena, camera, fereastra de vizualizare);
... și adăugați o linie nouă pentru a face al doilea aparat de fotografiat la cel de-al doilea punct de vedere, după cum urmează:
renderer = new BasicRenderEngine (); renderer.renderScene (scena, camera, fereastra de vizualizare); renderer.renderScene (scena, camera2, viewport2);
Faceți același lucru și în funcția onEnterFrame ():
renderer.renderScene (scena, camera, fereastra de vizualizare); renderer.renderScene (scena, camera2, viewport2);
Dacă încercați acest lucru acum, ei vor arăta la fel ca înainte:
Dar nu este o surpriză: pentru un singur lucru, cele două camere sunt exact în același loc!
În mod prestabilit, camerele sunt plasate la (x = 0, y = 0, z = -1000) - puteți verifica prin acțiune urmăriți (camera.x, camera.y, camera.z).
Așa cum se vede de sus, scena arată astfel:
Văzut din lateral, este așa:
Pentru a ne imita corect ochii, ar trebui să plasăm al doilea aparat de fotografiat puțin în partea dreaptă a primului nostru:
Să încercăm să o deplasăm cu 50 de pixeli spre dreapta și să vedem ce se întâmplă. Puneți acest lucru în Main (), undeva după crearea celei de-a doua camere:
camera2.x = camera.x + 50;
Acum, testați-l și vedeți ce obțineți:
Arată ciudat, dar lucrează în mod clar! Zona din jurul cuburilor este transparentă în fiecare fereastră de vizualizare, astfel încât prima poate fi văzută în spatele celei de-a doua.
Va fi util să fiți capabil să priviți la ceea ce vede fiecare cameră în mod individual, deci să luăm analogia ochiului mai departe, făcându-i să "se uite" când faceți clic. Mai întâi, adăugați un ascultător de evenimente la fiecare fereastră de vizualizare, pentru a detecta clicurile de mouse:
viewport.addEventListener (MouseEvent.CLICK, onClickViewport); viewport2.addEventListener (MouseEvent.CLICK, onClickViewport2);
Puneți-l la sfârșitul funcției Main (). Nu uitați să importați MouseEvent:
importul flash.events.MouseEvent;
Adăugați aceste noi funcții în codul dvs., în afara funcției Main (), dar în interiorul clasei principale:
funcția publică onClickViewport (mouseEvt: MouseEvent): void funcția publică onClickViewport2 (mouseEvt: MouseEvent): void
Când facem clic pe primul fereastră de vizualizare, avem nevoie ca acesta să devină invizibil în timp ce cel de-al doilea devine vizibil (și invers pentru că faceți clic pe cel de-al doilea). Deci, modificați-vă cum ar fi:
funcția publică onClickViewport (mouseEvt: MouseEvent): void viewport.visible = false; viewport2.visible = true; funcția publică onClickViewport2 (mouseEvt: MouseEvent): void viewport.visible = true; viewport2.visible = false;
Încearcă:
Rețineți că trebuie să faceți clic pe unul dintre cuburi; zonele transparente nu declanșează un CLICK MouseEvent.
Veți avea nevoie de o pereche de ochelari 3D "anaglif"; tipul în care fiecare lentilă este o culoare diferită. Perechea pe care o folosesc are o lentilă galbenă în ochiul stâng și o lentilă albastră în ochiul drept (numită sistemul ColorCode3D), dar și alte combinații de culori sunt de asemenea populare, cum ar fi roșu și cian.
Puteți găsi aceste ochelari pe eBay pentru câțiva dolari: căutați doar ochelari 3D
Alternativ, puteți chiar să vă creați propria! André a postat un comentariu la prima parte a acestui tutorial, explicând că folosește cutii Tic-Tac de diferite culori pentru a-și face treaba. Geniu!
Deși exemplele mele vor fi făcute pentru ochelari galbeni și albastri, voi încerca să explic principiile, astfel încât să puteți face munca voastră cu orice culoare aveți. Este un pic dificil, deci vă rugăm să postați un comentariu de mai jos dacă acest lucru devine confuz!
Fiecare pixel de pe computer este ca un grup de trei becuri: unul roșu, unul verde și unul albastru.
Prin ajustarea luminozității fiecărui "bec" putem modifica culoarea acelui pixel:
Lentilele din ochelari 3D împiedică lumina de la unele becuri să treacă. De exemplu, lentila albastră din ochelarii meu împiedică lumina roșie și verde să ajungă la ochiul meu.
Deci, dacă mă uit la această imagine prin lentila mea albastră, nu o voi putea citi:
Nici o lumină nu mi-a atras ochii din zona neagră deoarece toate cele trei becuri sunt oprite. Și nici o lumină nu mi-a atins ochii din zona verde, pentru că numai becul verde este pornit și lentila albastră filtrează afară. Deci tot ce văd este un dreptunghi negru.
Acum, OK, daca incercati asta singuri, puteti constata ca acest lucru nu este complet adevarat. Lentila dvs., probabil, nu este albastru 100% pur, asa ca va lasa o lumina verde si rosie. Sau poate că culorile monitorului dvs. sunt calibrate diferit de a mea, așa că textul verde are o cantitate mică de roșu și albastru în el. Pentru a fi sincer, același lucru este valabil și pentru mine - dar nu contează, atâta timp cât este textul greu a citi.
Scopul nostru este de a face greu pentru ochiul tau drept pentru a vedea imaginea de la camera stanga, precum si pentru ochiul stang si camera dreapta.
Lentila albastră este peste ochiul drept, așa că, teoretic, dacă voi elimina tot albastrul din imaginea camerei stângi, nu o voi putea vedea cu ochiul drept.
În acest pas, atunci, să facem ca imaginea din stânga ferestrei să emită doar lumină roșie și verde; nici o lumină albastră deloc. Putem face acest lucru folosind a ColorTransform. Acestea sunt ușor de configurat; în primul rând, importați clasa:
import flash.geom.ColorTransform;
Apoi, creați o nouă variabilă publică pentru a ține o instanță a clasei:
public var varViewportColorTransform: ColorTransform;
Acum, creați această instanță nouă în interiorul Main ():
leftViewportColorTransform = noul ColorTransform ();
În cele din urmă, spuneți Flash să aplice acest ColorTransform în fereastra de vizualizare a camerei din stânga:
viewport.transform.colorTransform = leftViewportColorTransform;
(Această ultimă linie trebuie să fie după ce ați creat portul de vizualizare și transformarea culorilor. Probabil că este mai ușor să o puneți chiar la sfârșitul Main ().)
SWF nu va arăta altfel încă, deoarece ColorTransform nu modifică deloc imaginea în mod implicit.
Putem alege ce fracțiune din lumina fiecărui bec vrem să lăsăm prin schimbarea lui blueMultiplier, greenMultiplier și redMultiplier proprietati ale ColorTransform.
Stabiliți oricare dintre acestea la 1 spune Flash să o lăsăm singură, în timp ce o setați 0 spune Flash să o dezactiveze complet. Și, firește, 0.5 o va face să câștige jumătate din suma normală, 2.0 îl va dubla și așa mai departe.
Deci, pentru a scurge tot albastrul din fereastra de vizualizare din stânga, putem face acest lucru:
leftViewportColorTransform.blueMultiplier = 0;
Trebuie să puneți acest lucru înainte de linia care aplică transformarea în fereastra de vizualizare, după cum urmează:
leftViewportColorTransform.blueMultiplier = 0; viewport.transform.colorTransform = leftViewportColorTransform;
Dacă ochelarii au o lentilă roșie sau verde peste ochiul drept, trebuie să setați redMultiplier sau greenMultiplier la 0, mai degrabă decât albastru. Pentru orice alte culori, va trebui să folosiți un amestec de roșu, verde și albastru - mai mult pe pasul 15.
Testați SWF-ul:
Este greu să afli "a" -ul logo-ului prin lentila albastră, dar nu este deloc dificil să faci forma cuburilor pe fundalul alb!
Dacă modificați fundalul SWF, veți vedea problema. Deoarece zona "albă" din jurul cuburilor nu este de fapt albă, ci mai degrabă transparentă și permite afișarea fundalului alb al SWF, nu este afectată de ColorTransform.
Pentru a rezolva acest lucru, trebuie să oferim ferestrei de vizualizare un fundal alb solid, pe care cuburile vor fi prezentate pe partea de sus. E destul de ușor; doar du-te înapoi în locul unde ați creat portul de vizualizare:
viewport = nou Vizualizare3D (); viewport.autoScaleToStage = true; // aceasta va face portul de vizualizare la fel de mare ca si scena
... și adăugați câteva linii pentru a desena un dreptunghi alb care este la fel de mare ca și scena:
viewport = nou Vizualizare3D (); viewport.autoScaleToStage = true; // aceasta va face portul de vizualizare la fel de mare ca și scena viewport.graphics.beginFill (0xffffff); // 0xffffff este alb viewport.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Testați-l din nou:
Imaginea ar trebui să fie foarte slabă, plictisitoare și greu de văzut prin intermediul obiectivului potrivit, dar la fel de ușor ca imaginea obișnuită pentru a vedea prin obiectivul din stânga.
Trebuie să facem același lucru pentru portul de vizualizare drept acum. Deci, creați noua dvs. ColorTransform:
public var varViewportColorTransform: ColorTransform;
rightViewportColorTransform = noul ColorTransform ();
Acum, aplicați această nouă transformare în fereastra de vizualizare dreapta:
viewport2.transform.colorTransform = rightViewportColorTransform;
Deoarece obiectivul meu din stânga este galben, trebuie să scurs tot galbenul din acest port de vizualizare.
(Dacă obiectivul stâng este roșu, atunci acest pas este ușor - setați doar redMultiplier din noul dvs. ColorTransform la 0.)
Dar cum vom obține galben din roșu, verde și albastru?
Dacă folosim vopsele, nu am putut; galben este o culoare primară în acest caz. Dar când se ocupă de lumină, lucrurile sunt diferite. Uita-te la asta:
Imagine de la Wikimedia Commons. Mulțumesc, Mike Horvath și jacobolus!
După cum puteți vedea, roșu și verde se amestecă împreună pentru a face galben (ceea ce explică de ce fundalul portului de vizualizare stânga a devenit galben când am eliminat tot albastrul). Deci, pentru a elimina toate galben de la imaginea noastră, trebuie să eliminăm toate roșu și toate verde!
Putem face acest lucru astfel:
rightViewportColorTransform = noul ColorTransform (); rightViewportColorTransform.redMultiplier = 0; rightViewportColorTransform.greenMultiplier = 0; viewport2.transform.colorTransform = rightViewportColorTransform;
Trebuie să umplem fundalul acestui port de vizualizare.
Faceți acest lucru în același mod ca înainte:
viewport2 = noul Viewport3D (); viewport2.autoScaleToStage = true; // aceasta va face portul de vizualizare la fel de mare ca și scenă viewport2.graphics.beginFill (0xffffff); // 0xffffff este alb viewport2.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Testați-l:
Obiectivul galben de pe ochelarii meu permite de fapt o cantitate destul de mare de lumină albastră, dar este încă mult mai întunecat atunci când este privit prin acea lentilă decât atunci când este văzut prin lentila albastră și asta contează.
Așadar, avem două imagini înființate și transformate în culori. Problema este că, în momentul de față, putem vedea doar unul dintre ei la un moment dat.
Cea mai evidentă modalitate de a ne permite să vedem amândouă simultan este să reducem alfa (transparența) portului de vizualizare din față, ca de exemplu:
viewport2.alpha = 0.5;
Testați acest lucru:
Ah. OK, nu un succes răsunător. Alpha nu este în mod clar instrumentul potrivit pentru această slujbă; ce mai avem?
Flash ne oferă posibilitatea de a alege mai multe moduri de amestecare, metode de amestecare a două obiecte de afișaj împreună. Există o listă completă a acestora aici, dar mă voi concentra doar asupra celui pe care l-am sunat adăuga.
adăuga modul de amestecare trece prin fiecare pixel al celor două imagini și adaugă împreună luminozitatea fiecăruia dintre cele trei becuri.
Deci, dacă un pixel particular din prima imagine are un bec verde complet, iar celelalte două pe deplin oprite, iar același pixel în a doua imagine are complet bulbul albastru și ceilalți doi pe deplin oprit, atunci când se amestecă împreună verde și becurile albastre vor fi complet aprinse, iar becul roșu va fi complet oprit.
Dacă prima și a doua imagine au jumătate de bec roșu, iar celelalte două sunt complet dezactivate, atunci imaginea amestecată va avea pe deplin becul roșu, în timp ce celelalte două rămân oprite.
Faceți fotografia? Bine, hai să o folosim. Șterge linia pe care tocmai am scris-o care a ajustat alfa-ul și o înlocuiește cu următoarea:
viewport2.blendMode = "adaugă";
(Nu este necesar să aplicăm modul de amestecare în ambele ferestre de vizualizare, doar cel din partea de sus a listei de afișare.)
Testați-l:
Asa mai merge!
Dacă te uiți la ea printr-un ochi la un moment dat, ar trebui să observați că fiecare ochi vede un alt port de vizualizare mai proeminent. Veți putea, de asemenea, să vedeți o fantomă slabă a celuilalt fereastră de vizualizare, dar asta nu este o problemă; creierul dvs. poate ignora acest lucru.
Cu toate acestea, imaginea nu arată destul de mult 3D încă. Să rezolvăm asta.
Chiar dacă ochii tăi văd imagini diferite, acest lucru nu este suficient pentru a-ți păcăli creierul. Creierul tău e destul de inteligent, vezi; unii ar spune chiar că este cel mai deștept organ din corpul tău. Știe că ar trebui să utilizeze alte indicii pentru a determina dacă un obiect este sau nu 3D. Perspectiva, de exemplu: cât de mic ar trebui să pară un obiect în funcție de cât de departe este.
Principala problemă aici este că cele două camere sunt distanțate mult mai departe una de cealaltă decât ochii noștri. Nu este surprinzător, deoarece am ales numărul 50 la întâmplare.
Distanța reală de separare pe care ar trebui să o folosim va depinde de o serie de lucruri, cum ar fi cât de departe sunteți de pe monitor și cât de mare este ecranul dvs., așa că nu vă pot da doar un număr magic de utilizat. Va trebui să ne dăm seama manual.
Am putea face acest lucru încercând o mulțime de numere diferite unul câte unul, dar acest lucru este obositor și va dura pentru totdeauna. Am o idee mai bună.
Adăugați această linie la funcția onEnterFrame ():
camera2.x = camera.x + (mouseX * 0.1);
Acum modificați funcțiile onClickViewport și onClickViewport2 la următoarele:
funcția publică onClickViewport (mouseEvt: MouseEvent): void trace (camera2.x - camera.x); funcția publică onClickViewport2 (mouseEvt: MouseEvent): void trace (camera2.x - camera.x);
Rulați SWF-ul și mutați mouse-ul la stânga și la dreapta. Va arăta astfel:
Puneți ochelarii, opriți lumina și continuați să mutați mouse-ul până când găsiți "locul dulce" în care imaginea pare să devină solidă. Faceți clic pe mouse-ul în acest moment și va urmări un număr. Luați o notă!
Odată ce ați găsit separarea optimă, ștergeți linia pe care tocmai am adăugat-o la funcția onEnterFrame ():
camera2.x = camera.x + (mouseX * 0.1);
Acum găsiți linia din Main () unde stabiliți distanța dintre camere:
camera2.x = camera.x + 50;
... și înlocuiți numărul 50 cu numărul pe care l-ați notat. Am constatat că 18 a fost un număr bun de utilizat pentru configurarea mea.
În cele din urmă, testați SWF-ul:
Ta-da!
Bine - ați creat o scenă 3D în Flash și ați folosit o șmecherie minții pentru a o transfera într-o scenă 3D din interiorul capului;)
Dacă ați înțeles tot ceea ce ați trecut, ar trebui să puteți utiliza aceeași tehnică pentru a realiza imagini anaglife 3D folosind alte motoare 3D.
Am menționat în prima parte că ați dori să încercați să faceți posibil ca utilizatorul să deplaseze camera cu mouse-ul. Acum ați adăugat efectul anaglyph, mutarea camerelor înainte și înapoi va arăta foarte impresionant.
Vă mulțumim că ați citit acest tutorial, sper că ați găsit-o utilă. Ca întotdeauna, dacă aveți întrebări, vă rugăm să le întrebați în comentariile de mai jos.
Accentsconagua