3D Page Curl Effect – Updated
A few improvements have been made enhancing visual quality as well as overall framerate under load, plus a few presentation and interface-related tweaks.
The main class file for the effect has been updated as well.
Thanks to Carlos Ulloa and Alexander Zadorozhny for their thoughts on the Papervision3D mailing list.
I great class you have there.
It took be a while though to figure out how to get it working like the demo so I thought I’d share what I did in case anybody gets stuck like I did.
First off it may not be obvious for those us us less familiar with Papervision3D but you have to first set up your 3D environment, something like:
var container = new Sprite();
var camera = new Camera3D();
addChild(container);
var scene = new Scene3D(container)
Then you can add a CurlingPlane instance with a reference to the BitmapData Object you want to use:
var page1_side1 = new CurlingPlane(myBitmapData);
scene.addChild(page1_side1);
scene.renderCamera(camera);
At this point you can set up mouse events for the flipping animation that set the rotation of the CurlingPlane (from 0 to 180 degrees) on the CurlingPLane does the rest. Just remember to re-render the camera after setting the rotation:
page1_side1.rotate(90);
scene.renderCamera(camera);
So now you’ll notice that only one side of the page is rendered. In order to complete the effect you have to sandwich two CurlingPlane instances together, one facing forward and one facing backwards. This stumped me for a while and I don’t know if I have the best solution but in order to flip the plane, I reversed the vertices array in the constructor of the CurlingPlane. But then the image was rotated 180 degrees so then I had to rotate the BitmapData object.
So i ended up adding another parameter to the Constructor of the CurlingPlane class so it now looks like:
public function CurlingPlane(bmp:BitmapData, numHorizontalStrips:int = 5, invert:Boolean = false)
And in the constructor I added a block of code just before the “super( new BitmapMaterial( bmp ), new Array(), new Array(), null, null );” to use a new, rotated BitmapData object instead of the one provided.
/////////////////////
var myBitmapData:BitmapData
if (invert) {
var myMatrix:Matrix = new Matrix();
myMatrix.rotate(Math.PI);
myMatrix.translate(bmp.width, bmp.height);
myBitmapData = new BitmapData(bmp.width, bmp.height);
myBitmapData.draw(bmp,myMatrix);
} else {
myBitmapData = bmp;
}
/////////////////////
super( new BitmapMaterial( myBitmapData ), new Array(), new Array(), null, null );
…
Then after the vertices array is created and before the faces array is created I added:
if(invert) {
vertices.reverse();
}
// Faces
var uvA :NumberUV;
…
If there is a better way of doing this I’d love to know.
Jamie
Jamie,
Thanks very much for the writeup. Your explanation is great.
Lee
Very Good! Very Cool!
You also give us document class sample…hihihi
Would you be willing to share any of the code for the sample. I have tried to get this working (thanks to Jamie for help code) but am not getting anything to show up. I’m guessing that I’m just missing something simple, but any help would be greatly appreciated.
Thanks
Does it have to be a bitmap or can you map a Sprite or a MovieClip as a page?
BigBadOwl,
The class is set up to only accept BitmapData’s but it’s perfectly possible to adjust it to take MovieClip’s.
Dan Rogers has a very cool update to the page flip above, which allows for user interactivity on the pages:
http://danro.net/2007/11/08/pv3d-pageflip-demo/
-Lee
Can you share the .fla file?
Sorry Matias, just the AS file above.
Lee
Jamie,
which version of PV did you use?
thanks a bunch
thanks
cool
thx u very cool effect
Thanks for the cool effect. It seems though that it no longer works with the latest version of Papervision 3D, I was wondering if you were planning on updating it anytime soon?
Thanks again for the great stuff!
Thanks Phil. I don’t have any immediate plans to update it, but if you get it working, please do let me know and I’ll update the code.
What I have wanted to do with it for a while is to find a way to ‘parse’ PDF files on the client-side so that an entire document could be browsed online…
the Mesh3D class seems to have been removed. Other classes seem to have been relocated.
This has been extended here:
http://danro.net/2007/11/08/pv3d-pageflip-demo/
Really great learning demo.
H Risley
solo-
Sorry, this source code targets Papervision v1.5. There have been a lot of changes to the PV framework since that time, which means you’ll have to do a little bit of refactoring and maybe some other changes to make this run in the current version.
o/
Im trying to refactor this to pv 2.0. Any chance I could reach you via remote support hum, like email if i have any questions about bits and bobs of what Im trying to cookup,
Thomas!
I slightly refactored the CurlingPlane class to work with pv 2.0. I wanted use the effect for a project. Also added a “curl” prop to easily set the rotation and make it work with a tweening engine. File here:
http://www.nudoru.com/stuff/CurlingPlane.as
Not sure if it’s 100% perfect, but it works in my testing.
Hi all, just wanted to point out that my source files for the extended version of this have been archived and moved to GitHub:
https://github.com/danro/pv3d-pageflip-as3
or download the zip version…
https://github.com/danro/pv3d-pageflip-as3/zipball/master
Maybe someone should improve this and port it to Away3D ;)
-Danro
Hello Matt,
Well i try to figure out something with your refactored curling plane class,
but it did not seems to helping out,
well i have written this code and instantiate your class, but nothing shows up…
please check this out and tell me if you find anything..
Thanks in advance.
Andrew
package
{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
public class MyClass extends Sprite
{
private var scene :Scene3D;
private var camera :Camera3D;
private var viewport :Viewport3D;
private var renderer :BasicRenderEngine;
private var material :BitmapFileMaterial;
private var object :Plane;
public function MyClass()
{
scene = new Scene3D();
camera = new Camera3D();
viewport = new Viewport3D();
viewport.autoScaleToStage = true;
addChild(viewport);
renderer = new BasicRenderEngine();
material = new BitmapFileMaterial(“b.png”, true);
material.doubleSided = true;
material.addEventListener(FileLoadEvent.LOAD_COMPLETE, handleLoadComplete);
//object = new Plane();
}
private function handleLoadComplete(e:FileLoadEvent):void
{
material.removeEventListener(FileLoadEvent.LOAD_COMPLETE, handleLoadComplete);
//object.material = material;
trace(material.bitmap)
material.removeEventListener(FileLoadEvent.LOAD_COMPLETE, handleLoadComplete);
var _cp:CurlingPlane;
_cp=new CurlingPlane(material);
scene.addChild(_cp);
addEventListener(Event.ENTER_FRAME, handleEnterFrame);
}
private function handleEnterFrame(e:Event):void
{
//object.yaw(1);
renderer.renderScene(scene, camera, viewport);
}
}
}
Hello Matt,
If you can provide me the source code of your demo,
it would be highly appreciable..
thanks
Andrew.
Hiya! I simply want to give an enormous thumbs up for the great info you’ve got right here on this post. I will be coming back to your weblog for more soon.