Thierry’s Technical Tutorials

This Part of the Shaders Tutorial series will show you how to add Flat shader material to either a dae imported object or to a basic primitive.

If you are a novice, it is advised that you follow this tutorial from the initial section that can be found here, which explains how to set up the files and the scene. Otherwise please read on.

For those following on the shaders tutorial series, i will be calling this .as file flatMat

to begin with we must begin the package and import the relevant classes

package flatMat {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFormat;

	import org.papervision3d.cameras.CameraType;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.materials.shadematerials.CellMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.view.BasicView;

        import org.papervision3d.objects.parsers.DAE;
        import org.papervision3d.objects.DisplayObject3D;

now we must begin the class, and add the variables that we will be using

public class flatMat extends Sprite
	{
		private var view:BasicView;
		private var flat:FlatShadeMaterial;
		private var light:PointLight3D;
		private var sphere:Sphere;
		private var angle:Number = new Number(0);

		private var tf:TextField;
		private var format:TextFormat;

		private var dae:DAE;
                private var daeFile:String;
                private var daeMaterialName:String;

This is where the fun begins! we will create several functions that will import the dae file, apply lighting and the shader material, then add some rotation to the entire object.

public function flatMat()
	{
//we set up our viewport, camera & renderer
	view = new BasicView(300, 300, false, false, CameraType.FREE);
	view.renderer = new BasicRenderEngine(); addChild(view);
//we now need to set up our light source
	light = new PointLight3D(true); light.z = -800; light.y = 300;
//now set up the Flat shader Material
	flat = new FlatShadeMaterial(light, 0xFFFFFF, 0xEEC900);
/*If you would like to apply this shader material to a basic primitive you
would need to use the following code
	sphere = new Sphere(flat, 150, 8, 8);
	view.scene.addChild(sphere); */
//however for applying to a dae file, we need to import it first
	daeFile = "newscale.dae";
	dae = new DAE();
//now we apply the shader to the dae object
        dae.load(daeFile, new MaterialsList ( { all:flat } ));
//sometime the object is too small or too big, and needs
//to be scaled / rotated accordingly
        dae.scale = 100;
	dae.rotationY=90;
//now we must add our object to the scene
	view.scene.addChild(dae);

//adding text above the object
	format = new TextFormat("Arial", 10, 0xFFFFFF);
	tf = new TextField(); tf.width = 200; tf.text = "Flat Shade Material";
	tf.x = 10; tf.y = 10; tf.setTextFormat(format);
	addChild(tf);
//we must add an event listener, which will listen to the application when
//it first enters the first frame of the scene, it need to rotate the light
	addEventListener(Event.ENTER_FRAME, onRenderViewport);
}
//in this function, we either rotate the object, or rotate the light,
//which one you choose depends on what you are trying to achieve
	private function onRenderViewport(e:Event):void
	{
		//dae.rotationY++;
		animateLight(); //call the function animateLight below
		view.singleRender();
	}
//this function is the basic maths neeeded to rotate a light source
//in a circular fashion.
	private function animateLight():void
	{
		angle += 4 * (Math.PI/180);
		light.x = Math.cos(angle) * 800;
		light.z = Math.sin(angle) * 800;
	}
    }
}

If you have been following this tutorial series from the beginning, you will want to add the following code to your MainShader.as file that you created, in order to run your movie.

package {
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.view.BasicView;
	import flatMat.flatMat;

	public class Mainscale extends Sprite {
		private var flat:flatMat;

		public function Mainscale() {
			flat = new flatMat();
			flat.y = 300;
			addChild(flat);
		}
	}
}

Be Sociable, Share!

• 
• 

2 Responses to “Flat Shader Material for dae object”