Molehill aka Stage3D will be the next revolution for Flash and AIR. The new Adobe Flash Player will fully support 3D by allowing developers to use a set of low-level GPU-accelerated APIs. What’s pretty cool is that the 3D capabilities will be available also available for Mobile, TV and Desktop-based AIR applications. The best way to realize 3D visualization is to use a framework. My favorite one is Away3D. In this tutorial you will learn how to load a MD5 object with Away 3D 4 (Broomstick) with the Flex 4.5 SDK and the new Molehill.
The problem is that I’m updating quite often my Away 3D sources and after a while I’ve noticed that the following method to load a MD5 using the ResourceManager (http://away3d.com/livedocs/broomstick/Away3D/away3d/loading/ResourceManager.html) has disappeared, and the current version of Away 3D now uses the AssetLibrary classes. This is due to the fact that the guys – (btw. they do a really nice job preparing the framework for Molehill) – at Away3D are continuously updating the versions and that the Away3D 4.0.0 in the download section is outdated. So you need to download it to from the SVN.
Kind of confusing if you want to start learning how to use, but here’s the solution:
Prerequisite:
- Away3D 4.0.0 (Broomstick) from the SVN (http://away3d.googlecode.com/svn/trunk/) and the
- Flash Incubator Build http://labs.adobe.com/downloads/flashplatformruntimes_incubator.html
- Flex 4.5 SDK Flex SDK 4.5.0.19786 along with the Flash Player Incubator Global SWC
Source code
package
{
import away3d.containers.ObjectContainer3D;
import away3d.containers.View3D;
import away3d.entities.Mesh;
import away3d.events.AssetEvent;
import away3d.events.LoaderEvent;
import away3d.library.AssetLibrary;
import away3d.library.assets.AssetType;
import away3d.lights.DirectionalLight;
import away3d.lights.PointLight;
import away3d.loaders.Loader3D;
import away3d.loaders.misc.AssetLoaderContext;
import away3d.loaders.parsers.MD5MeshParser;
import away3d.loaders.parsers.Parsers;
import away3d.materials.BitmapFileMaterial;
import away3d.materials.BitmapMaterial;
import away3d.materials.ColorMaterial;
import away3d.primitives.Cube;
import away3d.tools.LightsHelper;
import away3d.tools.MeshHelper;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Vector3D;
import flash.net.URLRequest;
[SWF(width="1024", height="576", frameRate="60")]
public class Main extends Sprite
{
// Creating the mesh that will be the monster
private var monsterMesh:Mesh = new Mesh();
private var view3D:View3D;
public function Main()
{
view3D = new View3D();
addChild(view3D);
var material:ColorMaterial = new ColorMaterial(0xFF0000,1);
view3D.camera.z = -500;
view3D.camera.y = 200
// Loads the MD5 by using the AssetLibrary and not the ResourceManager
AssetLibrary.enableParser(MD5MeshParser);
AssetLibrary.addEventListener(AssetEvent.ASSET_COMPLETE, onAssetCompleteHandler);
AssetLibrary.load(new URLRequest("hellknight.md5mesh"));
}
public function onAssetCompleteHandler(evt:AssetEvent ):void
{
trace("3D Model loaded" + evt.asset.assetType);
if(evt.asset.assetType == AssetType.MESH)
{
monsterMesh = evt.asset as Mesh;
monsterMesh.scale(3);
// Setting up the material for the monster
var bodyFileMaterial:BitmapFileMaterial = new BitmapFileMaterial("hellknight.jpg", false);
var myLightPoint:DirectionalLight = new DirectionalLight();
myLightPoint.color = 0x00FFCC;
myLightPoint.y = -1000;
myLightPoint.z = -1000;
var mySecLightPoint:PointLight = new PointLight();
mySecLightPoint.radius = 10;
mySecLightPoint.color = 0xFFCC00;
bodyFileMaterial.gloss = 20;
bodyFileMaterial.specular = 1.5;
bodyFileMaterial.ambientColor = 0x505060;
// Loading the specular and normal maps for the bodyFileMaterial
var specularMapFileMaterial:BitmapFileMaterial = new BitmapFileMaterial("hellknight_s.png", false);
var normalMapFileMaterial:BitmapFileMaterial = new BitmapFileMaterial("hellknight_local.png", false);
bodyFileMaterial.specularMap = specularMapFileMaterial.bitmapData;
bodyFileMaterial.normalMap = normalMapFileMaterial.bitmapData;
// Applying the material to the monster's mesh
monsterMesh.material = bodyFileMaterial;
monsterMesh.material.lights = [myLightPoint,mySecLightPoint];
view3D.scene.addChild(monsterMesh);
view3D.scene.addChild(myLightPoint);
addEventListener(Event.ENTER_FRAME,onEnterFrameHandler);
}
}
private function onEnterFrameHandler(evt:Event) : void
{
// Rotate the monster
monsterMesh.rotationY += 0.5;
view3D.render();
}
}
}
Here’s my source code on how to load a MD5 with Away 3D Broomstick . The MD5 model can be found in the away SVN trunk.
Download the source code (Flash Develop project – be sure to correctly link to the Away3D sources)
Update:
Many users asked me how to launch the SWF in a window and not in the Mozilla Firefox. Here are my settings:
Additional resources and links:
Digging more into the Molehill APIs by Thilbault Imbert
MD5Mesh and MD5Anim files formats
Update (Flash Player 11 and Away3D FP11 branch)
When you are using Flash Player 11 you must use the FP11 branch of Away3D (https://github.com/away3d/away3d-core-fp11). As Away3D is still in development and Flash Player 11 not officially released, there might be some problems with the above code. One problem comes from adding the light; you will get this error:
Error: Error #3663: L’échantillonneur 0 lie une texture non définie. at flash.display3D::Context3D/drawTriangles() at away3d.materials.passes::MaterialPassBase/render()[
To solve this comment the following line:
monsterMesh.material.lights = [myLightPoint,mySecLightPoint];