Webで楽しむ3D 3x3x3 ルービックキューブ・スピードキュービング
(rubiks-cube-sandy.vercel.app)Three.jsとReactで作ったWebベースの3Dルービックキューブです。
キーボードショートカットで素早く直感的に操作できるよう工夫し、
スピードキュービング用タイマーも実装しています。
主な機能
• 実際のキューブのような自然な3D回転アニメーション
• QWEASDキーマッピングによる高速操作
• 16種類のカメラアングルに対応（上、下、コーナービューなど）
• スピードキュービング用タイマーと記録管理
• オンラインランキングシステム
• 元に戻す/やり直し機能
開発の背景
Three.jsに興味を持ち、3D Webプロジェクトを探していたところ、
普段楽しんでいるスピードキュービングをWebでも遊べて、オンラインで他の人と記録を競えたら面白そうだと思い開発しました。
Three.jsを学習した後、Claude Codeを使って開発しました。
実際のキューブにできるだけ近い体験を提供できるよう努めましたが、慣れるまでには少し時間がかかります…！
まだ改善すべき点がたくさんあります。ぜひ使ってみて、フィードバックをいただけるとうれしいです！
p.s. 開発者の自己ベストは1:14:361でした :)
14件のコメント
温かいお言葉ありがとうございます！
記録が少しずつ積み上がっていくのを見ると嬉しいですね（笑）
作りながら慣れた私でもベストは1分14秒なのですが、
1日で1分を出した方がいて驚きました..!
すてきですね（笑）
おお…懐かしいですね…。
カメラ操作は方向キーだけでなくアルファベットキーでもできるといいですね。方向キーを必ずキーの組み合わせでしか入力できないキーボードを使っています。
確かに、そのようなケースもあり得ますね。
ご意見ありがとうございます！
反映して更新しておきました :)
回転アニメーションが終わったあとにしかキー入力を受け付けないようですね。
キー入力をキュー（limit=1）に積んで、アニメーション完了後に直近の入力キーに応じて次の動作が実行されるようにすれば、より滑らかな操作ができそうです。
反映して更新しておきました！
貴重なご意見ありがとうございます 👍
温かいお言葉ありがとうございます。
フィードバックを反映し、カラープリセット設定を更新しておきました。
引き続きご関心をお寄せいただければ幸いです :)
よく作られていますね！
わあ、とても素敵ですね
わあ、すごいですね。キューブ自体はできなくて…（笑）
ありがとうございます :)
反時計回りの追加ボタンを右側のコントロールボタンにしていただけると、もう少しやりやすくなると思います。左手だけがものすごく忙しい感じです。笑 それと、オレンジ色の色味が強すぎて、私のモニターでは赤色との区別があまりつきません（泣）
右手には視点変更の役割を割り当てて、キューブ操作はできるだけ減らしていたのですが、やはり左手のほうが忙しくなりますね。右側のコントロールも検討してみます！
色合いについても、いくつかオプションを提供できるようにしてみますね。
フィードバックありがとうございます :)