Three.js

Three.js é uma biblioteca JavaScript de código aberto que renderiza gráficos 3D em navegadores web usando [WebGL](/glossary/webgl). Ela abstrai a complexidade da API [WebGL](/glossary/webgl), oferecendo aos desenvolvedores um toolkit de alto nível para construir cenas 3D com câmeras, iluminação, materiais, geometria e loops de animação. Criada originalmente por Ricardo Cabello (Mr.doob) em 2010, Three.js se tornou a biblioteca 3D mais adotada para a web, utilizada em configuradores de produtos, tours arquitetônicos, visualizações de dados e storytelling interativo. Como roda na GPU através do WebGL, Three.js pode renderizar cenas complexas a 60 quadros por segundo em hardware moderno sem necessidade de plugins ou instalações nativas.

Three.js torna possível a renderização 3D de alta fidelidade dentro de uma aba comum do navegador. Para a publicação digital, essa capacidade é transformadora. Em vez de entregar imagens planas de páginas impressas, os editores podem apresentar conteúdo com profundidade física, iluminação realista e animação fluida. Os leitores interagem com páginas que se curvam, projetam sombras e respondem ao toque ou ao mouse, criando uma sensação tátil que PDFs estáticos não conseguem replicar. A biblioteca funciona em todos os principais navegadores (Chrome, Firefox, Safari, Edge) e se adapta a uma ampla gama de dispositivos, de desktops de alto desempenho a smartphones intermediários. Esse alcance multiplataforma permite que editores entreguem uma experiência de leitura premium sem restringir seu público a um app ou sistema operacional específico.

Three.js é o motor de renderização central por trás da experiência de [flipbook](/glossary/flipbook) do FlipLink. Quando você faz upload de um PDF e cria um flipbook, o FlipLink usa Three.js para renderizar cada página como uma superfície 3D com [animações realistas de virada de página](/glossary/page-flip-animation). Cada virada é calculada em tempo real: o papel se deforma ao longo de uma curva, o verso da página se torna visível e sombras dinâmicas se deslocam pela página dupla. O renderizador suporta diferentes [tipos de capa](/glossary/cover-type) — [capa dura](/glossary/hardcover) e [brochura](/glossary/paperback) — cada um com comportamento de flexão e mecânica de lombada distintos. Three.js renderiza toda a cena usando a GPU do leitor, então as animações permanecem fluidas sem processamento do lado do servidor. O FlipLink também oferece um [visualizador de documentos](/glossary/document-viewer) baseado em [PDF.js](/glossary/pdf-js) para situações onde um layout mais simples é preferido, permitindo que editores escolham o formato certo por publicação.

Internamente, a integração do Three.js no FlipLink envolve vários estágios de renderização. Cada página do PDF é rasterizada e aplicada como textura em uma geometria plana subdividida. Quando o leitor inicia uma virada de página, os vértices da geometria são deslocados ao longo de uma curva de Bézier para simular a flexão do papel. Uma fonte de luz direcional posicionada acima do livro gera mapas de sombra em tempo real, de modo que a página curvando projeta sombra sobre a página abaixo. A câmera usa projeção perspectiva, dando ao livro uma sensação natural de profundidade que projeções ortográficas planas não conseguem. Em dispositivos com GPU limitada, Three.js reduz automaticamente a contagem de polígonos e simplifica cálculos de sombra para manter uma taxa de quadros fluida. Todo o pipeline de renderização roda no lado do cliente, ou seja, não é necessário streaming de vídeo ou renderização no servidor — o próprio dispositivo do leitor cuida de tudo.

Transformações CSS 3D (`transform: rotateY()`, `perspective()`) podem girar elementos planos no espaço 3D e às vezes são usadas para efeitos simples de virada de página. No entanto, CSS 3D opera em elementos DOM retangulares e não pode deformá-los — uma página pode rotacionar, mas nunca curvar, dobrar ou flexionar. Three.js, por outro lado, trabalha com geometrias de malha compostas por muitos vértices, podendo simular deformação do papel, espessura variável, curvatura da lombada e projeção de sombras. CSS 3D é mais leve e mais fácil de implementar para interações básicas de card-flip, mas não consegue reproduzir a [simulação realista de livro](/glossary/realistic-book-simulation) que os leitores associam a um livro físico. Para editores que desejam a aparência e sensação de um documento impresso real, Three.js é o motor que torna isso possível.

Three.js traz renderização 3D acelerada por GPU para o navegador, permitindo que o FlipLink entregue flipbooks com curvatura realista de páginas, sombras dinâmicas e profundidade perspectiva — uma experiência que visualizadores planos e animações baseadas em CSS não conseguem igualar.