Show GN: 웹으로 즐기는 3D 3x3x3 루빅스 큐브 스피드 큐빙
(rubiks-cube-sandy.vercel.app)Three.js와 React로 만든 웹 기반 3D 루빅스 큐브입니다.
키보드 단축키로 빠르고 직관적으로 조작할 수 있게 하려고 노력했고,
스피드큐빙 타이머를 구현해두었습니다.
주요 기능
• 실제 큐브처럼 자연스러운 3D 회전 애니메이션
• QWEASD 키보드 매핑으로 빠른 조작 가능
• 16개 카메라 앵글 지원 (위, 아래, 모서리 뷰 등)
• 스피드큐빙 타이머와 기록 관리
• 온라인 랭킹 시스템
• 실행 취소/다시 실행 기능
개발 배경
Three.js에 흥미를 가지게 되어 3D 웹 프로젝트를 찾던 중,
평소 즐기던 스피드큐빙을 웹에서도 즐기고 온라인으로 다른 사람들과 기록을 경쟁할 수 있으면 재밌겠다는 생각에 개발했습니다.
Three.js 학습 후 Claude Code를 사용하여 개발했습니다.
실제 큐브와 최대한 비슷한 경험을 제공하려고 노력했습니다만 확실히 적응하는데 시간이 좀 걸립니다..!
아직 개선할 점이 많습니다. 사용해보시고 피드백 주시면 감사하겠습니다!
p.s. 개발자의 최고 기록은 1:14:361 이었습니다 :)
좋은 말씀들 감사합니다!
기록이 몇개씩 쌓여가는 것을 보니 기분이 좋네요 ㅎㅎ
만들면서 적응한 저도 1분 14초가 최고 기록인데
하루만에 1분 찍으신 분이 계셔서 놀랐습니다..!
회전 애니메이션이 끝난 뒤에만 키입력을 허용되어 있네요.
키입력을 큐(limit=1)에 쌓고, 애니메이션 완료 후에 최근 입력 키에 따라 다음 동작이 실행되게 하면 더 매끄러운 컨트롤이 가능할 것 같읍니다.
반시계 방향 추가 버튼을 우측 컨트롤버튼으로 만들어주시면 좀 더 수월할거같아요. 왼손만 엄청 바쁜거같습니다. ㅋㅋ 그리고 주황색 색조가 너무 쎄서 제 모니터에서는 빨간색과 구별이 잘 안됩니다 ㅠ