Speedcubing sur un Rubik’s Cube 3x3x3 en 3D dans le web
(rubiks-cube-sandy.vercel.app)Il s’agit d’un Rubik’s Cube 3D en ligne, créé avec Three.js et React.
J’ai essayé de le rendre rapide et intuitif à manipuler grâce à des raccourcis clavier,
et j’y ai intégré un timer de speedcubing.
Fonctionnalités principales
• Animation de rotation 3D naturelle, comme sur un vrai cube
• Commandes rapides grâce au mapping clavier QWEASD
• Prise en charge de 16 angles de caméra (vue du dessus, du dessous, des coins, etc.)
• Timer de speedcubing et gestion des records
• Système de classement en ligne
• Fonction annuler/rétablir
Contexte de développement
En m’intéressant à Three.js et en cherchant un projet web 3D,
je me suis dit qu’il serait amusant de retrouver sur le web le speedcubing que je pratique habituellement, et de pouvoir comparer ses temps avec d’autres personnes en ligne.
Je l’ai développé avec Claude Code après avoir appris Three.js.
J’ai essayé d’offrir une expérience aussi proche que possible d’un vrai cube, mais il faut clairement un peu de temps pour s’y habituer..!
Il reste encore beaucoup de choses à améliorer. N’hésitez pas à l’essayer et à me faire part de vos retours !
p.s. Le meilleur temps du développeur était de 1:14:361 :)
14 commentaires
Merci pour vos gentils mots !
Ça me fait plaisir de voir les records s’accumuler petit à petit, haha.
Même moi, après m’y être habitué en le créant, mon meilleur temps est de 1 min 14 s,
mais j’ai été surpris de voir que quelqu’un a réussi à faire 1 minute en une seule journée.. !
C’est génial haha
Oh... que de souvenirs...
Ce serait bien de pouvoir aussi contrôler la caméra avec des touches alphabétiques, et pas seulement avec les touches fléchées. J’utilise un clavier sur lequel les touches fléchées ne peuvent être saisies qu’avec une combinaison de touches.
Il est certain que ce cas de figure peut aussi se produire.
Merci pour cet excellent retour !
C’est pris en compte et j’ai mis à jour en conséquence :)
Il semble que la saisie clavier ne soit autorisée qu'une fois l'animation de rotation terminée.
En mettant les entrées clavier en file d'attente (limit=1), puis en exécutant l'action suivante selon la dernière touche saisie une fois l'animation terminée, on pourrait obtenir un contrôle plus fluide.
J’ai pris cela en compte et mis à jour !
Merci pour cet excellent retour 👍
Merci pour vos retours.
J’ai mis à jour le paramétrage des préréglages de couleurs en tenant compte de vos commentaires.
Merci de votre intérêt :)
C’est vraiment bien réalisé !
Waouh, c'est vraiment génial.
Waouh, c'est génial. Je ne sais même pas résoudre le cube moi-même... haha
Merci :)
Je pense que ce serait plus pratique si vous ajoutiez un bouton supplémentaire pour la rotation dans le sens antihoraire parmi les boutons de contrôle à droite. J’ai l’impression que seule la main gauche travaille énormément, haha. Et puis la teinte orange est trop prononcée, donc sur mon écran j’ai du mal à la distinguer du rouge :(
J’ai attribué à la main droite le rôle de changement de point de vue, afin de limiter autant que possible la manipulation du cube, mais c’est vrai que la main gauche est plus sollicitée. Je vais aussi réfléchir à des contrôles côté droit !
Concernant les teintes aussi, je vais essayer de proposer quelques options.
Merci pour votre retour :)