Перейти к содержимому
Ко всем инструментам№ 002

Флипбук 3D

Открой любой PDF как реалистичный 3D-флипбук — WebGL, CSS 3D или лёгкий свайп.

Загрузка инструмента…

PDF в браузере — это прокрутка. А каталог, журнал или программка задуманы как вещь, которую листают, и этот инструмент возвращает им это: страницы отрисовываются в высоком разрешении и показываются как книга, которую можно перелистывать. Доступны три движка, и переключаться между ними можно без повторной отрисовки: WebGL — для настоящего объёмного загиба страницы, CSS 3D — для облегчённой версии, которой не нужен GPU, и плоский режим 2D, работающий где угодно, включая старые телефоны.

Главное, о чём стоит знать, — экспорт. Флипбук можно скачать как самодостаточную вещь — папкой в ZIP или одним HTML-файлом, — в которой вместе лежат просмотрщик, движок и твои страницы. Он открывается двойным щелчком, работает офлайн и не делает внешних запросов, так что каталог можно положить на флешку или статический хостинг, и больше ничего не понадобится.

Как это работает

  1. Перетащи PDF или открой его по ссылке.
  2. Подожди, пока страницы отрисуются в высоком разрешении.
  3. Если 3D-режим тормозит, переключи движок — страницы заново не отрисовываются.
  4. Читай или экспортируй весь флипбук в виде ZIP-папки или одного HTML-файла.

Для чего это нужно

  • Опубликовать каталог или журнал на сайте так, чтобы его действительно листали.
  • Передать клиенту самодостаточную интерактивную версию буклета, которая работает офлайн.
  • Показать программку или лукбук на планшете без мешающей PDF-читалки.

Частые вопросы

Мой файл загружается на сервер?
Нет. Файл открывают JavaScript и WebAssembly прямо во вкладке твоего браузера. Он никуда не загружается, на сервере ничего не обрабатывается и ничего не сохраняется — закрыв вкладку, ты стираешь всё.
Что на самом деле входит в экспорт?
Просмотрщик, движок и отрисованные страницы — готовый флипбук. PDF внутри нет, ничего не загружается, внешних запросов он не делает, так что работает из папки, с флешки или с любого статического хостинга.
Какой движок выбрать?
WebGL — для настоящего эффекта загиба страницы на компьютере с GPU. CSS 3D — если WebGL не запускается или устройство скромное. Плоский 2D — вариант, который работает всегда. Переключение мгновенное, потому что страницы уже отрисованы.
Пишет, что не удалось запустить движок флипбука.
Обычно недоступен WebGL — виртуальная машина, заблокированный браузер или старый GPU. Переключись на CSS 3D или плоский 2D; содержимое то же самое, отличается только анимация перелистывания.
Почему на длинном документе всё медленно?
Каждая страница отрисовывается в высоком разрешении, чтобы текст оставался чётким при увеличении, и для браузера это настоящая работа. Каталог на 200 страниц какое-то время готовится вначале, зато потом читается плавно.

Похожие инструменты