Tuesday 30 March 2010

PV3D: Rotation around a point

A while ago I was using PV3D to try and create a set of three-tiered shops, that popped up section by section as if they were folding up from the base. Like this:


Straight away I ran into the issue of not being able to change the rotation point of the object; Papervision uses central rotation points that can't be messed with, which obviously wasn't going to help me here.

Handily, the solution is pretty simple, using these steps:
  1. Wrap the object up in it's own individual DisplayObject3D
  2. Move the object up by half it's own height (that's assuming you want to rotate around the bottom edge, like in this example).
  3. Move the holder object back down by the same amount (to offset the difference). 
  4. Apply the rotation to the holder instead of the actual object itself.
Check it out:
// Create the object (in this case a flat plane):
public var Plane_Pavement:DisplayObject3D;

// Create the object texture
[Embed (source="/../assets/pavement.png")]
public var Bitmap_Pavement : Class;

// Apply the texture to our shape
Image_Pavement = new BitmapMaterial(new Bitmap_Pavement().bitmapData);     Image_Pavement.smooth = true;
Plane_Pavement = new Plane(Image_Pavement, 737, 87, 5, 5);

// Create the holder
public var Holder_Pavement:DisplayObject3D = new DisplayObject3D();

// Add the holder to the stage, then add the object to the holder:
addChild(Holder_Pavement)
Holder_Pavement.addChild(Plane_Pavement)

// Finally, do the offset (assuming our image is 100px high)
// Also remember that the Y axis in PV3D goes the other way!
Plane_Pavement.y = 50
Holder_Pavement.y = -50

// Now if we rotate the holder, we get rotation around the bottom edge
Holder_Pavement.rotationX = 50


No comments:

Post a Comment