turngl

WebGL-powered 3D PDF flipbook with real page curl.

Drag to flip. Mouse-look camera tilt. Dark/light mode. Zero UI framework dependency.

Built on Three.js + PDF.js.
Inspired by Real3DFlipBook — rebuilt from scratch, open source.

---

Demo

Live demo →

---

Install

npm install turngl three

PDF.js must be available globally (add via CDN or import separately):

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

---

Usage

Web Component (zero framework)

<script type="module">
  import 'turngl';
</script>

<turn-gl
  src="/annual-report.pdf"
  theme="dark"
  style="width:100%;height:600px"
></turn-gl>

Listen for events:

const book = document.querySelector('turn-gl');

book.addEventListener('load',       e => console.log(`Loaded ${e.detail.pages} pages`));
book.addEventListener('pagechange', e => console.log(`Spread ${e.detail.spread}`));
book.addEventListener('error',      e => console.error(e.detail));

// Programmatic control
book.next();
book.prev();
book.goTo(4); // 0-based page index

---

Vanilla JS (Book3D)

Full control over the rendering pipeline:

import { Book3D } from 'turngl';

const canvas = document.getElementById('myCanvas');
const book   = new Book3D(canvas, { theme: 'dark', segments: 32 });

// Resize when container changes
window.addEventListener('resize', () => {
  book.resize(canvas.clientWidth, canvas.clientHeight);
});

// Show a spread (HTMLCanvasElement pages from PDF.js or your own renderer)
book.showSpread(leftPageCanvas, rightPageCanvas);

// Flip programmatically
book.prepFlip('fwd', currentRightCanvas, nextLeftCanvas);
book.animate(0, 1, 780,
  progress => book.curl(progress, 'fwd'),
  () => { book.endFlip(); book.showSpread(newLeft, newRight); }
);

// Mouse look (call on mousemove, pass -0.5…0.5 normalized coords)
canvas.addEventListener('mousemove', e => {
  const r = canvas.getBoundingClientRect();
  book.mouseLook(
    (e.clientX - r.left) / r.width  - 0.5,
    (e.clientY - r.top)  / r.height - 0.5
  );
});

---

React

import { useEffect, useRef } from 'react';
import { TurnGLElement } from 'turngl';

// Register once
if (!customElements.get('turn-gl')) customElements.define('turn-gl', TurnGLElement);

export function Flipbook({ src }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    const onLoad = e => console.log('pages:', e.detail.pages);
    el.addEventListener('load', onLoad);
    return () => el.removeEventListener('load', onLoad);
  }, []);

  return <turn-gl ref={ref} src={src} theme="dark" style={{ width: '100%', height: '600px' }} />;
}

---

API

<turn-gl> attributes

Attribute	Type	Default	Description
src	string	—	PDF URL to load
theme	"dark" | "light"	"dark"	Color scheme

<turn-gl> methods

Method	Description
load(url)	Load a new PDF from URL
next()	Flip to next spread
prev()	Flip to previous spread
goTo(pageIndex)	Jump to page (0-based)

<turn-gl> events

Event	detail
load	{ pages: number }
pagechange	{ spread: number, page: number }
error	Error

Book3D constructor options

Option	Type	Default	Description
pageWidth	number	1.65	Page width in 3D units
pageHeight	number	2.33	Page height in 3D units
segments	number	32	Horizontal geometry segments (curl quality)
theme	string	'dark'	'dark' or 'light'

---

How it works

Pages are rendered to HTMLCanvasElement by PDF.js, then used as THREE.CanvasTexture on subdivided PlaneGeometry meshes. During a flip, each vertex is deformed along a cylindrical path — outer edge leading the inner edge by LEAD factor — creating the characteristic page curl.

vertex[i].x = dist * cos(angle)   // cylindrical rotation around spine
vertex[i].z = dist * sin(angle)   // z-depth peaks at 90° (toward viewer)

---

License

MIT © Oguzhan Togay