Quick Tips: Vise en 3D-modell med Papervision3D
Del
Del
Del
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne hurtig Tips vil vi ta en titt på hvordan å legge ned og vise en 3D-modell i Flash, bruker Papervision3D.
< h2> Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Innledning
Hvis du vil bruke denne opplæringen må du ha en 3D-modell, eksporteres som en .dae fil, og dens struktur, som en bildefil.
Jeg kommer til å bruke denne low-poly terrengsykkel modell fra 3DOcean, skapt av OneManBand (som også opprettet . dette ryddig 3D Object Viewer i AIR)
Du må laste ned en kopi av Papervision3D (du kan også finne en kopi i kildefilene)
Trinn 1: Opprette Flash File
Opprett en ny Actionscript 3 dokument med dimensjoner på 550x200px og sette bildefrekvens 30 bilder i sekundet. Sett også dokumentet klassen "EmbeddingDAE".
Lag et rektangel som dekker hele scenen, og fyll den med en radial gradient av #FFFFFF til # D9D9D9. Juster gradient med Gradient Transform Tool, så det ser ut som dette:
Trinn 2: Sette opp Document Class
Opprett en ny Actionscript 3-fil og gi den navnet "EmbeddingDAE" . Denne klassen vil forlenge en klasse fra Papervision som har alle de grunnleggende funksjonalitet satt opp.
Som vi kommer til å bli innebygging 3D-modellen i SWF, må vi sørge for at filen er fullastet før prøver å gjøre bruk av den
Her er koden for at:.
pakke {import flash.events.Event; import org.papervision3d.view.BasicView; public class EmbeddingDAE strekker BasicView {offentlig funksjon EmbeddingDAE () {this.loaderInfo.addEventListener (Event.COMPLETE, onFullyLoaded); } Private funksjon onFullyLoaded (e: Hendelses): void {}}}
Trinn 3: Inkludering Resources
I stedet for hosting våre ressurser på en webserver og laster dem derfra, er vi rett og slett kommer til å legge dem i SWF. Vi gjør dette ved hjelp av Flex SDK Embed koden. Hvis du ikke har Flex SDK, eller har problemer med pre-installert versjon, kan du laste det ned her
Flash vet å håndtere visse typer filer, som min .png tekstur fil, men det vet ikke de .dae filformat. Derfor må vi sette en sekundær parameter, MIME-typen, til application /octet-stream - dette betyr at filen vil bli forvandlet til en ByteArray
Når du bruker Embed koden, må vi henvise den relative. (eller full) banen til filen, og tildele en klasse til denne filen. Senere kan vi opprette en forekomst av den innebygde filen ved hjelp av denne klassen
Her kan du se koden.
Public class EmbeddingDAE strekker BasicView {[Bygg (kilde = "mountain_bike.dae", mimetype = " application /octet-stream ")] privat Var bikeModelClass: Klasse; [Bygg (kilde = "bike_texture.png")] privat Var bikeTextureClass: Klasse; offentlig funksjon EmbeddingDAE ()
Du må skifte banene slik at de passer til dine egne filer
Trinn 4:. Håndtering av Texture
For å bruke vår tekstur med vår modell i Papervision3D, trenger vi å gjøre tre ting:
Opprett en forekomst av teksturen som en Bitmap - så vi kan få tilgang til sin bitmapData
Lag en Material med dette bitmapData -. Dette vil fungere som en tekstur.
Lag en MaterialsList, som vil knytte vårt materiale til vår modell. Det vil trenge inn navnet på det materiale som benyttes for modellen. Hvis du bare har en tekstur fil (som er mest vanlig) du trenger ikke å bekymre deg for dette, bare bruke "alle".
Her er koden du gjør dette (lagt til onFullyLoaded ()) :
Var bitmap: Bitmap = new bikeTextureClass (); Var bitmapMaterial: BitmapMaterial = new BitmapMaterial (bitmap.bitmapData); Var materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (bitmapMaterial, "alle");
Husk å importere:
import flash.display.Bitmap, import org.papervision3d.materials.BitmapMaterial, import org.papervision3d.materials.utils.MaterialsList;
Trinn 5: Legg Model
Slik legger vår modell, må vi gjøre fire ting:
Lag en variabel for vår modell - tenk på dette som et tomt skall
Opprett en forekomst av. ByteArray inneholder vår modell
Opprett en forekomst av variabelen for vår modell -... skape skallet
Last vår modell ved å sende ByteArray og MaterialsList til vår tomt skall
Først oppretter variabelen:
private Var bikeModelDAE: DAE;
Deretter gjøre resten (legge til onFullyLoaded)
Var byteArray: ByteArray = new bikeModelClass (); bikeModelDAE = new DAE (); bikeModelDAE.load (byteArray, materialsList);
Husk å importere:
import flash.utils.ByteArray, import org.papervision3d.objects.parsers.DAE;
Trinn 6: Vise Model
Nå er alt vi mangler er å kunne se modellen, som er en del av kaken. Jeg er også justere plasseringen av kameraet, slik at vi kan få en god titt på denne modellen. Så jeg forteller Papervision3D å re-gjengi hver ramme
Her er koden (igjen å legge til onFullyLoaded ()).
This.scene.addChild (bikeModelDAE); this.camera.z = 500; this.startRendering ();
Dette er hva det vil se ut:
Trinn 7: Legge Rotation
Nå kan vi se modellen, men bare fra ett punkt of view. Som er litt kjedelig er det ikke? Lar legge til noen rotasjon! Her kommer vi til å overstyre en funksjon som blir kalt hver ramme av Papervision3D motoren
styre beskyttet funksjon onRenderTick (hendelse: Hendelse = null). Void {super.onRenderTick (event); bikeModelDAE.yaw (1);}
Her er det nok en gang:
Konklusjon
Nå vet du hvordan du legger til 3D-modeller til Flash-prosjekter, og det er faktisk ganske enkelt. Jeg håper du likte å lese, og fant det nyttig.
Takk for lesing! Anmeldelser