One of the most crucial aspects, if not the most crucial aspect, is the page flip of the book. It's the center point of the book and is the only animation that gives the book its function and flare. I should note this was a huge learning process since I have just scratched the surface of 3D modeling. Three.js has some particular challenges I had to face not only in the models but in the code as well. Let's talk about some of the challenges I've faced and how we've solved them so far. This post would be very useful to any other Three.js developers looking to seamlessly loop animations for a glTF (GL Transmission Format) model with modifiers such as a bending and twisting.

1 // Implementing Bending and Twisting Modifiers

The first issue I ran across was giving the page flip some bending and twisting modifiers to it in order to add some visual interest. Without those modifiers the page would be rather stiff when flipped as seen below :
Figure 1. gLTF model in Three.js showing the stiff page flip animation with no modifiers

Adding bend/twist modifiers onto the page flip animation will give it some much needed details to immerse the reader. But before we get there I want to talk about a little issue I had with Three.js's 3D model of choice gLTF. Three.js highly recommends gLTF due to it's minimal size and how fast it is to load. This is all great, but one of the down sides of gLTF is that they don't export with modifiers. Meaning the bend and twist modifiers I've worked on getting left behind in Blender.

Figure 2. Page flip with bend and twist key framed modifiers in Blender

When the book model above is exported, we still get the stiff flip from before shown in figure 1. This is actually an easy fix, once you know what to do. You want to select the page flip animation and export it as a .mdd file. Once the .mdd file has been exported you'll need to remove all your modifiers from the animated object. Once the modifiers have been removed, import the .mdd file back onto the object and you'll end up with an object that has the same animation as before, but now has shape-keys instead of key framed modifiers. This is good, because Three.js can interpret shape-keys and we can even edit the shape-keys or as Three.js calls them morph-targets.

Figure 3. Page flip with bend and twist modifiers effect using shape keys in Blender. Notice the increase of yellow key frames in the timeline.

2 // Troubleshooting Visual Glitches

Looks good right? Wrong! If we load up the book in Three.js we'll see an issue.

Figure 4. Visual glitch on start and end of animation

A visual glitch is happening at the first frame and the possibly the last frame that wasn't present in our Blender loop. Let's take a look at the animation in wire-frame when it loops from the last from to the first frame.

Figure 5. Loop from last frame to first frame

This is starting to make sense. When the animation plays on the first frame page it's growing to full scale. And when the animation ends the flipping page is morphing back over to the right in order to restart the animation. This means in Three.js the shape-keys aren't working properly on the first frame and on the final frame, which cause the strange visual glitch.

Figure 6. Wire-frame on the left with morph-targets array on the right

3 // Final Solution

In figure 6 you can now get a further understanding on how morph-targets relate to the frames and the animation of the page flip. All of the frames on the right are really just morph targets that should be sharing a sum of 1 across all frames. But in figure 6 you can see frame 20 and frame 0 both enter periods were they go below a value of 1. This is where we are seeing our visual glitches. The fix was very simple, I trimmed the flip animations length via code like so:

key_shapes.tracks[0].trim(0.01, 0.91);

With this fix the page is now flipping perfectly:

Figure 7. Pages perfectly looping

I'm split on this fix. Eyeballing the start and end point of the clip and removing the visual glitches feel extremely foreign to me given my computer science background and practice of precision. I'm use to my programming being very exact and precise which I think in most aspects of programming is a good ideology to have. But it's important to know that time is extremely important in this project and if the page flips looks good and the solution is easy to understand and quick it's hard to beat that. It is just a page flip at the end of the day.