# How to create a PDF Flipbook
**URL:** https://forum.babylonjs.com/t/how-to-create-a-pdf-flipbook/50779
**Category:** Questions
**Created:** [May 23, 2024, 11:57am UTC](https://forum.babylonjs.com/t/how-to-create-a-pdf-flipbook/50779 "2024-05-23T11:57:46Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@daHase](https://forum.babylonjs.com/u/daHase)
#### Post date: [May 23, 2024, 11:57am UTC](https://forum.babylonjs.com/t/how-to-create-a-pdf-flipbook/50779/1 "2024-05-23T11:57:46Z")
Hi. I want to create a 3D PDF Flipbook.
I already googled and searched this forum. I found 2 very helpful topics:
> [@Would like display the pdf in the 3d space](https://forum.babylonjs.com/t/would-like-display-the-pdf-in-the-3d-space/14093):
>
> Would like display the pdf in the 3d space, how to do it , can you refer me to some exmaples
> [@Open PDF in the canvas](https://forum.babylonjs.com/t/open-pdf-in-the-canvas/19815):
>
> Hi, I would like to know if it is possible to open a PDF onto a canvas like an iframe view. Are there any examples?
My Question:
1. To use dynamic texture: is there a way, that a text is on the mesh and is selectable? ( I hardly cannot find anything about it except GUi which i assume is not possitble to transform like dynamic text if the mesh transforms? And even with GUI I dont find the possibility to select the text.
2. I like todo an animation like: [quick\_flipbook - npm](https://www.npmjs.com/package/quick_flipbook)
I would assume to create in Blender (or other 3D programm) a template of planes (or 3D Cubes…): “PrevLeft”, “PrevRight”, “ActiveLeft”, “ActiveRight”, “NextLeft”, “NextRight” and use pdfjs like in the forum posts I linked to image pages on the panels and have an animation in blender in it to play/stop .
So my question: are there any playgrounds where someone did something similar? Is the idea total wrong and a page animation can easily be made with tools in babylonjs without importing a glb/obj file? (like wrapper modifier animation, page flip simulation…)
---
### Author:  [@labris](https://forum.babylonjs.com/u/labris)
#### Post date: [May 23, 2024, 1:49pm UTC](https://forum.babylonjs.com/t/how-to-create-a-pdf-flipbook/50779/2 "2024-05-23T13:49:46Z")
You may try to use HTMLMesh - [Babylon.js docs](https://doc.babylonjs.com/communityExtensions/htmlMesh)
There is PDF in the doc example as well - [https://playground.babylonjs.com/#Y2LIXI#44](https://playground.babylonjs.com/#Y2LIXI#44)
---
### Author:  [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)
#### Post date: [May 23, 2024, 5:53pm UTC](https://forum.babylonjs.com/t/how-to-create-a-pdf-flipbook/50779/3 "2024-05-23T17:53:11Z")
I think a paper page is a stiff fabric. Insert more joints and I think you’ll be on the right way…
[Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#X46NXS#0)
---
### Author:  [@j-te](https://forum.babylonjs.com/u/j-te)
#### Post date: [May 23, 2024, 6:07pm UTC](https://forum.babylonjs.com/t/how-to-create-a-pdf-flipbook/50779/4 "2024-05-23T18:07:35Z")
It’s totally reasonable to use a 3D engine for this.
If the book/magazine has thin pages, a plane could be used per page, with two-sided UVs:
[https://doc.babylonjs.com/features/featuresDeepDive/materials/using/frontAndBackUVs](https://doc.babylonjs.com/features/featuresDeepDive/materials/using/frontAndBackUVs)
It can all be done using only the Babylonjs primitives, animation curves and math, if you’re good with the latter!
I recently created a very similar animation in 3ds Max using bend modifiers. I’m sure the same can be done in Blender. It’s possible to bake to vertex animation too.
If you have a large number of pages, you may want to consider streaming the page textures for the sake of memory. Animation plays on texture loaded. You’ll only need one page animation then another mesh as the static before/after state. Switching of materials will be required.
Generally with the PDF, you will need to convert to an image one way or another… probably best as a server function.
---
### Author:  [@daHase](https://forum.babylonjs.com/u/daHase)
#### Post date: [May 24, 2024, 7:04am UTC](https://forum.babylonjs.com/t/how-to-create-a-pdf-flipbook/50779/5 "2024-05-24T07:04:42Z")
Nice Answers. Thanks for the hint with the HTML Mesh @labris and the bothSideUVs @j-te .
@CodingCrusader thank for your answer, I think it is a bit too much to add a physic engine. also I have to controll the page flip. So I think Ill try to simulate it with modifiers or so…
I have to create the whole mesh in Babylon because the PDF size can variate so I have to read the width and height of the pdf file and create a plane (or box) object, and than add an animation like bend/morph/bone animation to it…
So does anyone see a “How to do a page flip in BabylonJS” playground or similar?
[https://doc.babylonjs.com/features/featuresDeepDive/mesh/dynamicMeshMorph](https://doc.babylonjs.com/features/featuresDeepDive/mesh/dynamicMeshMorph) seems like i can do something with it. Are there andy Mesh Deformers like “Bend” or “Curve” or “Wrap” deformers like in a 3D programm?
---
### Author:  [@j-te](https://forum.babylonjs.com/u/j-te)
#### Post date: [May 24, 2024, 9:25am UTC](https://forum.babylonjs.com/t/how-to-create-a-pdf-flipbook/50779/6 "2024-05-24T09:25:37Z")
> [@daHase](#):
>
> I have to create the whole mesh in Babylon because the PDF size can variate
Depending on your page ratios, I think you can get a baked model to work just scaling the pages. The curve may look slightly skewed but it depends on how uniform your animation is/the end result you want to achieve. If there is a skewing issue then creating 2 meshes / animations should only be required since pages are generally 1:1 or 1.4142:1. Note you want to consider the camera perspective, FOV and page curl against your viewport frame (do you want the page curl to go outside of the view).
Morph targets is another, hopefully easy approach:
[https://doc.babylonjs.com/features/featuresDeepDive/mesh/morphTargets](https://doc.babylonjs.com/features/featuresDeepDive/mesh/morphTargets)
---
### Author:  [@j-te](https://forum.babylonjs.com/u/j-te)
#### Post date: [May 24, 2024, 2:41pm UTC](https://forum.babylonjs.com/t/how-to-create-a-pdf-flipbook/50779/7 "2024-05-24T14:41:00Z")
Here’s a Playground example using Morph Targets mentioned above.
Note the `ANIMATIONLOOPMODE_YOYO` assignment is a bit of a hack.
> **[Babylon.js Playground](https://playground.babylonjs.com/#EJ4Q4X%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes
---
### Author:  [@ericwood73](https://forum.babylonjs.com/u/ericwood73)
#### Post date: [July 3, 2024, 6:19pm UTC](https://forum.babylonjs.com/t/how-to-create-a-pdf-flipbook/50779/8 "2024-07-03T18:19:27Z")
You won’t be able to use HtmlMesh with deformable (non-rectangular, non-planar) meshes, but I think there is a different solution that I have been wanting to play with. pdf.js allows you to render the pdf to a canvas that you can pass in. I believe it would be possible to create a dynamic texture, get its canvas and then pass that canvas to pdf.js to render the pdf onto. Be advised, I don’t think this will work in XR, because I think pdf.js relies on DOM support.
---
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [July 3, 2024, 6:56pm UTC](https://forum.babylonjs.com/t/how-to-create-a-pdf-flipbook/50779/9 "2024-07-03T18:56:20Z")
[ ](https://www.youtube.com/watch?v=2hqxJUlft5k)
---
### Author:  [@mawa](https://forum.babylonjs.com/u/mawa)
#### Post date: [July 4, 2024, 9:19am UTC](https://forum.babylonjs.com/t/how-to-create-a-pdf-flipbook/50779/10 "2024-07-04T09:19:19Z")
Just stumbled over this. Fascinating topic. Especially looking at the different approaches for it.
It kinda feels to me (once again) like the ‘DEV’ vs ‘CREATIVE’ war 😂 Being sort of an ‘in-between’ profile, I would say something like : “_Serve the project_”. There are ‘must haves’ and ‘nice to have’ and I would start by ticking each to choose from a method.
Obviously, since there’s nothing in particular that seem to require native building in BJS, I would have a natural (creative) tendency of picking the last solution. The one from @roland. Read prepare all models and animations in 3D external app (i.e. blender) and use BJS just to pilot, create/assign the materials and textures.
It’s funny though to read about PDF.js. I could easily imagine a case where you’d eventually want to make the text ‘selectable’. I believe that would change things a little 😁 🤔 Sounds like an interesting challenge, doesn’t it? 🤓 😁
But without this, I would likely want to ‘keep this simple’ and would most probably go the road explained above. Of course, my opinion only, and meanwhile have a great day 🕶