Animating a flexible object

So I’m working on a project where I need to animate a book-like object, open and closing the book page by page. The way I did it is by rigging the object with skeletons and implementing IK to achieve a more realistic turn page animation.

With this setup, a single page, the whole single page, is animated by a single chain of bones which mimics this page turn animation

Problem is, with that setup I can’t achieve a more detailed animation like this one

Is there a way to achieve the second animation example using bones? Or is there a better way of doing it?

Are you implementing the IK system in three.js? Or are you using a separate modelling program

I did not use any plugin or library. I just used an algorithm following FABRIK.

I don’t know what FABRIK is. It’s best if you explain in full what you’re doing, what programs or libraries you’re using (including links), and if possible share a working coding example using Codepen.

FABRIK is a fast iterative solver for the inverse kinematics problem. Is it explained in this blog/website.

I created my own algorithm and formula following the concept of FABRIK explained in the link above.

I don’t really have that much of a problem regarding FABRIK for implementing Inverse Kinematics on my bones since I was able to make it work but it does have its limitations. That’s why I’m asking if you could suggest any other approach, besides implementing IK, in order to achieve what I described on my post. What I wanted to know is what would be your approach to be able to achieve what I described on my post.

1 Like

OK, thanks for adding the details. Personally, I would create the book model and animation in a separate modelling program such as Blender, then export it as glTF.

1 Like

Unfortunately, I need to do the modeling in my code since the book dimensions and specifications are dynamic. So I’ll be generating the book programatically and on the fly.

Have you considered using physics? Each page geometry can be associated with a physics soft body object. You could control and pass the page over similarly to how the rope is attached to the crane in the webgl_physics_cloth example.

Probably cloth simulation is sufficient here. There’s a good three.js example for that.

Thanks. I’ll check these out

Sorry I meant the physics cloth example, not the rope one.

I think you could make a spiderman book reading experience app if you combine the two. I’m sure there’s a big market for that.