Three.js

Three.js — это JavaScript-библиотека с открытым исходным кодом, которая рендерит 3D-графику в веб-браузерах с помощью [WebGL](/glossary/webgl). Она абстрагирует сложность API [WebGL](/glossary/webgl), предоставляя разработчикам высокоуровневый инструментарий для построения 3D-сцен с камерами, освещением, материалами, геометрией и циклами анимации. Созданная Рикардо Кабельо (Mr.doob) в 2010 году, Three.js стала самой распространённой 3D-библиотекой для веба — она применяется в конфигураторах продуктов, архитектурных обзорах, визуализации данных и интерактивном повествовании. Благодаря выполнению на GPU через WebGL, Three.js способна рендерить сложные сцены со скоростью 60 кадров в секунду на современном оборудовании без плагинов или нативных установок.

Three.js делает возможным высококачественный 3D-рендеринг прямо в обычной вкладке браузера. Для цифрового издательства эта возможность является революционной. Вместо плоских изображений печатных страниц издатели могут представлять контент с физической глубиной, реалистичным освещением и плавной анимацией. Читатели взаимодействуют со страницами, которые загибаются, отбрасывают тени и реагируют на касание или движение мыши, создавая тактильное ощущение, которое статические PDF не способны воспроизвести. Библиотека работает во всех основных браузерах (Chrome, Firefox, Safari, Edge) и адаптируется к широкому спектру устройств — от мощных настольных компьютеров до смартфонов среднего класса. Этот кросс-платформенный охват позволяет издателям обеспечивать премиальный опыт чтения, не ограничивая аудиторию конкретным приложением или ОС.

Three.js — центральный движок рендеринга флипбуков FlipLink. Когда вы загружаете PDF и создаёте флипбук, FlipLink использует Three.js для отображения каждой страницы как 3D-поверхности с реалистичной [анимацией перелистывания](/glossary/page-flip-animation). Каждый переворот страницы рассчитывается в реальном времени: бумага деформируется по кривой, становится видна обратная сторона страницы, а динамические тени смещаются по развороту. Рендерер поддерживает различные [типы обложки](/glossary/cover-type) — [твёрдый переплёт](/glossary/hardcover) и [мягкую обложку](/glossary/paperback) — каждый с собственным поведением изгиба и механикой корешка. Three.js рендерит всю сцену с использованием GPU читателя, поэтому анимация остаётся плавной без серверной обработки. FlipLink также предлагает [просмотрщик документов](/glossary/document-viewer) на базе [PDF.js](/glossary/pdf-js) для случаев, когда предпочтительнее более простой макет, предоставляя издателям выбор формата для каждой публикации.

Внутри интеграция Three.js в FlipLink включает несколько этапов рендеринга. Каждая страница PDF растеризуется и применяется как текстура к подразделённой плоской геометрии. Когда читатель инициирует переворот страницы, вершины геометрии смещаются вдоль кривой Безье для имитации сгибания бумаги. Направленный источник света, расположенный над книгой, генерирует карты теней в реальном времени, благодаря чему загибающаяся страница отбрасывает тень на нижележащую. Камера использует перспективную проекцию, придающую книге естественное ощущение глубины, недоступное плоским ортографическим проекциям. На устройствах с ограниченной мощностью GPU Three.js автоматически уменьшает количество полигонов и упрощает расчёт теней для поддержания плавной частоты кадров. Весь конвейер рендеринга работает на стороне клиента — не требуется ни потоковое видео, ни серверный рендеринг, устройство читателя справляется со всем самостоятельно.

CSS 3D-трансформации (`transform: rotateY()`, `perspective()`) могут вращать плоские элементы в трёхмерном пространстве и иногда используются для простых эффектов перелистывания. Однако CSS 3D работает с прямоугольными DOM-элементами и не может их деформировать — страница может поворачиваться, но не загибаться, сгибаться или складываться. Three.js, напротив, работает с меш-геометрией, состоящей из множества вершин, и способна имитировать деформацию бумаги, переменную толщину, кривизну корешка и отбрасывание теней. CSS 3D проще и легче для базовых card-flip-взаимодействий, но не может воспроизвести [реалистичную симуляцию книги](/glossary/realistic-book-simulation), которую читатели ассоциируют с физической книгой. Для издателей, которым нужен внешний вид и ощущение настоящего печатного документа, Three.js — это движок, который делает это возможным.

Three.js переносит GPU-ускоренный 3D-рендеринг в браузер, позволяя FlipLink создавать флипбуки с реалистичным изгибом страниц, динамическими тенями и перспективной глубиной — опыт, который плоские просмотрщики и CSS-анимации не в состоянии обеспечить.