वेब पर 3D 3x3x3 Rubik's Cube speedcubing
(rubiks-cube-sandy.vercel.app)यह Three.js और React से बनाया गया एक वेब-आधारित 3D Rubik's Cube है।
इसे कीबोर्ड शॉर्टकट्स के साथ तेज़ और सहज तरीके से नियंत्रित किया जा सके, इसके लिए प्रयास किया गया है,
और इसमें speedcubing timer भी लागू किया गया है।
मुख्य फीचर्स
• असली cube की तरह प्राकृतिक 3D rotation animation
• QWEASD keyboard mapping के साथ तेज़ नियंत्रण
• 16 camera angles का समर्थन (ऊपर, नीचे, corner view आदि)
• speedcubing timer और रिकॉर्ड प्रबंधन
• online ranking system
• undo/redo फीचर
विकास की पृष्ठभूमि
Three.js में रुचि होने के बाद जब मैं 3D web project खोज रहा था,
तो मुझे लगा कि जिस speedcubing को मैं आमतौर पर पसंद करता हूँ, उसे वेब पर भी खेलना और ऑनलाइन दूसरे लोगों के साथ रिकॉर्ड की प्रतिस्पर्धा करना मज़ेदार होगा, इसलिए मैंने इसे विकसित किया।
Three.js सीखने के बाद Claude Code का उपयोग करके इसे विकसित किया गया।
मैंने कोशिश की कि अनुभव असली cube के जितना संभव हो उतना करीब हो, लेकिन इसमें अभ्यस्त होने में निश्चित रूप से थोड़ा समय लगता है..!
अभी भी बहुत कुछ सुधारना बाकी है। इसे इस्तेमाल करके feedback दें तो आभारी रहूँगा!
p.s. डेवलपर का सर्वश्रेष्ठ रिकॉर्ड 1:14:361 था :)
14 टिप्पणियां
अच्छे शब्दों के लिए धन्यवाद!
रिकॉर्ड्स को एक-एक करके बढ़ते देखना अच्छा लग रहा है haha
इसे बनाते-बनाते अभ्यस्त हुआ मैं भी अभी तक 1 मिनट 14 सेकंड ही अपना सर्वश्रेष्ठ रिकॉर्ड बना पाया हूँ,
लेकिन कोई ऐसा भी था जिसने सिर्फ एक दिन में 1 मिनट का रिकॉर्ड बना लिया, यह देखकर मैं हैरान रह गया..!
कमाल है haha
ओह.. पुरानी यादें ताज़ा हो गईं..
अगर कैमरा कंट्रोल arrow keys के बजाय English keys से भी हो सके तो अच्छा होगा। मैं ऐसा keyboard इस्तेमाल करता हूँ जिसमें arrow keys को सिर्फ key combination के साथ ही input किया जा सकता है।
निश्चित रूप से ऐसा मामला भी हो सकता है.
अच्छा सुझाव देने के लिए धन्यवाद!
इसे शामिल करके अपडेट कर दिया है :)
लगता है कि key input सिर्फ rotation animation खत्म होने के बाद ही स्वीकार किया जाता है।
अगर key input को queue (
limit=1) में जमा किया जाए और animation पूरा होने के बाद सबसे हाल की input key के अनुसार अगला action चलाया जाए, तो control और भी smooth हो सकता है।इसे शामिल करके अपडेट कर दिया है!
अच्छे सुझाव के लिए धन्यवाद 👍
अच्छी बातों के लिए धन्यवाद।
फ़ीडबैक को ध्यान में रखते हुए रंग preset सेटिंग अपडेट कर दी है।
कृपया बहुत रुचि दिखाएँ :)
बहुत बढ़िया बनाया है!
वाह, यह तो बहुत शानदार है
वाह, कमाल है। मुझे तो क्यूब चलाना ही नहीं आता..haha
धन्यवाद :)
अगर आप counterclockwise के लिए एक अतिरिक्त बटन को दाईं तरफ के control button के रूप में बना दें, तो इस्तेमाल करना थोड़ा और आसान लगेगा। लगता है मेरा बायाँ हाथ ही बहुत ज़्यादा व्यस्त रहता है। haha और orange का shade इतना तेज़ है कि मेरे monitor पर वह red से अच्छी तरह अलग नहीं दिखता T_T
मैंने दाएँ हाथ को viewpoint बदलने की भूमिका दी है, इसलिए cube manipulation को जितना हो सके कम रखा है, लेकिन सच में बायाँ हाथ ज़्यादा व्यस्त हो जाता है। दाएँ तरफ के controls पर भी विचार करूँगा!
रंग-टोन से जुड़ी कुछ options भी देने की कोशिश करनी होगी।
फ़ीडबैक के लिए धन्यवाद :)