Snabbtips Visar en 3D-modell med Papervision3D

I den här snabba tipset tar vi en titt på hur man bäddar in och visar en 3D-modell i Flash med Papervision3D.

Slutresultatförhandsvisning

Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:

Introduktion

För att använda denna handledning måste du ha en 3D-modell som exporteras som en .dae-fil och dess textur som en bildfil.

Jag ska använda den här lågpoly mountainbike modellen från 3DOcean, skapad av OneManBand (som också skapade denna snygga 3D Object Viewer i AIR).

Du måste ladda ner en kopia av Papervision3D (du kan också hitta en kopia i källfilerna)

Steg 1: Skapa Flash-filen

Skapa ett nytt ActionScript 3-dokument med dimensioner på 550x200px och ställ in bildfrekvensen till 30fps. Ställ också dokumentklassen på "EmbeddingDAE".

Skapa en rektangel som täcker hela scenen och fyll den med en radial gradient av #FFFFFF till # D9D9D9. Justera lutningen med Gradient Transform Tool, så det ser ut så här:

Steg 2: Konfigurera dokumentklassen

Skapa en ny ActionScript 3-fil och namnge den "EmbeddingDAE". Denna klass kommer att förlänga en klass från Papervision som har all grundläggande funktionalitet upprättad.

Eftersom vi ska bädda in 3D-modellen i din SWF måste vi se till att filen har laddats fullständigt innan du försöker använda den.

Här är koden för det:

 paket import flash.events.Event; importera org.papervision3d.view.BasicView; offentliga klassen EmbeddingDAE utökar BasicView public function EmbeddingDAE () this.loaderInfo.addEventListener (Event.COMPLETE, onFullyLoaded);  privat funktion onFullyLoaded (e: Event): void

Steg 3: Inbäddning av resurserna

I stället för att ta emot våra resurser på en webbserver och ladda dem därifrån, kommer vi helt enkelt att integrera dem i SWF. Vi gör detta med hjälp av Flex SDK Bädda in märka. Om du inte har Flex SDK, eller har problem med den förinstallerade versionen, kan du ladda ner den här

Flash vet hur man hanterar vissa typer av filer, som min .png texturfil, men den känner inte till .dae filformat. Därför måste vi ange en sekundär parameter, MIME-typen, till application / octet-stream - det betyder att filen kommer att omvandlas till a Bytearray.

När du använder Bädda in taggen måste vi referera till den relativa (eller hela) sökvägen för filen och tilldela en klass till den här filen. Senare kan vi skapa en instans av den inbäddade filen med den här klassen.

Här kan du se koden:

 offentliga klassen EmbeddingDAE utökar BasicView [Embed (source = "mountain_bike.dae", mimeType = "application / octet-stream")] privat var bikeModelClass: Class; [Bädda in (source = "bike_texture.png")] privat var bikeTextureClass: Class; allmän funktion EmbeddingDAE ()

Du måste ersätta sökvägarna så att de matchar dina egna filer.

Steg 4: Hantera strukturen

För att använda vår textur med vår modell i Papervision3D måste vi göra tre saker:

Skapa en instans av texturen som en Bitmap - så vi kan få tillgång till det bitmapData.
Skapa en Material med detta bitmapData -- Detta kommer att fungera som en konsistens.
Skapa en MaterialsList, vilket kommer att länka vårt material till vår modell. Det kommer att behöva namnet på materialet som används för modellen. Om du bara har en textfil (som är vanligast) behöver du inte oroa dig för det här, använd bara "alla".

Här är koden som gör detta (läggs till onFullyLoaded ()):

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

Kom ihåg att importera:

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

Steg 5: Ladda modellen

För att ladda vår modell måste vi göra fyra saker:

Skapa en variabel för vår modell - Tänk på detta som ett tomt skal.
Skapa en instans av Bytearray innehåller vår modell.
Skapa en instans av variabeln för vår modell - skapa skalet.
Ladda vår modell genom att passera Bytearray och den MaterialsList till vårt tomma skal.

Skapa först variabeln:

 privat var cykelModelDAE: DAE;

Gör sedan resten (lägg till onFullyLoaded)

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

Kom ihåg att importera:

 importera flash.utils.ByteArray; importera org.papervision3d.objects.parsers.DAE;

Steg 6: Visa modellen

Nu är allt vi saknar kunna se modellen, som är en bit tårta. Jag justerar också kamerans position så att vi kan få en bra titt på denna modell. Då säger jag Papervision3D att återställa varje ram.

Här är koden (lägger till igen på onFullyLoaded ()):

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

Så här kommer det att se ut:

Steg 7: Lägga till rotation

Nu kan vi se modellen, men bara från en synvinkel. Det är lite tråkigt är det inte? Låt oss lägga till lite rotation! Här kommer vi att åsidosätta en funktion som kallas varje ram av Papervision3D-motorn.

 åsidosätta skyddad funktion onRenderTick (händelse: Event = null): void super.onRenderTick (event); bikeModelDAE.yaw (1);

Här är det än en gång:

Slutsats

Nu vet du hur man lägger till 3D-modeller för dina Flash-projekt, och det är faktiskt ganska enkelt. Jag hoppas att du tyckte om att läsa och fann det användbart.

Tack för att du läser!

Koda