Posts Tagged ‘PV3D’

For one of the most basic shader examples, we will be learning about the Composite Shader, this basicaly gives your object a solid color with wireframe showing.

Composite Material Example

Composite Material Example

If you are a beginner to PV3D/Flash, My examples will be working from my initial post on Shaders which can be found here.
Otherwise please feel free to continue. 

Firstly we will need to import all necessary classes

package compositeMat {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;

	import org.papervision3d.cameras.CameraType;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.special.CompositeMaterial;
	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;

Next we will pass the class, and the variables that we will be using

public class compositeMat extends Sprite
		private var view:BasicView;
		private var color:ColorMaterial;
		private var wire:WireframeMaterial;
		private var composite:CompositeMaterial;
		private var sphere:Sphere;

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

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

And we will now finish off with our functions

public function compositeMat()
//controls camera size initialises BasicView
view = new BasicView(300, 300, false, false, CameraType.FREE);
//Sets up Rendering Engine
view.renderer = new BasicRenderEngine(); addChild(view);
//Select colours for Wireframe and object
color = new ColorMaterial(0x444444);
wire = new WireframeMaterial(0x888888);
composite = new CompositeMaterial();
//Loading your .dae File
daeFile = "yourdaeFileName.dae";
dae = new DAE();
//adding the composite shader ontop of your DAE model
dae.load(daeFile,  new MaterialsList ( { all:composite } ));
//sometimes object needs to be scaled
dae.scale = 100;

//adding the object to the scene

//Formating and adding text label to the scene.
format = new TextFormat("Arial", 10, 0xFFFFFF);
tf = new TextField(); tf.width = 230; tf.text = "Composite Material Shader";
tf.x = 10; tf.y = 10; tf.setTextFormat(format);
addEventListener(Event.ENTER_FRAME, onRenderViewport);

private function onRenderViewport(e:Event):void
//If you want your object to rotate on its axis
//Finaly render

Now if you are following this example on from my Introductory post on Shaders, you will need to import this .as file into you file by typing in the following:

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

	import compositeMat.compositeMat; //IMPORTANT importing the Shader AS file
	import flash.display.Sprite;

	[SWF (width="800", height="600", framerate="25", backgroundColor="0x333333")];

	public class MainShader extends Sprite {
		private var composite:compositeMat;

		public function MainShader() {
			composite = new compositeMat();

Now that you have imported your file into you file, which is linked to whateveryoucallyourFLA.fla file you can press ctrl + shift + Enter to compile and debug your code or
ctrl + Enter to run your movie.

If you enjoyed this tutorial, why not Subscribe to my RSS feeds for all the latest updates on this blog, or use the Share buttons below!

This is to be the first of many tutorials on different shaders, and how they can be applied to dae files. Most tutorials you will find online explain how to add shaders to basic papervision objects, but not to DAE (COLLADA) files.

To begin with, we will start to learn about the simpler shaders, such as wireframe and solid colour shaders and work up to more complicated shaders such as envMapMaterial (environment material) shaders and Movie clip shaders.

All tutorials will be explained with the COMPLETE source code to allow you to get it going on your own machine!

Creating the initial project .Fla and .as Global files

These files will help link in all shader files so that you can learn how to add different shaders to more that one dae file, or different shaders to the same dae file.

first off, we will create an empty .FLA file (this will allow us to read the .as file we will make
and will help us run it!)

File > New (ctrl+N)
select Flash File (Actionscript3) and click ok.
Now save that under whatever name you like.

Now we need to create an Actionscript file (.as)
File > new (Ctrl+N)
select Actionscript File and click ok.
Now save this using whatever name you like – I will call it

It is in this file where we will write our code. but first we need to link
it to the .FLA file we made earlier.
click on the tab to open your .FLA file and look near the bottom of your screen, in the
properties tab, for something called Document Class in the text box to the right of it, enter
your .as file name – in this case “Shader” (without the quotes) and click on the little pencil icon to scan for the file.

You will see a pop up message, just click OK to close it. 

In this Tutorial, we now have yourfile.FLA and a file.

The file will be the Main file that will link all the other .as files

To find the Relevant Shader Tutorials, please use the drop down menu from the tabbed links at the top of this page, titled Papervision Tutorials.

This tutorial will show you a quick and easy way of allowing your objects to spin/rotate automaticaly.

Firstly you need to either import or create your shape.

creating a plane:

private var object:Plane;...object = new Plane(...)

If you need a more detailed explanation of creating standard shapes, please visit this tutorial for more information.

Importing a .DAE:

public class Example extends BasicView
var dae:DAE;
var daeFile:String;
var daeMaterialName:String;

public function Mainscale()
daeFile = "yourDAEfile.dae";
daeMaterialName = "YourTextureName";
dae = new DAE();
dae.scale = 120;

after you have imported and added your Object to the scene, you need to add a loop in the code (i.e an event listener) then call the function.
so stragiht after we have added the object to the scene i.e using scene.addChild(yourobjectName);

add an event listener:

addEventListener(Event.ENTER_FRAME, loop3D);

Then create a new function, that listens for the event:

private function loop3D(e:Event):void{
//either use
yourobjectName.yaw(2); //changing the number will increase or decrease the speed
//OR use

And that should do it!
need any extra help? leave a comment, and i will get back to you!

Here is an example code, of how to enable mouse and keyboard interaction within your papervision actionscript file.

I know I was lazy, and have not put any comments in the source code, however if you need any extra help or explanations, please leave a comment, and I WILL get back to you

May promise a better full tutorial later on….

import flash.display.Sprite;
import flash.geom.Point;
//Import Camera, Scene, etc..
import org.papervision3d.view.BasicView;
//Mouse Movements
//rotation calculations
import org.papervision3d.core.math.Matrix3D;
import org.papervision3d.core.math.Number3D;

*@Author: Thierry Zoghbi
*@Date: 2009.

[SWF(width="800", height="600", backgroundColor="#0066F", frameRate="25")]

public class Mainsack extends BasicView

private var container : DisplayObject3D;
private var previousMousePoint : Point = new Point();
private var targetScale : Number = 1;
private static const FORWARD:Number3D = new Number3D(0, 0, 1);

public function Mainsack()
var yourobject = new Collada("yourDAEfile.dae");

this.stage.doubleClickEnabled = true;
this.stage.addEventListener( MouseEvent.DOUBLE_CLICK, onDoubleClick );
this.stage.addEventListener( MouseEvent.MOUSE_DOWN, whenMouseDown );
this.stage.addEventListener( MouseEvent.MOUSE_WHEEL, whenMouseWheel );
this.stage.addEventListener( KeyboardEvent.KEY_DOWN, whenKeyDown );


private function whenKeyDown( event : KeyboardEvent ) : void
trace( event.keyCode );
switch ( event.keyCode )
case 187: //
case 107: //
zoom( 3 );
case 189: // –
case 109: // –
zoom( -3 );
case 82: // r (reset)

private function whenMouseWheel( event : MouseEvent ) : void
zoom( );

private function onDoubleClick( event : MouseEvent ) : void
zoom( 10 );

private function whenMouseDown( event : Event ) : void
previousMousePoint = new Point(viewport.containerSprite.mouseX, viewport.containerSprite.mouseY);
this.stage.addEventListener( MouseEvent.MOUSE_MOVE, whenMouseMove );
this.stage.addEventListener( MouseEvent.MOUSE_UP, whenMouseUp );

private function whenMouseUp( event : Event ) : void
this.stage.removeEventListener( MouseEvent.MOUSE_MOVE, whenMouseMove );
this.stage.removeEventListener( MouseEvent.MOUSE_UP, whenMouseUp );

private function whenMouseMove( event : Event ) : void
var currentMousePoint:Point = new Point(viewport.containerSprite.mouseX, viewport.containerSprite.mouseY);

var difference:Point = currentMousePoint.subtract(previousMousePoint);
var vector:Number3D = new Number3D(difference.x, difference.y, 0);

var rotationAxis:Number3D = Number3D.cross(vector, FORWARD);

var distance:Number = Point.distance(currentMousePoint, previousMousePoint);
var rotationMatrix:Matrix3D = Matrix3D.rotationMatrix(rotationAxis.x, -rotationAxis.y, rotationAxis.z, distance/(600*Math.pow(container.scale, 5)));
container.transform.calculateMultiply3x3(rotationMatrix, container.transform);

//this line used to apply transform to actual rotation values, so that if you change scale, the changes are persisted

previousMousePoint = currentMousePoint

trace( container.rotationX, container.rotationY, container.rotationZ, container.scale );

private function zoom( delta : Number ) : void
targetScale = targetScale (delta * .01);
targetScale = Math.max( targetScale, .5 );
targetScale = Math.min( targetScale, 1.6 );
Tweener.addTween( this, {sceneScale:targetScale, time:1, transition:"easeOutQuart"} )

public function resetView() : void
Tweener.addTween( container, {time:3, rotationX:0, rotationY:0, rotationZ:0, transition:"easeOutQuart"} )
//Tweener.addTween( container, {time:3, rotationX:-45, rotationY:0, rotationZ:0, transition:"easeOutQuart"} )
Tweener.addTween( this, {sceneScale:1, time:3, transition:"easeOutQuart"} )

public function set sceneScale( value : Number ) : void
container.scale = value;

public function get sceneScale() : Number
return container.scale;


This is a LIVE completed DEMO (of the test video), for what could be achieved with PV3D and Flash AS3 –

click this link to try it out

File  is about 1.3MB so would take about 10sec to load, i havent put in a pre-loader, so just give it a few seconds (click on the screen) and you will soon see the obect and be able to play around with it!
>most tutorials needed to accomplish this can be found on this blog, from the ground up – if you need any help with anything just leave me a comment!

importing dae Tutorial
Mouse and Keyboard interaction Tutorial

Follow me on Twitter
free counters
PayPal Donation
If you like this blog and the help it has given you, why not donate for this good cause? Click on the button below to pay Safely and Securely through PayPal.