Speedcubing de cubo de Rubik 3x3x3 en 3D para disfrutar en la web
(rubiks-cube-sandy.vercel.app)Es un cubo de Rubik 3D basado en la web, hecho con Three.js y React.
Intenté que se pudiera controlar de forma rápida e intuitiva con atajos de teclado,
y también implementé un temporizador de speedcubing.
Funciones principales
• Animaciones de rotación 3D naturales, como en un cubo real
• Control rápido con mapeo de teclado QWEASD
• Soporte para 16 ángulos de cámara (vista superior, inferior, de esquina, etc.)
• Temporizador de speedcubing y gestión de registros
• Sistema de ranking en línea
• Función de deshacer/rehacer
Contexto de desarrollo
Mientras buscaba un proyecto web 3D después de interesarme en Three.js,
se me ocurrió que sería divertido disfrutar el speedcubing, que practico habitualmente, también en la web y competir en línea con otras personas por los mejores tiempos, así que lo desarrollé.
Después de aprender Three.js, lo desarrollé usando Claude Code.
Intenté ofrecer una experiencia lo más parecida posible a la de un cubo real, pero definitivamente toma algo de tiempo adaptarse..! Todavía hay mucho por mejorar. ¡Si lo prueban y me dejan feedback, se los agradecería!
p.d. El mejor récord del desarrollador fue 1:14:361 :)
14 comentarios
¡Gracias por sus amables palabras!
Me da gusto ver cómo se van acumulando varios récords, jaja.
Incluso yo, que me adapté mientras lo hacía, tengo como mejor marca 1 minuto con 14 segundos,
pero me sorprendió que hubo alguien que logró 1 minuto en solo un día..!
Está genial jaja
Oh... qué recuerdos...
Sería bueno que también se pudiera controlar la cámara con teclas alfabéticas, no solo con las flechas. Uso un teclado en el que las teclas de flecha solo se pueden ingresar obligatoriamente mediante una combinación de teclas.
Definitivamente, ese caso también podría darse.
¡Gracias por la buena observación!
Ya lo actualicé para reflejarlo :)
Parece que solo se permite la entrada de teclas después de que termina la animación de rotación.
Si se acumula la entrada de teclas en una cola (
limit=1) y, al completar la animación, se ejecuta la siguiente acción según la tecla ingresada más recientemente, creo que se podría lograr un control más fluido.Lo he actualizado reflejándolo.
Gracias por la buena sugerencia 👍
Muchas gracias por sus comentarios.
Ya actualicé la configuración de los preajustes de color para reflejar ese feedback.
Agradezco mucho su interés :)
¡Está muy bien hecho!
Wow, está padrísimo.
Guau, está genial. No sé cómo resolver el cubo en sí... jaja
Gracias :)
Si agregan un botón adicional para giro en sentido antihorario como botón de control del lado derecho, creo que sería mucho más fácil. Siento que solo la mano izquierda está haciendo muchísimo trabajo. jaja Y además, el tono de naranja es demasiado intenso, así que en mi monitor no se distingue bien del rojo :(
Le asigné a la mano derecha el cambio de perspectiva para reducir al máximo la manipulación del cubo, pero definitivamente la mano izquierda termina más ocupada. También voy a considerar controles del lado derecho.
Con respecto al tono de color, también tendré que ver cómo ofrecer algunas opciones.
¡Gracias por el feedback :)