Speedcubing de cubo mágico 3D 3x3x3 no navegador
(rubiks-cube-sandy.vercel.app)Este é um cubo mágico 3D para web feito com Three.js e React.
Procurei tornar a manipulação rápida e intuitiva com atalhos de teclado,
e implementei um timer de speedcubing.
Principais recursos
• Animações de rotação 3D naturais, como em um cubo real
• Controle rápido com mapeamento de teclado QWEASD
• Suporte a 16 ângulos de câmera (superior, inferior, visão de canto etc.)
• Timer de speedcubing e gerenciamento de registros
• Sistema de ranking online
• Funções de desfazer/refazer
Contexto do desenvolvimento
Passei a me interessar por Three.js e, enquanto procurava um projeto web 3D,
pensei que seria divertido poder curtir speedcubing na web também e competir online com outras pessoas pelos tempos, então desenvolvi isso.
Depois de estudar Three.js, desenvolvi usando Claude Code.
Tentei oferecer uma experiência o mais parecida possível com um cubo real, mas com certeza leva um tempinho para se adaptar..!
Ainda há muitos pontos a melhorar. Se experimentarem e me enviarem feedback, agradeço!
p.s. O melhor tempo do desenvolvedor foi 1:14:361 :)
14 comentários
Muito obrigado pelas palavras gentis!
Fico feliz em ver os recordes se acumulando aos poucos haha
Até eu, que me acostumei enquanto desenvolvia, tenho como melhor tempo 1 minuto e 14 segundos,
mas fiquei surpreso porque teve alguém que conseguiu fazer em 1 minuto em apenas um dia..!
Muito legal haha
Oh... bateu a nostalgia...
Seria bom se também fosse possível controlar a câmera com teclas de letras, e não apenas com as setas. Estou usando um teclado em que as teclas de seta só podem ser digitadas obrigatoriamente por meio de combinações de teclas.
Certamente, esse caso também pode acontecer.
Obrigado pela boa sugestão!
Já apliquei isso e deixei atualizado :)
Parece que a entrada de teclas só é permitida depois que a animação de rotação termina.
Se as teclas fossem enfileiradas em uma fila (
limit=1) e, após a animação terminar, a próxima ação fosse executada de acordo com a tecla mais recente, acho que seria possível ter um controle mais fluido.Refleti isso e deixei atualizado!
Obrigado pela boa sugestão 👍
Muito obrigado pelas palavras gentis.
Refleti o feedback e atualizei a configuração de predefinições de cores.
Agradeço muito o interesse :)
Você fez um ótimo trabalho!
Uau, isso é muito incrível.
Uau, muito legal. Eu nem sei resolver o cubo... kkk
Obrigado :)
Se vocês adicionarem um botão extra para rotação no sentido anti-horário como botão de controle do lado direito, acho que ficaria bem mais prático. Parece que só a mão esquerda fica ocupadíssima. kkk E o tom de laranja está forte demais, então no meu monitor eu quase não consigo diferenciar do vermelho :(
Atribuí à mão direita a função de mudar a perspectiva para reduzir ao máximo a necessidade de mexer no cubo, mas realmente a mão esquerda acaba ficando mais ocupada. Também vou considerar controles no lado direito!
Quanto às cores, acho que preciso tentar oferecer algumas opções também.
Obrigado pelo feedback :)