Accentsconagua

Rask Tips Viser en 3D-modell med Papervision3D

Kode
Share

I denne Quick Tip tar vi en titt på hvordan å bygge inn og vise en 3D-modell i Flash, ved hjelp av Papervision3D.

Endelig resultatforhåndsvisning

La oss se på det endelige resultatet vi vil jobbe for:

Introduksjon

For å bruke denne opplæringen må du ha en 3D-modell, eksportert som en .dae-fil og dens tekstur som en bildefil.

Jeg skal bruke denne lavpoly terrengsykkelmodellen fra 3DOcean, laget av OneManBand (som også laget denne fine 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-filen

Opprett et nytt ActionScript 3-dokument med dimensjoner på 550x200px og sett inn bildefrekvensen til 30fps. Sett også dokumentklassen til "EmbeddingDAE".

Opprett et rektangel som dekker hele scenen, og fyll det med en radial gradient av #FFFFFF til # D9D9D9. Juster gradienten med Gradient Transform Tool, slik at det ser slik ut:

Trinn 2: Konfigurere dokumentklassen

Opprett en ny ActionScript 3-fil og gi den navnet "EmbeddingDAE". Denne klassen vil forlenge en klasse fra Papervision som har all grunnleggende funksjonalitet satt opp.

Da vi skal legge inn 3D-modellen i SWF-en din, må vi forsikre oss om at filen har blitt fullt lastet før du prøver å bruke den.

Her er koden for det:

 pakke import flash.events.Event; importer org.papervision3d.view.BasicView; offentlig klasse EmbeddingDAE utvider BasicView offentlig funksjon EmbeddingDAE () this.loaderInfo.addEventListener (Event.COMPLETE, onFullyLoaded);  privat funksjon onFullyLoaded (e: Event): void

Trinn 3: Embedding av ressursene

I stedet for å hoste våre ressurser på en webserver og laste dem derfra, skal vi bare legge dem inn i SWF. Vi gjør dette ved å bruke Flex SDK embed stikkord. Hvis du ikke har Flex SDK, eller har problemer med den forhåndsinstallerte versjonen, kan du laste den ned her

Flash vet hvordan man skal håndtere bestemte typer filer, som min .png teksturfil, men det vet ikke .dae filformat. Derfor må vi sette en sekundær parameter, MIME-typen, til application / oktettstrømformat - dette betyr at filen vil bli omdannet til a ByteArray.

Når du bruker embed tag, må vi referere til den relative (eller hele) banen til filen, og tildele en klasse til denne filen. Senere kan vi lage en forekomst av den innebygde filen ved hjelp av denne klassen.

Her kan du se koden:

 offentlig klasse EmbeddingDAE utvider BasicView [Embed (source = "mountain_bike.dae", mimeType = "application / octet-stream")] private var bikeModelClass: Class; [Embed (source = "bike_texture.png")] private var bikeTextureClass: Klasse; offentlig funksjon EmbeddingDAE ()

Du må erstatte stiene slik at de samsvarer med dine egne filer.

Trinn 4: Håndtering av tekstur

For å bruke vår tekstur med vår modell i Papervision3D må vi gjøre tre ting:

  1. Lag en forekomst av tekstur som en bitmap - så vi kan få tilgang til det bitmapData.
  2. Lage en Materiale med dette bitmapData -- Dette vil fungere som en tekstur.
  3. Lage en MaterialsList, som vil knytte vårt materiale til vår modell. Det vil trenge navnet på materialet som brukes til modellen. Hvis du bare har en teksturfil (som er vanligst), trenger du ikke å bekymre deg for dette, bruk bare "alle".

Her er koden som gjør dette (lagt til onFullyLoaded ()):

 Var bitmap: Bitmap = new bikeTextureClass (); var bitmapMaterial: BitmapMaterial = nytt BitmapMaterial (bitmap.bitmapData); var materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (bitmapMaterial, "all");

Husk å importere:

 importer flash.display.Bitmap; importer org.papervision3d.materials.BitmapMaterial; importer org.papervision3d.materials.utils.MaterialsList;

Trinn 5: Legg inn modellen

For å laste vår modell må vi gjøre fire ting:

  1. Opprett en variabel for vår modell - tenk på dette som et tomt skall.
  2. Opprett en forekomst av ByteArray inneholder vår modell.
  3. Opprett en forekomst av variabelen for vår modell - skape skallet.
  4. Last inn vår modell ved å passere ByteArray og MaterialsList til vårt tomme skall.

Først opprett variabelen:

 privat var bikeModelDAE: DAE;

Så gjør resten (legger til onFullyLoaded)

 var byteArray: ByteArray = new bikeModelClass (); bikeModelDAE = ny DAE (); bikeModelDAE.load (byteArray, materialsList);

Husk å importere:

 importere flash.utils.ByteArray; importer org.papervision3d.objects.parsers.DAE;

Trinn 6: Viser modellen

Nå er alt vi mangler, i stand til å se modellen, som er et stykke kake. Jeg justerer også kameraets posisjon slik at vi kan få en god titt på denne modellen. Da forteller jeg Papervision3D å gjengi hver ramme.

Her er koden (legger til igjen på onFullyLoaded ()):

 this.scene.addChild (bikeModelDAE); this.camera.z = 500; this.startRendering ();

Slik ser det ut:

Trinn 7: Legge til rotasjon

Nå kan vi se modellen, men bare fra ett synspunkt. Det er litt kjedelig, ikke sant? La oss legge til litt rotasjon! Her skal vi tilsidesette en funksjon som kalles hver ramme av Papervision3D-motoren.

 overstyr beskyttet funksjon onRenderTick (event: Event = null): void super.onRenderTick (event); bikeModelDAE.yaw (1);

Her er det igjen:

Konklusjon

Nå vet du hvordan du legger til 3D-modeller for Flash-prosjekter, og det er faktisk ganske enkelt. Jeg håper du likte å lese og fant det nyttig.

Takk for at du leste!

Kode
×