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.
-
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:
-
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
-
}
-
}
-
}
very nice tutorial!!! thanks alot!!!
one question – the model is not facing towards us…how do we turn it around so that it faces us at start?
thanks you very much.
hii,
Can someone explain to me what the pitch does?
example: cow.pitch( -10);
I’ve change the value but it seems to do nothing.
How do we make the cow to face us directly when the mouse is over at the center?
thanks in advance…great tutorial!!!!
You’ve probably figured this one out already but pitch, yaw, and roll refer to the 3 different axis of rotation in flight dynamics.
http://en.wikipedia.org/wiki/Flight_dynamics
You could also use the rotationX, rotationY, and rotationZ properties of the DisplayObject3D object.
Hello,
I have been able to use this great tute and have it working well. I have a problem, however. When I create a swf (3d swf) with this workflow it works well. So I know it is coded properly.
I am using a parent swf to call a series of 3d (3d swfs) models which I created using this workflow. When I call the model from the parent swf it breaks with the following error message:
Error #1009: Cannot access a property or method of a null object reference.
at Main/init()
at Main()
When I remove the mouse interaction and substitute the “Main” class from the previous tute it works fine. I believe it has something to do with the stage refreshing. . . Do I need to add the mouse interactivity to the parent swf? Do you have any other guidance on what the solution might be?
Thank you.
thanks for the tutorial!!!
how do i make the model clickable? ie: click on the cow and it moves on the x-axis or maybe zoom in towards us.
thanks.
Very good this tutorial.
It’s work with a SketchUp model?
thanks!
Its brilliantly explained over here about pv3.
but when i use my own png and dae it does not work .
is there some specific method to create it or some code error…plz let me know.
source code:
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 Bike extends BasicView
{
//protected var viewport3D:viewport3d;
protected var bikeBody:DisplayObject3D;
protected var materialList:MaterialsList;
protected var bitmapFileMaterial:BitmapFileMaterial;
protected var sceneWidth:Number;
protected var sceneHeight:Number;
public function Bike()
{
super();
sceneWidth = stage.stageWidth;
createChildren();
startRendering();
}
public function createChildren():void
{
//viewport3D.interactive = true;
//Setup the materials manually (sometimes the dae handles this without issue)
materialList = new MaterialsList();
bitmapFileMaterial = new BitmapFileMaterial(“bikeBody.png”);
materialList.addMaterial(bitmapFileMaterial,”all”);
//Create the new Collada Object with materialList
bikeBody = new Collada(“BikeBody.dae”,materialList);
//Set some properties
bikeBody.moveDown(150);
//bikeBody.scale = 3;
bikeBody.pitch( -10);
//Add to scene
scene.addChild(bikeBody);
}
override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
//Rotate
bikeBody.yaw(1);
}
}
}
Hello, could you explain this line?
world.rotationY = stage.mouseX / sceneWidth * 360;
Because I made this one
world.rotationY = stage.mouseX;
And i didnt notice difference.
I need that camera spun around object, and object did not move. As this do?