zero point nine

17 Responses to “3D Page Curl Effect – Updated”

1. Jamie Scanlon Says:
   August 29th, 2007 at 7:15 am

   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

2. admin Says:
   August 29th, 2007 at 8:07 am

   Jamie,

   Thanks very much for the writeup. Your explanation is great.

   Lee

3. pippofelix Says:
   October 22nd, 2007 at 5:29 am

   Very Good! Very Cool!
   You also give us document class sample…hihihi

4. Chris Says:
   March 5th, 2008 at 3:25 pm

   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

5. BigBadOwl Says:
   April 26th, 2008 at 7:48 am

   Does it have to be a bitmap or can you map a Sprite or a MovieClip as a page?

6. admin Says:
   May 1st, 2008 at 4:52 pm

   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

7. Matias Says:
   May 23rd, 2008 at 3:53 pm

   Can you share the .fla file?

8. admin Says:
   May 27th, 2008 at 3:58 pm

   Sorry Matias, just the AS file above.

   Lee

9. chris Says:
   May 31st, 2008 at 6:51 am

   Jamie,

   which version of PV did you use?

   thanks a bunch

10. Bastik Says:
    August 26th, 2008 at 3:58 am

    thanks

11. Kolik Says:
    August 26th, 2008 at 3:59 am

    cool

12. haifafans Says:
    January 1st, 2009 at 9:40 am

    thx u very cool effect

13. Phil Says:
    February 5th, 2009 at 9:45 am

    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!

14. Lee Says:
    February 5th, 2009 at 9:55 am

    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…

15. solo Says:
    March 11th, 2009 at 6:51 am

    the Mesh3D class seems to have been removed. Other classes seem to have been relocated.

16. Bristol Web Design Says:
    March 21st, 2009 at 8:23 am

    This has been extended here:

    http://danro.net/2007/11/08/pv3d-pageflip-demo/

    Really great learning demo.

    H Risley

17. Lee Says:
    March 21st, 2009 at 10:30 am

    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.

Leave a Reply