Share
Pentru a se conecta cu oferta noastră Papervision3D Essentials, tutorialul de astăzi are și o temă PV3D.
Acest tutorial din două părți vă va arăta cum să începeți cu motorul Papervision3D, apoi cum să vă faceți să creeze creația să iasă din ecran folosind un efect anaglyph în combinație cu ochelari 3D.
Ai o pereche de pahare 3D situate în jur? Aici, în Marea Britanie, Channel 4 rulează o Săptămână specială 3D - șapte zile de programe TV difuzate în 3D - așa că o mulțime de oameni aici fac. Să le folosim.
Acest tutorial din două părți vă va arăta cum să începeți cu motorul Papervision3D și apoi cum să vă faceți să creeze saltul din ecran.
În această primă parte, veți învăța elementele de bază ale PV3D, terminând cu ceva de genul:
... și în cea de-a doua parte, veți afla despre efectul de anaglief pentru ochelarii 3D și aplicați-l la ceea ce ați făcut astfel:
Dacă utilizați Flash, creați un nou fișier Flash ActionScript 3.0. Stabiliți dimensiunea scenei pentru a fi ceea ce vă place - mă voi menține cu valorile implicite de 550 cu 400 de pixeli.
În timp ce sunteți la el, creați un nou fișier ActionScript și salvați-l ca Main.as în același folder ca și FLA. Vom folosi acest fișier AS ca și FLA clasa de documente, faceți astfel un spațiu gol în fișierul FLA și introduceți-l Principal în caseta "Clasa de documente" din panoul Proprietăți.
(Dacă nu utilizați Flash IDE, creați doar un nou proiect AS3.)
Mergeți la pagina de descărcare Papervision. Există o mulțime de versiuni diferite și câteva tipuri diferite de fișiere (zip, swc, mxp). Doar apuca ultimul fișier .zip (ar trebui să spună Recomandate lângă el). Cel pe care îl folosesc este numit Papervision3D 2.1.920.zip (pentru utilizare cu cartea "Papervision3D Essentials").
Extrageți fișierul zip pe care tocmai l-ați descărcat oriunde pe hard disk. Îmi place să păstrez toate motoarele pe care le folosesc în același dosar, dar depinde de tine.
Flash trebuie să știe de unde ați extras Papervision înainte de ao folosi. Noi folosim a CLASSPATH pentru aceasta: faceți clic pe Editați> Preferințe, Selectați ActionScript, apoi apasa Setările ActionScript 3.0 ... .
În caseta care apare, faceți clic pe pictograma mică "cruce", apoi găsiți dosarul în care ați dezarhivat Papervision și faceți clic pe OK. Faceți clic pe OK în celelalte casete până când reveniți la FLA.
Dacă nu utilizați IDE-ul Flash, va trebui să setați acest lucru într-un mod diferit. De exemplu, în FlashDevelop, ar trebui să faceți clic pe Instrumente> Căi de clasă globale.
În Papervision, toate obiectele 3D trebuie plasate în interiorul unui scenă. E un fel de scenă în ActionScript obișnuit. Deci, înainte de a face ceva trebuie să creați o Scene3D obiect care va conține orice altceva.
Treceți la fișierul Main.as. Să adăugăm rapid codul de bază necesar pentru orice clasă de documente:
pachet import flash.display.MovieClip; clasa publică Extensie principală MovieClip funcția publică principală ()
Obiectul Scene3D se află în org.papervision3d.scenes.Scene3D, așa că trebuie import că, atunci creați un nou public var pentru a ține scena și, în final, creați obiectul real al scenei: (liniile 4, 8 și 12)
pachet import flash.display.MovieClip; import org.papervision3d.scenes.Scene3D; public class principal Extinde MovieClip public var scena: Scene3D; funcția publică principală () scena = nouă Scene3D ();
Pentru început, hai să creăm un cub simplu și simplu pe scena noastră.
Vom urma aceiasi pași ca mai sus pentru ao crea, apoi adăugați-o la scena noastră: (liniile 5, 10, 15, 16)
pachet import flash.display.MovieClip; import org.papervision3d.scenes.Scene3D; import org.papervision3d.objects.primitives.Cube; public class principal Extinde MovieClip public var scena: Scene3D; public var cube: Cube; funcția publică principală () scena = nouă Scene3D (); cub = nou Cub (); scene.addChild (cub);
Rețineți că folosim "addChild ()" pentru a adăuga cubul la scenă, la fel cum o facem atunci când adăugăm un MovieClip în scenă.
Codul de mai sus vă va oferi o eroare dacă încercați să o executați. Asta pentru că nu am spus cubului cum ar trebui să arate suprafețele acestuia.
Papervision folosește materiale pentru a descrie cum arată o suprafață. Putem realiza un material foarte simplu, unic colorat folosind un ColorMaterial:
var gri Material: ColorMaterial = ColorMaterial nou (0xCCCCCC);
"0xCCCCCC" reprezintă culoarea gri; Luați doar codul de culoare de orice culoare și înlocuiți-l # cu 0x:
Pentru că un cub are șase fețe, trebuie să-i dăm șase materiale. Pentru a face acest lucru am pus toate cele șase într-o listă:
var materialsList: MaterialeList = newListsList (); materialsList.addMaterial (griMaterial, "față"); materialsList.addMaterial (grayMaterial, "spate"); materialsList.addMaterial (grayMaterial, "stânga"); materialsList.addMaterial (grayMaterial, "dreapta"); materialsList.addMaterial (grayMaterial, "sus"); materialsList.addMaterial (griMaterial, "partea de jos");
... și apoi treceți această listă la cub atunci când o creăm:
cub = nou Cub (materialList);
Deci, întregul dvs. cod ar trebui să se încheie după cum urmează: (nu uitați import Declarații!)
pachet 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 principal Extinde MovieClip public var scena: Scene3D; public var cube: Cube; funcția publică Main () var grayMaterial: ColorMaterial = ColorMaterial nou (0xCCCCCC); var materialsList: MaterialeList = newListsList (); materialsList.addMaterial (griMaterial, "față"); materialsList.addMaterial (grayMaterial, "spate"); materialsList.addMaterial (grayMaterial, "stânga"); materialsList.addMaterial (grayMaterial, "dreapta"); materialsList.addMaterial (grayMaterial, "sus"); materialsList.addMaterial (griMaterial, "partea de jos"); scena = nou Scene3D (); cub = nou Cub (materialList); scene.addChild (cub);
Deci, nu avem erori, dar pentru a vedea ceva, trebuie să adăugăm o aparat foto la fața locului. Vom vedea totul prin intermediul "lentilei".
Adăugarea unei camere este la fel de simplă ca adăugarea unui cub - mai simplu, de fapt, deoarece nu trebuie să adăugămChild () la scena:
import org.papervision3d.cameras.Camera3D;
public var camera: Camera3D;
scena = nou Scene3D (); cub = nou Cub (materialList); scene.addChild (cub); camera = nou Camera3D (); // aceasta este noua linie din Main ()
Acum, o cameră de filmat este pe scenă, dar nu este cuplată la nici o ieșire, deci tot nu putem vedea cubul!
În mod implicit, cubul este poziționat la dreapta în mijlocul scenei (la x = 0, y = 0, z = 0) și camera este poziționată înapoi cu 1000 de unități (la x = 0, y = z = -1000).
Cum putem obține imaginea pe care camera o vede în fereastra Flash Player?
Răspunsul este că folosim a viewport. Acesta este un tip de DisplayObject, ca un MovieClip, pentru a putea adăugaChild () la scenă. Dar putem, de asemenea, să facem Papervision face (adică atrageți) vederea camerei la acest port de vizualizare - este un pic ca un artist să deseneze ceea ce poate vedea printr-un obiectiv de cameră, apoi să-și deseneze desenul și să-l lipsească de un televizor. Doar mai repede.
Deci, trebuie să creați un port de vizualizare și un randător:
import org.papervision3d.view.Viewport3D; import org.papervision3d.render.BasicRenderEngine;
public var viewport: Viewport3D; public var renderer: BasicRenderEngine;
// pune acest lucru la sfârșitul Main () viewport = new Viewport3D (); viewport.autoScaleToStage = true; // aceasta va face portul de vizualizare la fel de mare ca și scenariul addChild (viewport); renderer = new BasicRenderEngine ();
Acum, tot ce trebuie să facem este să facem ca redarea să facă randarea reală. Pentru aceasta, trebuie să cunoască scena, camera și portul de vizualizare:
renderer.renderScene (scena, camera, fereastra de vizualizare);
În sfârșit! Putem testa în cele din urmă SWF. Drum roll, te rog ...
Incredibil! Uluitor! Bine bine, de fapt este destul de lame. Cum putem chiar să spunem că este un cub? Arată ca un pătrat.
Dacă vom roti cubul, vom putea spune dacă este de fapt un cub sau nu.
Din moment ce cubul are trei dimensiuni, cuvântul "roti" este puțin confuz - în ce direcție vrem să spunem? Trebuie să specificăm dacă ne rotim în jurul axei x, axei y sau axei z.
cub Obiectul are trei proprietăți pe care le putem folosi pentru a defini acest lucru, numit (fără îndoială) rotationX, rotationY și rotationZ. Să le schimbăm câteva:
scena = nou Scene3D (); cub = nou Cub (materialList); cube.roareaX = 25; // modificați rotația cube.rotationY = 40; // schimba rotația scene.addChild (cub); camera = nou Camera3D ();
Este mai bine, dar din moment ce toate fețele sunt exact la aceeași culoare, ele se îmbină doar unul cu celălalt. Să rezolvăm asta.
În loc de gri, am să pictez laturile cu sigla ActiveTuts +.
Dacă utilizați IDE Flash, creați un nou clip video și desenați sau lipiți imaginea pe care doriți să o utilizați. Am inclus logo-ul în biblioteca FLA din interiorul zip-ului.
Faceți clic dreapta pe clipul dvs. video și selectați Proprietăți. Verificați "Exportați pentru ActionScript" și dați-i un nume de clasă. Acest lucru vă va permite să accesați codul. (Dacă nu utilizați Flash IDE, zipul conține, de asemenea, un SWC cu un MovieClip numit ActiveTutsLogo pe care îl puteți utiliza. Sau puteți crea un nou videoclipClip în cod și adăugați imaginea la acesta. du-te în detaliile de aici, deși.)
În loc de a ColorMaterial o să folosim a MovieMaterial, și în loc să specificăm o culoare, vom specifica un clip video. Deci, înlocuiți acest lucru:
var gri Material: ColorMaterial = ColorMaterial nou (0xCCCCCC); var materialsList: MaterialeList = newListsList (); materialsList.addMaterial (griMaterial, "față"); materialsList.addMaterial (grayMaterial, "spate"); materialsList.addMaterial (grayMaterial, "stânga"); materialsList.addMaterial (grayMaterial, "dreapta"); materialsList.addMaterial (grayMaterial, "sus"); materialsList.addMaterial (griMaterial, "partea de jos");
… cu asta:
var logoMaterial: MovieMaterial = filmMaterial nou (noul ActiveTutsLogo ()); // înlocuiți "ActiveTutsLogo" de mai sus cu numele de clasă al videoclipului dvs. var materialsList: MaterialsList = newListsList (); materialsList.addMaterial (logoMaterial, "față"); materialsList.addMaterial (logoMaterial, "înapoi"); materialsList.addMaterial (logoMaterial, "stânga"); materialsList.addMaterial (logoMaterial, "dreapta"); materialsList.addMaterial (logoMaterial, "sus"); materialsList.addMaterial (logoMaterial, "partea de jos");
Va trebui, de asemenea, să importați filmul MovieMaterial:
import org.papervision3d.materials.MovieMaterial;
Testați-l din nou:
Păi, funcționează, dar pare puțin zdrobită.
Aspectul "zdrobit" se datorează faptului că Papervision este setat în mod implicit pentru a desena rapid lucrurile, mai degrabă decât cu exactitate. Vreau să fiu sigur că acest tutorial va fi difuzat pe computere mai lent, așa că am să o las la asta, dar iată cum îl puteți îmbunătăți:
Când creați cubul, îl puteți transmite parametrilor pentru a defini cât de mulți segmente fiecare față este împărțită în. Cu cât mai multe segmente alegi, cu atât este mai precisă cubul - dar cu cât este mai lent randul redat.
Am descoperit că 10 reprezintă un număr bun de segmente de utilizat în fiecare direcție. Iată cum arată acest cod:
cub = nou Cub (materialList, 500, 500, 500, 10, 10, 10);
Al cincilea, al șaselea și al șaptelea parametru definesc numărul de segmente utilizate în fiecare direcție. Pentru a le seta, totuși, trebuie să specificăm toți parametrii inainte de și al cincilea.
Specificăm deja primul parametru - aceasta este lista materialelor. Al doilea, al treilea și al patrulea parametru definesc lățimea, adâncimea și înălțimea cubului. Acestea sunt setate la 500 în mod implicit, așa că i-am păstrat același lucru aici.
Dacă utilizați linia de cod de mai sus, cubul dvs. va arăta astfel:
Mult mai curat!
Putem face o rotire obișnuită a filmului MovieClip prin creșterea acestuia rotație proprietatea fiecare cadru - și, desigur, putem face la fel cu cubul și valorile sale de rotațieX / Y / Z.
Creați un ascultător de evenimente ENTER_FRAME, care va rula fiecare cadru:
importul flash.events.Event;
// în partea de jos a Main () addEventListener (Event.ENTER_FRAME, onEnterFrame);
// ca o funcție nouă // în interiorul clasei principale, dar în afara funcției principale () funcția publică onEnterFrame (evt: Event): void cube.rotationX = cube.rotationX + 5; cube.rotationY = cube.rotationY + 5;
Acest lucru va face cubul să devină un pic mai mult în fiecare cadru. Deci, dacă testați SWF-ul acum ... cubul va rămâne complet inactiv. huh?
Gândește-te la pictor. Încă ne uităm la vechea sa imagine - avem nevoie de el pentru a ne atrage unul nou pe fiecare cadru sau nu vom vedea nici o schimbare!
Deci, modificați funcția onEnterFrame ():
funcția publică peEnterFrame (evt: Eveniment): void cube.rotationX = cube.rotationX + 5; cube.rotationY = cube.rotationY + 5; renderer.renderScene (scena, camera, fereastra de vizualizare);
Verifica acum:
Un cub este minunat, dar cum romanul ți-a arătat deja cum să faci asta cu Away3D, hai să luăm lucrurile un pic mai departe.
Să adăugăm încă câteva, pentru a forma o linie orizontală de cuburi. Putem folosi o simplă pentru buclă pentru a face acest lucru; doar înlocuiți acest cod:
cub = nou Cub (materialList); cube.roareaX = 25; // modificați rotația cube.rotationY = 40; // schimba rotația scene.addChild (cub);
… cu asta:
pentru (var i: int = -1; i <= 1; i++ ) cube = new Cube( materialsList ); cube.x = i * 350; cube.rotationX = 25; cube.rotationY = 40; scene.addChild( cube );
Rețineți că fac poziția x a fiecărui cub depinde de cât de departe suntem prin bucla. Dacă executați acest lucru, veți obține următoarele:
Omule, cuburile sunt prea apropiate. Le putem micsora pentru a face acest lucru; schimba doar scară proprietate a fiecărui cub:
pentru (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 );
Așa că rezolvă problema intersecției, dar numai unul dintre cuburile noastre se rotește. Cum se face?
Este pentru că cub variabila se referă întotdeauna numai la ultimul cub creat - și funcția noastră onEnterFrame () modifică numai rotațiile acelui cub.
Deci, pentru a rezolva acest lucru, vom avea nevoie de o matrice. Așa cum materialele noastre stochează mai multe materiale, matricea noastră va stoca mai multe cuburi.
public var cubeArray: Array;
cubeArray = Array nou (); // creați noua matrice pentru (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" înseamnă doar "adăugați la sfârșitul listei").
Acum, că fiecare cub este în matrice, putem să buclem prin matrice fiecare cadru și rotiți fiecare dintre ele:
funcția publică peEnterFrame (evt: Event): void pentru fiecare (cub în cubeArray) cube.rotationX = cube.rotationX + 5; cube.rotationY = cube.rotationY + 5; renderer.renderScene (scena, camera, vizualizare);
Bucla "pentru fiecare" face cub variabilă se referă la fiecare cub, la rândul său, una câte una, mai degrabă decât doar la ultimul cub creat așa cum a făcut înainte. Iată rezultatul:
Succes!
Am făcut o linie de cuburi, deci un pătrat nu va fi dificil. În loc să facem doar trei cuburi, vom face trei linii de trei cuburi.
Pentru a face acest lucru, putem folosi o bucla-in-a-buclă, așa cum este:
pentru (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
Testați-l:
Frumos. Și rețineți că nu trebuie să schimbăm deloc codul dinEnterFrame (); bucla care rulează fiecare cadru doar rotește fiecare cub din interiorul matricei - și încă împingem fiecare cub pe Array.
Ar fi dezamăgit să te oprești într-un pătrat, nu-i așa? La urma urmei, acesta este un tutorial 3D.
Mă aștept să vă dați seama cum să faceți acest pas pe cont propriu. Dar, în cazul în care doriți să comparați:
pentru (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 );
Am fost puțin ascuns aici. Am început k la 0 în loc de -1, pentru că în caz contrar stratul de cuburi din față ar fi prea aproape de cameră. Desigur, puteți utiliza oricare dintre numerele care vă plac.
Hei, ai observat că efectul "dented" a dispărut în momentul în care folosim cuburi mai mici?
Minunat!
Aceasta este numai zgârierea suprafeței a ceea ce puteți face cu Papervision3D. Înainte de a trece la ochelari 3D, iată câteva lucruri pe care le puteți experimenta:
În a doua parte, veți învăța cum să faceți scena să funcționeze cu ochelari 3D. Deci, dacă aveți o pereche, nu le aruncați!
Între timp, vă mulțumim că ați citit prima parte. Sper că ați găsit-o utilă. Dacă aveți întrebări sau dacă ceva a fost confuz, vă rugăm să postați un comentariu de mai jos.
Accentsconagua