Snelle tip een 3D-model weergeven met Papervision3D

In deze Snelle tip bekijken we hoe u een 3D-model kunt insluiten en weergeven in Flash, met behulp van Papervision3D.

Eindresultaat voorbeeld

Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:

Invoering

Als u deze zelfstudie wilt gebruiken, moet u een 3D-model hebben, geëxporteerd als een .dae-bestand en de structuur ervan, als een afbeeldingsbestand.

Ik ga dit low-poly mountainbike model van 3DOcean gebruiken, gemaakt door OneManBand (die ook deze nette 3D Object Viewer in AIR heeft gemaakt).

U moet een exemplaar van Papervision3D downloaden (u kunt ook een kopie vinden in de bronbestanden)

Stap 1: Het Flash-bestand maken

Maak een nieuw ActionScript 3-document met dimensies van 550x200 px en stel de framesnelheid in op 30 fps. Stel de documentklasse ook in op "EmbeddingDAE".

Maak een rechthoek die de hele fase beslaat en vul deze met een radiaal verloop van #FFFFFF tot # D9D9D9. Pas het verloop aan met de Gradient Transform Tool, zodat het er zo uitziet:

Stap 2: De documentklasse instellen

Maak een nieuw ActionScript 3-bestand met de naam "EmbeddingDAE". Deze klasse breidt een klasse uit van Papervision die alle basisfunctionaliteit heeft ingesteld.

Omdat we het 3D-model in uw SWF willen insluiten, moeten we ervoor zorgen dat het bestand volledig is geladen voordat u er gebruik van probeert te maken.

Hier is de code voor dat:

 pakket import flash.events.Event; import org.papervision3d.view.BasicView; public class EmbeddingDAE breidt BasicView uit openbare functie EmbeddingDAE () this.loaderInfo.addEventListener (Event.COMPLETE, onFullyLoaded);  private function onFullyLoaded (e: Event): void

Stap 3: De bronnen insluiten

In plaats van onze bronnen te hosten op een webserver en ze daar vanaf te laden, gaan we ze gewoon inbedden in de SWF. We doen dit door de Flex SDK te gebruiken insluiten label. Als u de Flex SDK niet hebt of problemen ondervindt met de vooraf geïnstalleerde versie, kunt u deze hier downloaden

Flash weet hoe om te gaan met bepaalde soorten bestanden, zoals het mijne .png structuurbestand, maar het kent het niet .dae bestandsformaat. Daarom moeten we een secundaire parameter, het MIME-type, instellen op application / octet-stream - dit betekent dat het bestand wordt omgezet in een ByteArray.

Bij gebruik van de insluiten tag, moeten we het relatieve (of volledige) pad van het bestand doorverwijzen en een klasse aan dit bestand toewijzen. Later kunnen we met deze klasse een exemplaar van het ingesloten bestand maken.

Hier kunt u de code zien:

 public class EmbeddingDAE breidt BasicView uit [Embed (source = "mountain_bike.dae", mimeType = "application / octet-stream")] private var bikeModelClass: Class; [Embed (source = "bike_texture.png")] private var bikeTextureClass: Class; openbare functie EmbeddingDAE ()

U moet de paden vervangen zodat ze overeenkomen met uw eigen bestanden.

Stap 4: omgaan met de textuur

Om onze textuur met ons model in Papervision3D te gebruiken, moeten we drie dingen doen:

Maak een exemplaar van de textuur als een Bitmap - dus we hebben toegang tot de bitmapData.
Maak een Materiaal hiermee bitmapData -- dit zal functioneren als een textuur.
Maak een MaterialsList, die ons materiaal zal koppelen aan ons model. Het heeft de naam nodig van het materiaal dat voor het model is gebruikt. Als je maar één texture-bestand hebt (wat het meest voorkomt), hoef je je hier geen zorgen over te maken, gebruik gewoon "all".

Hier is de code die dit doet (toegevoegd aan onFullyLoaded ()):

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

Vergeet niet om te importeren:

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

Stap 5: laad het model

Om ons model te laden, moeten we vier dingen doen:

Maak een variabele voor ons model - beschouw dit als een lege schaal.
Maak een instantie van de ByteArray met ons model.
Maak een instantie van de variabele voor ons model - de shell maken.
Laad ons model door de ByteArray en de MaterialsList naar onze lege schaal.

Maak eerst de variabele:

 private var bikeModelDAE: DAE;

Doe dan de rest (toevoegen aan onFullyLoaded)

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

Vergeet niet om te importeren:

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

Stap 6: Het model weergeven

Nu missen we alleen nog het model, wat een fluitje van een cent is. Ik ben ook de positie van de camera aan het aanpassen, zodat we dit model goed kunnen bekijken. Vervolgens vertel ik Papervision3D om elk frame opnieuw te renderen.

Hier is de code (opnieuw toe te voegen aan onFullyLoaded ()):

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

Dit is hoe het eruit zal zien:

Stap 7: Rotatie toevoegen

Nu kunnen we het model zien, maar slechts vanuit één oogpunt. Dat is een beetje saai, toch? Laten we wat rotatie toevoegen! Hier gaan we een functie overschrijven die elk frame door de Papervision3D-engine wordt genoemd.

 override protected function onRenderTick (event: Event = null): void super.onRenderTick (event); bikeModelDAE.yaw (1);

Hier is het weer:

Conclusie

Nu weet u hoe u 3D-modellen aan uw Flash-projecten kunt toevoegen, en het is eigenlijk vrij eenvoudig. Ik hoop dat je het leuk vond om te lezen en het nuttig vond.

Bedankt voor het lezen!

Code