3D FlipBook - Getting started

Introduction

3D FlipBook is very similar model of real book. For animation imitation is used Newton mechanics. It allow to receive very realistic page flips. Using physics model allow to the pages interact with other pages. So the animation looks natural and very attractive.

Installation

Web server

3D FlipBook uses AJAX to fetch some data so it does not work locally. It needs to be run from web server. You can use any web server that allows to access static data (.html, .js, .jpg, .png, .css).

Copying files

Create index.html on the web server with next contents


    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>3D FlipBook</title>
        <style type="text/css">
          body {
              margin: 0;
              padding: 0;
          }
          .solid-container {
            height: 100vh;
          }
        </style>
      </head>
      <body>

      </body>
    </html>
  

Create directories images, js, css, fonts and templates in the same directory. Then copy all contents

Copy file from /proj/js/dist/3dflipbook.min.js to js

Scripts

Append to the end of body the scripts


    <script src="js/jquery.min.js"></script>
    <script src="js/html2canvas.min.js"></script>
    <script src="js/three.min.js"></script>
    <script src="js/pdf.min.js"></script>

    <script src="js/3dflipbook.min.js"></script>
  

Using

Create folder src next to index.html. There are two ways to create 3D FlipBook - choose your one.

HTML tag

Copy file /proj/public/books/pdf/CondoLiving.pdf to src. Then insert tag to body before the scripts


    <div class="flip-book-container solid-container" src="src/CondoLiving.pdf">

    </div>
  

That is enough to create simple 3D FlipBook from PDF. Also you can have a look at similar example.

jQuery plugin

Insert tag to body before the scripts


    <div class="solid-container">

    </div>
  

To create 3D FlipBook add to the end of body one of the scripts


    <!-- To create 3D FlipBook from PDF -->
    <script type="text/javascript">
      $('.solid-container').FlipBook({pdf: 'src/CondoLiving.pdf'});
    </script>

    <!-- To create 3D FlipBook from images -->
    <script type="text/javascript">
      $('.solid-container').FlipBook({
        pageCallback: function(n) {
          return {
            type: 'image',
            src: 'src/theKingIsBlack/'+(n+1)+'.jpg',
            interactive: false
          };
        },
        pages: 40
      });
    </script>

    <!-- To create 3D FlipBook from HTMLs -->
    <script type="text/javascript">
      $('.solid-container').FlipBook({
        pageCallback: function(n) {
          return {
            type: 'html',
            src: 'src/preview/'+(n%3+1)+'.html',
            interactive: true
          };
        },
        pages: 10
      });
    </script>
  

For next learning it is recommended to visit links below.