Voltar para o Showcase
UXAo vivo

3D & Animações Avançadas

Uma cena 3D responsiva, com iluminação realista, materiais PBR e câmera orbitável pode ser o diferencial entre uma página simples e uma página que chama a atenção das pessoas para o seu produto ou sistema. O sistema solar interativo é um demonstrativo do que podemos fazer com 3d em um website moderno. O sistema de partículas com shader personalizado demonstra uso de WebGL e matemática 3D. Um scroll também pode se tornar atrativo via GSAP-like, controle de câmera com DREI etc.

Three.js React-Three-Fiber WEBGL 3D Shader GLSL Scroll Animação

Tecnologias

  • React Three Fiber
  • @react-three/drei
  • Three.js
  • GLSL

Arquitetura

  • Cena interativa com OrbitControls
  • Câmera que persegue o alvo focado
  • Sistema de Partículas com Shader GLSL
  • Scroll interativo

Conceitos

  • Cenas 3D
  • Materiais Sólidos
  • GLSL Shaders
  • Sistema de Partículas
  • Scroll com Câmera
  • Performance 3D

Área de demonstração

A demonstração é 100% funcional — teste agora.

Demo Anterior

Autenticação

Demonstração interativa dos principais mecanismos de autenticação modernos: JWT com Refresh Token, OAuth2.0, autenticação de dois fatores (TOTP), login sem senha através de um Magic Link e biometria com WebAuthn/Passkeys.

Próxima Demo

API's de Câmera, Tela & Audio

Câmera, gravação de tela e gravação de áudio direto do navegador — captura, encoding e player customizado, sem plugins e sem upload.