# Animating a flexible object

**URL:** <https://discourse.threejs.org/t/animating-a-flexible-object/6906>\
**Category:** Questions\
**Tags:** rigging, animation\
**Created:** [April 4, 2019, 3:20am UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906 "2019-04-04T03:20:15Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bumblebijan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bumblebijan/32/4658_2.png) [@bumblebijan](https://discourse.threejs.org/u/bumblebijan)\
**Post date:** [April 4, 2019, 3:20am UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906/1 "2019-04-04T03:20:15Z")

</div>

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](https://i.gifer.com/Dwwb.gif)

Problem is, with that setup I can’t achieve a more detailed animation like [this one](https://cdn.dribbble.com/users/1928567/screenshots/3866247/soja-outlinedbook.gif)

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

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [April 4, 2019, 3:52am UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906/2 "2019-04-04T03:52:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bumblebijan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bumblebijan/32/4658_2.png) [@bumblebijan](https://discourse.threejs.org/u/bumblebijan)\
**Post date:** [April 4, 2019, 4:03am UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906/3 "2019-04-04T04:03:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [April 4, 2019, 7:22am UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906/4 "2019-04-04T07:22:57Z")

</div>

> [@bumblebijan](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![bumblebijan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bumblebijan/32/4658_2.png) [@bumblebijan](https://discourse.threejs.org/u/bumblebijan)\
**Post date:** [April 9, 2019, 7:59am UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906/5 "2019-04-09T07:59:58Z")

</div>

FABRIK is a fast iterative solver for the inverse kinematics problem. Is it explained in this blog/website. [http://www.andreasaristidou.com/FABRIK.html](http://www.andreasaristidou.com/FABRIK.html)

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.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [April 9, 2019, 9:02am UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906/6 "2019-04-09T09:02:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bumblebijan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bumblebijan/32/4658_2.png) [@bumblebijan](https://discourse.threejs.org/u/bumblebijan)\
**Post date:** [April 10, 2019, 3:12am UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906/7 "2019-04-10T03:12:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [April 10, 2019, 7:31pm UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906/8 "2019-04-10T19:31:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [April 11, 2019, 1:36pm UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906/9 "2019-04-11T13:36:13Z")

</div>

Probably cloth simulation is sufficient here. There’s a good three.js [example](https://threejs.org/examples/#webgl_animation_cloth) for that.

---

<div class="post-metadata">

**Author:** ![bumblebijan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bumblebijan/32/4658_2.png) [@bumblebijan](https://discourse.threejs.org/u/bumblebijan)\
**Post date:** [April 11, 2019, 1:49pm UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906/10 "2019-04-11T13:49:35Z")

</div>

Thanks. I’ll check these out

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [April 11, 2019, 2:46pm UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906/11 "2019-04-11T14:46:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [April 11, 2019, 2:56pm UTC](https://discourse.threejs.org/t/animating-a-flexible-object/6906/12 "2019-04-11T14:56:14Z")

</div>

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.