Eu queria entender uma coisa que já vinha me deixando curiosa: até onde dá para levar uma experiência “3D” no navegador sem usar uma engine 3D completa.
Enquanto trabalhava no meu projeto de cara ou coroa, assisti a algumas aulas do Pixar in a Box, da Pixar com a Khan Academy. O que mais me chamou atenção não foi a animação em si, mas a matemática por trás dela.
Então resolvi usar a moeda como um pequeno experimento.
A moeda é construída com elementos comuns do DOM e transformações 3D em CSS. Sem WebGL, sem Three.js.
A parte interessante foi fazer o movimento parecer consistente, em vez de simplesmente girar uma imagem e chamar isso de física.
A física
A animação precisava se comportar de forma independente da taxa de quadros do dispositivo.
Uso Vue para o estado da interface, mas não queria que cada atualização da física passasse pelo sistema reativo. Então o estado da aplicação continua no Vue, enquanto a animação roda diretamente com "requestAnimationFrame", atualizando os nós do DOM envolvidos.
Essa separação fez diferença principalmente quando a animação ficou mais complexa.
A matemática por trás da moeda
A orientação da moeda é calculada a partir da rotação ao longo do tempo, enquanto a perspectiva e os movimentos semelhantes aos de uma câmera são controlados pelas transformações CSS.
Em vez de usar uma engine 3D para resolver essas transformações, calculo os valores necessários e aplico diretamente no elemento.
Foi provavelmente a parte que mais gostei: pegar algo que normalmente parece “renderização 3D” e reduzir a transformações, coordenadas e bastante matemática.
Sensores e interação
Também queria que a moeda respondesse ao dispositivo, em vez de funcionar apenas como uma animação isolada.
No desktop, a moeda pode reagir ao movimento do mouse.
No celular, uso a Device Orientation API para movimentos mais sutis, e os dados do acelerômetro podem ser usados para detectar gestos que iniciam o lançamento.
Assim, a mesma simulação recebe entradas diferentes dependendo do dispositivo.
Som
Outro pequeno problema foi o tempo de resposta.
Para o impacto da moeda, usei a Web Audio API para gerar o som em vez de depender apenas de um arquivo de áudio comum. Isso me dá mais controle sobre o momento em que o som é disparado e sobre a forma como ele é gerado.
Também há tratamento para "prefers-reduced-motion" e suporte à fala nativa em algumas partes da experiência.
A página "/sobre"
Existe outra parte do projeto em que escolhi uma abordagem diferente.
O jogo principal usa CSS 3D, mas a página "/sobre" usa Three.js, carregado por CDN, para renderizar as moedas estilizadas usadas na apresentação.
Para mim, isso não é uma contradição. As duas partes têm objetivos diferentes.
No jogo, existe uma interação contínua e um loop de animação, então fazia sentido manter o núcleo em CSS. Já a página "/sobre" é mais visual e estática, então usar WebGL por meio do Three.js fez sentido ali.
Também construí um menu flutuante de acessibilidade com ajustes de tamanho de fonte, contraste, redução de movimento e suporte à fala usando a Web Speech API.
A navegação foi adaptada para funcionar com rolagem e âncoras na URL, em vez de depender de um sistema separado de slides. Assim, uma seção específica pode ser acessada diretamente por um link.
Também existe música ambiente, com a preferência do usuário armazenada localmente no navegador.
Tudo começou com uma pergunta simples sobre CSS 3D.
No fim, virou um exercício muito melhor para entender transformações, loops de animação, APIs do navegador e a relação entre efeitos visuais e matemática.
O projeto continua simples na essência: jogar uma moeda.
Fazer o navegador se comportar como uma pequena máquina de simulação foi a parte divertida.
Jogo: https://coininbox.cc • GitHub: https://github.com/maycristina/coin-in-box
Top comments (0)