Quick Tip: Displaying a 3D Model With Papervision3D


In this Quick Tip we'll take a look at how to embed and display a 3D model in Flash, using Papervision3D.

Final Result Preview

Let's take a look at the final result we will be working towards:


To use this tutorial you will need to have a 3D model, exported as a .dae file, and its texture, as an image file.

I'm going to be using this low-poly mountain bike model from 3DOcean, created by OneManBand (who also created this neat 3D Object Viewer in AIR).

You will need to download a copy of Papervision3D (you can also find a copy in the source files)

Step 1: Creating the Flash File

Create a new ActionScript 3 document with dimensions of 550x200px and set the frame rate to 30fps. Also, set the document class to "EmbeddingDAE".

Create a rectangle that covers the whole stage, and fill it with a radial gradient of #FFFFFF to #D9D9D9. Adjust the gradient with the Gradient Transform Tool, so it looks like this:

Step 2: Setting up the Document Class

Create a new ActionScript 3 file and name it "EmbeddingDAE". This class will extend a class from Papervision that has all the basic functionality set up.

As we're going to be embedding the 3D model in your SWF, we need to make sure the file has been fully loaded before trying to make use of it.

Here is the code for that:

	import org.papervision3d.view.BasicView;
	public class EmbeddingDAE extends BasicView
		public function EmbeddingDAE() 
			this.loaderInfo.addEventListener ( Event.COMPLETE, onFullyLoaded ) ;
		private function onFullyLoaded(e:Event):void 


Step 3: Embedding the Resources

Instead of hosting our resources at a webserver and loading them from there, we're simply going to embed them in the SWF. We do this by using the Flex SDK Embed tag. If you don't have the Flex SDK, or are having trouble with the pre-installed version, you can download it here

Flash knows how to deal with certain types of files, like my .png texture file, but it doesn't know the .dae file format. Therefore we have to set a secondary parameter, the MIME type, to application/octet-stream - this means the file will be transformed into a ByteArray.

When using the Embed tag, we need to be referring the relative (or full) path of the file, and assigning a class to this file. Later we can create an instance of the embedded file using this class.

Here you can see the code:

public class EmbeddingDAE extends BasicView
	[Embed(source="mountain_bike.dae", mimeType="application/octet-stream")]
	private var bikeModelClass:Class;
	private var bikeTextureClass:Class;
	public function EmbeddingDAE()

You will need to replace the paths so they match your own files.

Step 4: Handling the Texture

To use our texture with our model in Papervision3D, we need to do three things:

  1. Create an instance of the texture as a Bitmap - so we can access its bitmapData.
  2. Create a Material with this bitmapData -- this will function like a texture.
  3. Create a MaterialsList, which will link our material to our model. It will need the name of the material used for the model. If you only have one texture file (which is most common) you do not need to worry about this, just use "all".

Here is the code doing this (added to onFullyLoaded()):

var bitmap:Bitmap = new bikeTextureClass ( ) ;

var bitmapMaterial:BitmapMaterial = new BitmapMaterial ( bitmap.bitmapData ) ;

var materialsList:MaterialsList = new MaterialsList ( ) ;
materialsList.addMaterial ( bitmapMaterial, "all" ) ;

Remember to import:

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

Step 5: Load the Model

To load our model, we need to do four things:

  1. Create a variable for our model - think of this as an empty shell.
  2. Create an instance of the ByteArray containing our model.
  3. Create an instance of the variable for our model - creating the shell.
  4. Load our model by passing the ByteArray and the MaterialsList to our empty shell.

First create the variable:

private var bikeModelDAE:DAE;

Then do the rest (adding to onFullyLoaded)

var byteArray:ByteArray = new bikeModelClass ( ) ;

bikeModelDAE = new DAE ( ) ;
bikeModelDAE.load ( byteArray, materialsList ) ;

Remember to import:

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

Step 6: Displaying the Model

Now all we are missing is being able to see the model, which is a piece of cake. I'm also adjusting the position of the camera so we can get a good look at this model. Then I'm telling Papervision3D to re-render every frame.

Here's the code (again adding to onFullyLoaded()):

this.scene.addChild ( bikeModelDAE ) ; = 500;

this.startRendering ( ) ;

This is what it will look like:

Step 7: Adding Rotation

Now we can see the model, but only from one point of view. That is a little dull isn't it? Lets add some rotation! Here we're going to override a function that is being called every frame by the Papervision3D engine.

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

Here it is once again:


Now you know how to add 3D models to your Flash projects, and it is actually quite simple. I hope you enjoyed reading and found it useful.

Thanks for reading!

Related Posts
  • Code
    Android SDK
    Create a Music Player on Android: Song Playback0d63m preview image@2x
    In this series, we are creating a music player on Android using the MediaPlayer and MediaController classes. In the first part, we created the app and prepared the user interface for playback. We presented the list of songs on the user device and specified a method to execute when the user makes a selection. In this part of the series, we will implement a Service class to execute music playback continuously, even when the user is not directly interacting with the application.Read More…
  • Code
    Android SDK
    Create a Music Player on Android: Project Setup0d63m preview image@2x
    The Android platform provides resources for handling media playback, which your apps can use to create an interface between the user and their music files. In this tutorial series, we will create a basic music player application for Android. The app will present a list of songs on the user device, so that the user can select songs to play. The app will also present controls for interacting with playback and will continue playing when the user moves away from the app, with a notification displayed while playback elapses.Read More…
  • Game Development
    Write Once, Publish Everywhere With HaxePunk: Making a GamePreviewretinaimage
    You've probably had this experience before: you hear about an awesome game, but then you find out that it's only coming out on the one platform that you don't own. It doesn't have to be this way. In this tutorial, you will learn how to use Haxe to make a game in one development platform that can target multiple gaming platforms, including Linux, Mac, Windows, iOS, Android, and Flash.Read More…
  • Code
    Android SDK
    Create a Hangman Game: User InterfaceAndroid hangman game preview retina
    In this series, we are creating a Hangman game for the Android platform. In the first tutorial, we set the application up to present two screens to the user and we also made a start with the user interface elements, the images and shape drawables to be precise. In the second tutorial, we will zoom in on the game's layout.Read More…
  • Code
    Mapping Relational Databases and SQL to MongoDBMongodb retina preview
    NoSQL databases have emerged tremendously in the last few years owing to their less constrained structure, scalable schema design, and faster access compared to traditional relational databases (RDBMS/SQL). MongoDB is an open source document-oriented NoSQL database which stores data in the form of JSON-like objects. It has emerged as one of the leading databases due to its dynamic schema, high scalability, optimal query performance, faster indexing and an active user community.Read More…
  • Code
    Validation and Exception Handling: From the UI to the BackendProcedural to oop php retina preview
    Sooner or later in your programming career you will be faced with the dilemma of validation and exception handling. This was the case with me and my team also. A couple or so years ago we reached a point when we had to take architectural actions to accommodate all the exceptional cases our quite large software project needed to handle. Below is a list of practices we came to value and apply when it comes to validation and exception handling.Read More…