Three.js, Spline ou React Three Fiber: qual tecnologia para o seu site 3D

Use Spline para desenhar e validar uma cena sem programar, three.js quando o 3D precisa de controle total e performance fina, e React Three Fiber quando o site já é feito em React ou Next.js. As três rodam sobre WebGL e não se excluem: muitos projetos usam duas.

WebGL, o que é, e onde entram as três ferramentas?

WebGL é a API do navegador que desenha gráficos 3D e 2D dentro de um elemento canvas, sem plug-in, usando a placa de vídeo do aparelho. A definição está na documentação de WebGL da MDN. Escrever WebGL puro é trabalhoso: cada luz, sombra e material vira centenas de linhas.

É aí que entram as camadas. O three.js se apresenta como uma biblioteca 3D em JavaScript e estava na versão r186 em outubro de 2026. O React Three Fiber é um renderizador React para three.js: um <mesh /> no JSX vira um objeto do three.js. O Spline fica um degrau acima, como ferramenta visual de modelar, animar e publicar.

Os navegadores também passaram a oferecer WebGPU, a API gráfica mais nova. O que ela muda para quem contrata está em WebGPU chegou a todos os navegadores.

Qual a diferença entre three.js, Spline e React Three Fiber na prática?

A diferença real é quem segura o volante. No Spline, quem desenha a cena é o designer, numa interface parecida com a de um software de design. No three.js, cada detalhe passa por código, do carregamento do modelo GLB ao shader. No React Three Fiber, o código é o mesmo three.js, organizado como componentes que reagem ao estado do site.

Fontes: página de preços do Spline e documentação de exportação do Spline, consultadas em outubro de 2026; introdução do React Three Fiber e threejs.org, outubro de 2026. "Peso" e "Equipe" são avaliação da Brave Cross a partir dessas documentações.

Dois detalhes que costumam pegar quem escolhe pelo Spline. Primeiro, a documentação avisa que animações e eventos só funcionam na exportação para Vanilla JS e React. Segundo, a página de preços indica que a exportação de código e o glTF com cor e textura começam no plano Pro.

React Three Fiber deixa o site mais lento que three.js puro?

Segundo a documentação oficial do React Three Fiber, não há sobrecarga no desenho da cena, porque os componentes renderizam fora do ciclo do React. O custo existe em outro lugar: o React precisa estar na página. Se o site já é React ou Next.js, esse peso já foi pago. Se não é, trazer React só para a cena 3D raramente compensa.

A mesma página registra a combinação de versões: R3F 8 trabalha com React 18 e R3F 9 com React 19. Vale conferir antes de atualizar o projeto. Na Brave Cross, os sites são feitos em Next.js, React e TypeScript, e o 3D usa three.js e React Three Fiber, com modelos do Blender exportados em GLB com Draco.

Peso de verdade, porém, quase nunca vem da biblioteca. Vem do modelo, das texturas e de quando a cena carrega. O monólito da home da Brave Cross é um GLB de 36 KB, e no celular o 3D só carrega depois do primeiro quadro. O passo a passo está em Site 3D pesa?.

Como escolher a tecnologia do seu site 3D?

Um atalho útil: estude como os sites premiados resolvem o mesmo problema. O roteiro está em como estudar um site do Awwwards por dentro, e o Extrator da Brave Cross baixa o site inteiro para abrir no seu computador, com 3D, texturas e fontes, para você inspecionar sem pressa.

E a IA que gera 3D?

Ferramentas como o Meshy geram modelos a partir de texto ou imagem. Pela página de preços do Meshy, em outubro de 2026, o plano grátis dá 100 créditos por mês, e o que sai dele fica sob licença CC BY 4.0: uso comercial permitido, com atribuição ao Meshy. Nos planos pagos, os modelos passam a ser seus. A exportação inclui GLB, o formato que three.js e R3F carregam direto.

A IA baixa o custo do objeto, não da experiência. O modelo gerado ainda precisa de limpeza de malha, compressão, luz, câmera e, principalmente, uma razão para estar na página. A cena que vende é a que conversa com a rolagem e com a mensagem, tema de Scrollytelling.

Perguntas frequentes

Three.js é gratuito para uso comercial?

Sim. O three.js é uma biblioteca de código aberto, distribuída sem custo de licença, e pode ser usada em sites comerciais. O custo está no tempo de desenvolvimento: luz, materiais, performance e testes em celular exigem um desenvolvedor criativo com base em JavaScript e matemática 3D. A versão publicada em threejs.org em outubro de 2026 era a r186.

Dá para fazer um site 3D só com Spline?

Dá, para cenas isoladas e protótipos. O limite aparece quando o 3D precisa reagir ao conteúdo, ao scroll fino ou a dados do site. Pela página de preços do Spline, em outubro de 2026, o plano Free exporta para a web com marca d'água, e exportação de código começa no Pro, a US$ 25 por mês no anual.

Preciso saber React para usar React Three Fiber?

Precisa. O React Three Fiber é um renderizador React, então componentes, estado e hooks são pré-requisito. Também ajuda conhecer o three.js por baixo, porque a documentação do R3F diz que tudo que funciona no three.js funciona nele, e os conceitos de cena, câmera e malha são os mesmos.

Spline exporta para three.js?

Sim. A documentação de exportação do Spline lista Vanilla JS, three.js, React, Next.js e react-three-fiber. Mas avisa que animações e eventos só vêm junto na exportação para Vanilla JS e React. Em three.js, a cena chega, e a interação precisa ser refeita em código.

O que estudar primeiro para criar sites 3D?

JavaScript sólido, depois o básico de three.js (cena, câmera, luz, malha, carregar um GLB), e só então React Three Fiber, se o seu trabalho for em React. Em paralelo, aprender a otimizar modelos no Blender evita a maioria dos problemas de peso. O panorama completo está no guia de site 3D.

Comece pela base que sustenta as três

Spline, three.js e React Three Fiber não competem: são degraus. O editor visual aprova a ideia, o código entrega o controle, e a escolha final depende de quem vai manter o site. A tecnologia certa é a que a sua equipe domina e consegue medir no celular.

Se você quer construir essa base, a escola da Brave Cross ensina Front-End e Next.js na mesma lógica de projeto real. Conheça a Brave Cross Education.