Componentes 3D prontos sobre React Three Fiber — gratuito, sem watermark, totalmente sob seu controle.
15 demos interativas — cada uma mostra um componente Drei em ação
Equivalente ao blob interativo do Spline — MeshDistortMaterial com distort={0.45} e Environment preset.
Objeto 3D girável com mouse/toque — PresentationControls com snap. Html overlay para labels em 3D.
Iluminação com múltiplos PointLights coloridos brand. Sphere com roughness=0 e metalness=1. OrbitControls com autoRotate.
Text3D com bevel e fonte helvetiker. MeshNormalMaterial mostra as normais coloridas.
Material com efeito de ondulação orgânica — perfeito para objetos que parecem geleia ou líquido.
Superfície reflexiva/espelhada com blur — ideal para showcases de produto e cenas premium.
Transmissão e refração realista — efeito cristal/vidro com aberração cromática.
Efeito de faíscas/glitter 3D envolvendo objetos — atmosfera mágica instantânea.
Componentes que sempre encaram a câmera — perfeito para tags, labels e marcadores 3D.
Céu realista com posição do sol e nuvens volumétricas — cenas outdoor instantâneas.
Animações 3D controladas por scroll — a feature mais poderosa do Drei para storytelling.
Centenas de objetos idênticos renderizados com performance otimizada via GPU instancing.
Overlay de loading automático com barra de progresso — UX profissional para cenas pesadas.
Demonstração de materiais com diferentes propriedades — roughness, metalness, emissive e texturas procedurais.
Combinando Environment, Float, Stars, Sparkles, Text3D e ContactShadows em uma única cena premium
Por que Drei é a escolha certa para produção
| Feature | Spline | Drei ✓ |
|---|---|---|
| Gratuito para produção | ✗ Plano pago | ✓ MIT License |
| Sem watermark | ✗ Plano pago | ✓ Sempre |
| Hospedagem própria | ✗ CDN Spline | ✓ Seu servidor |
| Controle de código | ✗ Dependência externa | ✓ Total |
| SSR / Next.js | ⚠ Limitado | ✓ dynamic ssr:false |
| Performance | ⚠ Iframe pesado | ✓ WebGL nativo |
| Personalização | ⚠ Editor visual | ✓ Código completo |
| Blob / Distort | ✓ | ✓ MeshDistortMaterial |
| Objetos flutuantes | ✓ | ✓ <Float> |
| Fundo estrelado | ✓ | ✓ <Stars> |
| HDR externo | ✓ | ⚠ bloqueado pelo CSP — use luzes manuais |
Principais componentes do Drei úteis para marketing
<Float>Objetos flutuantes com animação suave
<Stars>Campo de estrelas com profundidade
<Text3D>Texto 3D extrudado com fonte customizada
<Center>Centraliza geometrias automaticamente
<RoundedBox>Caixa com bordas arredondadas
<MeshDistortMaterial>Material blob/distorcido animado
<MeshWobbleMaterial>Material com efeito jelly/wobble
<MeshReflectorMaterial>Superfície reflexiva/espelhada
<MeshTransmissionMaterial>Material de vidro com refração
<Sparkles>Efeito de faíscas/brilhos 3D
<Billboard>Componente que sempre encara a câmera
<Sky>Céu realista com posição do sol
<Cloud>Nuvem volumétrica orgânica
<ScrollControls>Scroll-driven 3D dentro do Canvas
<Instances>Renderização eficiente de objetos em massa
<Loader>Overlay de loading com barra de progresso
<Html>Elementos HTML em posições 3D
<OrbitControls>Controles de órbita com mouse/touch
<PresentationControls>Arraste para girar sem câmera livre
<ContactShadows>Sombras de contato no chão
<Environment>Iluminação HDRI com presets prontos
useTextureHook para carregar texturas PBR
useGLTFHook para carregar modelos 3D .glb/.gltf
useProgressHook para monitorar progresso de loading