Tag Archive for 'Tutorial'Page 2 of 2

Basic Mouse Interaction (v2)

Published

on November 23, 2009

in Actionscript 3 Papervision, Examples, Papervision 3D, Source Code and Tutorials

. 9 Comments

In the previous tutorial we showed you how to load a 3D model into Papervision. Now we are just going to show you how to rotate that model based off of your mouse movements.

The process is very simple. Since our render function is like the engine of our animations that is where we will add the code for the rotation. Later we'll cover animating objects via TweenLite / TweenMax.

PLAIN TEXT

Actionscript:

override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
cow.rotationY = stage.mouseX / sceneWidth * 360
}

When you first start moving objects in Papervision you may notice that rotationY and rotationX do not act as you might think they would. In flash you would think of something on a Y axis as going up and down and X as left and right. With Papervision RotationY rotates and object on its Y axis (left /right) and RotationX rotates an object on it's X axis (top / bottom).

Here is the full code:

PLAIN TEXT

Actionscript:

package
{
import flash.events.Event;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.Collada;
import org.papervision3d.view.BasicView;
public class Main extends BasicView
{
protected var cow:DisplayObject3D;
protected var materialList:MaterialsList;
protected var bitmapFileMaterial:BitmapFileMaterial;
protected var sceneWidth:Number;
protected var sceneHeight:Number;
public function Main()
{
super();
init();
createChildren();
startRendering();
}
protected function init():void
{
sceneWidth = stage.stageWidth
}
public function createChildren():void
{
//Setup the materials manually (sometimes the dae handles this without issue)
materialList = new MaterialsList();
bitmapFileMaterial = new BitmapFileMaterial("daeModel/Cow.png");
materialList.addMaterial(bitmapFileMaterial,"all");
//Create the new Collada Object with materialList
cow = new Collada("daeModel/cow.dae",materialList);
///Set some properties
cow.moveDown(150);
cow.scale = 3;
cow.pitch( -10);
//Add to scene
scene.addChild(cow);
}
override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
cow.rotationY = stage.mouseX / sceneWidth * 360
}
}
}

Delicious Digg This Post Facebook Stumble This Post

Papervision 3D Controlling Top and Bottom Cylinder Materials

Published

Charlie

on August 17, 2009

in AS3, Actionscript 3 Papervision, Actionscript 3.0, Examples, Papervision, Papervision 3D, Source Code and Tutorials

. 1 Comment

custom-materials-cylinder
While working on a project this morning I came across the need to have a different material applied to a primitive cylinder. After digging through the Cylinder source code I came across these lines

PLAIN TEXT

Actionscript:

if (fBottomFace) aFace.push( new Triangle3D(this, [aP1, aP3, aP2], matInstance, [aP1uv, aP3uv, aP2uv]) );
//and
if (fTopFace) aFace.push( new Triangle3D(this, [aP1, aP2, aP3], matInstance, [aP1uv, aP2uv, aP3uv]));

Since matInstance is just a material it can easily be replaced. I was in a hurry so I decided to just directly modified the class; not the greatest idea but it worked.

PLAIN TEXT

Actionscript:

if (j == 0) {
if(bottomMat)
{
if (fBottomFace) aFace.push( new Triangle3D(this, [aP1, aP3, aP2], bottomMat, [aP1uv, aP3uv, aP2uv]) );
}
else
{
if (fBottomFace) aFace.push( new Triangle3D(this, [aP1, aP3, aP2], matInstance, [aP1uv, aP3uv, aP2uv]) );
}
}
else
{
if(topMat)
{
if (fTopFace) aFace.push( new Triangle3D(this, [aP1, aP2, aP3], topMat, [aP1uv, aP2uv, aP3uv]));
}
else
{
if (fTopFace) aFace.push( new Triangle3D(this, [aP1, aP2, aP3], matInstance, [aP1uv, aP2uv, aP3uv]));
}
}

Here is the new way to create the Cylinder:

PLAIN TEXT

Actionscript:

var cyl:Cylinder = new Cylinder(new ColorMaterial(0x000000),200,900,5,20,200,true,true,new ColorMaterial(0x8ad51f),new ColorMaterial(0x00FF00));

Here is the full modified Papervision Cylinder.as class:

PLAIN TEXT

Actionscript:

package org.papervision3d.objects.primitives {
import org.papervision3d.Papervision3D;
import org.papervision3d.core.geom.*;
import org.papervision3d.core.geom.renderables.Triangle3D;
import org.papervision3d.core.geom.renderables.Vertex3D;
import org.papervision3d.core.math.NumberUV;
import org.papervision3d.core.proto.*;
/**
* The Cylinder class lets you create and display Cylinders.
*
* The Cylinder is divided in vertical and horizontal segment, the smallest combination is two vertical and three horizontal segments.
*/
public class Cylinder extends TriangleMesh3D
{
/**
* Number of segments horizontally. Defaults to 8.
*/
public var segmentsW :Number;
/**
* Number of segments vertically. Defaults to 6.
*/
public var segmentsH :Number;
/**
* Default radius of Cylinder if not defined.
*/
static public const DEFAULT_RADIUS :Number = 100;
/**
* Default height if not defined.
*/
static public const DEFAULT_HEIGHT :Number = 100;
/**
* Default scale of Cylinder texture if not defined.
*/
static public const DEFAULT_SCALE :Number = 1;
/**
* Default value of gridX if not defined.
*/
static public const DEFAULT_SEGMENTSW :Number = 8;
/**
* Default value of gridY if not defined.
*/
static public const DEFAULT_SEGMENTSH :Number = 6;
/**
* Minimum value of gridX.
*/
static public const MIN_SEGMENTSW :Number = 3;
/**
* Minimum value of gridY.
*/
static public const MIN_SEGMENTSH :Number = 1;
public var topFace
// ___________________________________________________________________________________________________
// N E W
// NN NN EEEEEE WW WW
// NNN NN EE WW WW WW
// NNNNNN EEEE WWWWWWWW
// NN NNN EE WWW WWW
// NN NN EEEEEE WW WW
/**
* Create a new Cylinder object.
*
* @param material A MaterialObject3D object that contains the material properties of the object.
*
* @param radius [optional] - Desired radius.
*
* @param segmentsW [optional] - Number of segments horizontally. Defaults to 8.
*
* @param segmentsH [optional] - Number of segments vertically. Defaults to 6.
*
* @param topRadius [optional] - An optional parameter for con- or diverging cylinders.
*
* @param topFace [optional] - An optional parameter specifying if the top face of the cylinder should be drawn.
*
* @param bottomFace [optional] - An optional parameter specifying if the bottom face of the cylinder should be drawn.
*
*/
public function Cylinder( material:MaterialObject3D=null, radius:Number=100, height:Number=100, segmentsW:int=8, segmentsH:int=6, topRadius:Number=-1, topFace:Boolean=true, bottomFace:Boolean=true,topMat:MaterialObject3D = null ,bottomMat:MaterialObject3D = null)
{
super( material, new Array(), new Array(), null );
this.segmentsW = Math.max( MIN_SEGMENTSW, segmentsW || DEFAULT_SEGMENTSW); // Defaults to 8
this.segmentsH = Math.max( MIN_SEGMENTSH, segmentsH || DEFAULT_SEGMENTSH); // Defaults to 6
if (radius==0) radius = DEFAULT_RADIUS; // Defaults to 100
if (height==0) height = DEFAULT_HEIGHT; // Defaults to 100
if (topRadius==-1) topRadius = radius;
var scale :Number = DEFAULT_SCALE;
buildCylinder( radius, height, topRadius, topFace, bottomFace,topMat,bottomMat );
}
private function buildCylinder( fRadius:Number, fHeight:Number, fTopRadius:Number, fTopFace:Boolean, fBottomFace:Boolean ,topMat:MaterialObject3D,bottomMat:MaterialObject3D):void
{
var matInstance:MaterialObject3D = material;
var i:Number, j:Number, k:Number;
var iHor:Number = Math.max(MIN_SEGMENTSW, this.segmentsW);
var iVer:Number = Math.max(MIN_SEGMENTSH, this.segmentsH);
var aVertice:Array = this.geometry.vertices;
var aFace:Array = this.geometry.faces;
var aVtc:Array = new Array();
for (j=0;j<(iVer+1);j++) { // vertical
var fRad1:Number = Number(j/iVer);
var fZ:Number = fHeight*(j/(iVer+0))-fHeight/2;//-fRadius*Math.cos(fRad1*Math.PI);
var fRds:Number = fTopRadius+(fRadius-fTopRadius)*(1-j/(iVer));//*Math.sin(fRad1*Math.PI);
var aRow:Array = new Array();
var oVtx:Vertex3D;
for (i=0;i<iHor;i++) { // horizontal
var fRad2:Number = Number(2*i/iHor);
var fX:Number = fRds*Math.sin(fRad2*Math.PI);
var fY:Number = fRds*Math.cos(fRad2*Math.PI);
//if (!((j==0||j==iVer)&&i>0)) { // top||bottom = 1 vertex
oVtx = new Vertex3D(fY,fZ,fX);
aVertice.push(oVtx);
//}
aRow.push(oVtx);
}
aVtc.push(aRow);
}
var iVerNum:int = aVtc.length;
var aP4uv:NumberUV, aP1uv:NumberUV, aP2uv:NumberUV, aP3uv:NumberUV;
var aP1:Vertex3D, aP2:Vertex3D, aP3:Vertex3D, aP4:Vertex3D;
for (j=0;j<iVerNum;j++) {
var iHorNum:int = aVtc[j].length;
for (i=0;i<iHorNum;i++) {
if (j>0&&i>=0) {
// select vertices
var bEnd:Boolean = i==(iHorNum-0);
aP1 = aVtc[j][bEnd?0:i];
aP2 = aVtc[j][(i==0?iHorNum:i)-1];
aP3 = aVtc[j-1][(i==0?iHorNum:i)-1];
aP4 = aVtc[j-1][bEnd?0:i];
// uv
var fJ0:Number = j / iVerNum;
var fJ1:Number = (j-1) / iVerNum;
var fI0:Number = (i+1) / iHorNum;
var fI1:Number = i / iHorNum;
aP4uv = new NumberUV(fI0,fJ1);
aP1uv = new NumberUV(fI0,fJ0);
aP2uv = new NumberUV(fI1,fJ0);
aP3uv = new NumberUV(fI1,fJ1);
// 2 faces
aFace.push( new Triangle3D(this, [aP1,aP2,aP3], matInstance, [aP1uv,aP2uv,aP3uv]) );
aFace.push( new Triangle3D(this, [aP1,aP3,aP4], matInstance, [aP1uv,aP3uv,aP4uv]) );
}
}
if (j==0||j==(iVerNum-1)) {
for (i=0;i<(iHorNum-2);i++) {
// uv
var iI:int = Math.floor(i/2);
aP1 = aVtc[j][iI];
aP2 = (i%2==0)? (aVtc[j][iHorNum-2-iI]) : (aVtc[j][iI+1]);
aP3 = (i%2==0)? (aVtc[j][iHorNum-1-iI]) : (aVtc[j][iHorNum-2-iI]);
var bTop:Boolean = j==0;
aP1uv = new NumberUV( (bTop?1:0)+(bTop?-1:1)*(aP1.x/fRadius/2+.5), aP1.z/fRadius/2+.5 );
aP2uv = new NumberUV( (bTop?1:0)+(bTop?-1:1)*(aP2.x/fRadius/2+.5), aP2.z/fRadius/2+.5 );
aP3uv = new NumberUV( (bTop?1:0)+(bTop?-1:1)*(aP3.x/fRadius/2+.5), aP3.z/fRadius/2+.5 );
// face
if (j == 0) {
if(bottomMat)
{
if (fBottomFace) aFace.push( new Triangle3D(this, [aP1, aP3, aP2], bottomMat, [aP1uv, aP3uv, aP2uv]) );
}
else
{
if (fBottomFace) aFace.push( new Triangle3D(this, [aP1, aP3, aP2], matInstance, [aP1uv, aP3uv, aP2uv]) );
}
}
else {
if(topMat)
{
if (fTopFace) aFace.push( new Triangle3D(this, [aP1, aP2, aP3], topMat, [aP1uv, aP2uv, aP3uv]));
}
else
{
if (fTopFace) aFace.push( new Triangle3D(this, [aP1, aP2, aP3], matInstance, [aP1uv, aP2uv, aP3uv]));
}
}
}
}
}
this.geometry.ready = true;
if(Papervision3D.useRIGHTHANDED)
this.geometry.flipFaces();
}
}
}

Delicious Digg This Post Facebook Stumble This Post

Papervision Double Sided Plane

Published

Charlie

on December 9, 2008

in AS3, Actionscript 3 Papervision, Actionscript 3.0, Flash, Papervision, Papervision 3D and Tutorials

. 12 Comments

Thanks to Luke I am the new proud owner of Papervision2.com. He is keeping busy and just ran out of time. I know he is sad to see it go, but glad that someone can take over and continue helping the Flash / Papervision community.

To introduce myself, I decided to take a tutorial from my site and add it to this new site.

The ole, doublesided plane. Lets get started.

Here are your options as we see it to create a double-sided plane.

Option 1:
Create two planes. Plane 1 with a z sorting of 1 and the other with 0 and the rotationY of one of those planes set to 180. You could then contain this in one display container.

Version 2:
Create one cube with a depth of 0. Then you just apply a material to the front and back. OK OK OK so this is not really a Plane... but I like this approach because it allows me to more easily use things like Bend Modifier.

If anyone has a better or more improved approach we would love to hear about it.

Here is what the code for Option 1:

PLAIN TEXT

Actionscript:

package com.cs54.ui
{
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.DisplayObject3D;
import com.everydayflash.pv3d.modifiers.Bend;
import flash.display.DisplayObject;public class Tree2Planes extends DisplayObject3D
{
[Embed(source="/assets/tree-side-1.png")]
public var TreeFront :Class;[Embed(source="/assets/tree-side-2.png")]
public var TreeBack :Class;
protected var treeFront :DisplayObject;
protected var treeBack :DisplayObject;
protected var treeFrontMat :MovieMaterial;
protected var treeBackMat :MovieMaterial;
protected var treeMatList :MaterialsList;
protected var _height :Number = 175;
protected var _width :Number = 191;
protected var _container :DisplayObject3D;
protected var plane1 :Plane;
protected var plane2 :Plane;
public function Tree2Planes():void
{
treeMatList = new MaterialsList();
treeFront = new TreeFront();
treeBack = new TreeBack();
//Tree Materials
treeFrontMat = new MovieMaterial(treeFront, true);
treeBackMat = new MovieMaterial(treeBack, true);
treeFrontMat.allowAutoResize = false;
plane1 = new Plane(treeFrontMat,_width,_height);
plane2 = new Plane(treeBackMat,_width,_height);
plane1.z = 1;
plane1.rotationY = 180;
_container = new DisplayObject3D();
addChild(_container);
_container.addChild(plane1);
_container.addChild(plane2);
}
public function get height():Number
{
return _height;
}
public function get width():Number
{
return _width;
}
}
}

Here is what the code for Option 2:

PLAIN TEXT

Actionscript:

package com.cs54.ui
{
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Cube;
import com.everydayflash.pv3d.modifiers.Bend;
import flash.display.DisplayObject;
public class Tree extends DisplayObject3D
{
[Embed(source="/assets/tree-side-1.png")]
public var TreeFront :Class;
[Embed(source="/assets/tree-side-2.png")]
public var TreeBack :Class;
protected var treeFront :DisplayObject;
protected var treeBack :DisplayObject;
protected var treeFrontMat :MovieMaterial;
protected var treeBackMat :MovieMaterial;
protected var treeMatList :MaterialsList;
protected var treeCube :Cube;
protected var _height :Number = 175;
protected var _width :Number = 191;
protected var _container :DisplayObject3D;
public function Tree():void
{
treeMatList = new MaterialsList();
treeFront = new TreeFront();
treeBack = new TreeBack();
//Tree Materials
treeFrontMat = new MovieMaterial(treeFront, true);
treeBackMat = new MovieMaterial(treeBack, true);
treeFrontMat.allowAutoResize = false;
treeFrontMat.animated = true;
treeMatList.addMaterial( treeFrontMat, "front" );
treeMatList.addMaterial( treeBackMat, "back" );
treeCube = new Cube(treeMatList, _width, 0, _height, 6, 6, 6);
var bend:Bend = new Bend(treeCube);
bend.quickBend(1, .1);
addChild(treeCube);
}
public function get height():Number
{
return _height;
}
public function get width():Number
{
return _width;
}
}
}

More to come in the weeks ahead. New papervision tutorials, full source, and support will all be provided.

Thanks for your continued support.

Charles Schulze,
CS54, LLC

Delicious Digg This Post Facebook Stumble This Post

Tag Archive for 'Tutorial'Page 2 of 2

Basic Mouse Interaction (v2)

Papervision 3D Controlling Top and Bottom Cylinder Materials

Papervision Double Sided Plane

Blogroll

Recent Posts

Pages

Tag Archive for 'Tutorial'Page 2 of 2

Basic Mouse Interaction (v2)

Papervision 3D Controlling Top and Bottom Cylinder Materials

Papervision Double Sided Plane

Blogroll

Recent Posts

Tags

Pages