Hi. I want to create a 3D PDF Flipbook.
I already googled and searched this forum. I found 2 very helpful topics:
My Question:
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.
I like todo an animation like: quick_flipbook - npm
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âŚ)
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.
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 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?
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).
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.
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
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.
Sounds like an interesting challenge, doesnât it? 
