Speedcubing Rubik 3x3x3 3D trên web
(rubiks-cube-sandy.vercel.app)Đây là một Rubik 3D nền web được tạo bằng Three.js và React.
Tôi đã cố gắng để có thể điều khiển nhanh và trực quan bằng phím tắt bàn phím,
và cũng đã triển khai bộ đếm thời gian speedcubing.
Các tính năng chính
• Hoạt ảnh xoay 3D tự nhiên như một khối Rubik thật
• Có thể điều khiển nhanh với ánh xạ bàn phím QWEASD
• Hỗ trợ 16 góc camera (trên, dưới, góc chéo, v.v.)
• Bộ đếm thời gian speedcubing và quản lý thành tích
• Hệ thống xếp hạng trực tuyến
• Tính năng hoàn tác/làm lại
Bối cảnh phát triển
Trong lúc bắt đầu hứng thú với Three.js và tìm một dự án web 3D,
tôi nghĩ sẽ rất thú vị nếu có thể chơi speedcubing mà mình vốn yêu thích ngay trên web và cạnh tranh thành tích trực tuyến với người khác, nên đã phát triển dự án này.
Sau khi học Three.js, tôi đã dùng Claude Code để phát triển.
Tôi đã cố gắng mang lại trải nghiệm giống khối Rubik thật nhất có thể, nhưng chắc chắn sẽ mất một chút thời gian để làm quen..!
Vẫn còn nhiều điểm cần cải thiện. Nếu bạn dùng thử và gửi phản hồi thì tôi sẽ rất cảm kích!
p.s. Kỷ lục cá nhân tốt nhất của tác giả là 1:14:361 :)
14 bình luận
Cảm ơn mọi người vì những lời chia sẻ tốt đẹp!
Thấy thành tích dần dần tích lũy thêm từng cái một khiến tôi rất vui haha
Ngay cả tôi, người đã quen tay trong lúc làm ra nó, cũng chỉ có kỷ lục tốt nhất là 1 phút 14 giây,
nhưng có người đã chạm mốc 1 phút chỉ sau một ngày nên tôi thật sự rất bất ngờ..!
Tuyệt đấy haha
Ồ.. gợi lại nhiều ký ức thật..
Sẽ tốt hơn nếu có thể điều khiển camera bằng các phím chữ cái thay vì chỉ bằng phím mũi tên. Tôi đang dùng bàn phím mà các phím mũi tên bắt buộc phải nhập dưới dạng tổ hợp phím.
Chắc chắn đúng là cũng có thể có những trường hợp như vậy.
Cảm ơn bạn vì ý kiến rất hay!
Mình đã cập nhật để phản ánh điều đó rồi :)
Có vẻ hiện tại chỉ cho phép nhận phím sau khi animation xoay kết thúc.
Nếu đưa input bàn phím vào hàng đợi
queue(limit=1), rồi sau khi animation hoàn tất thì thực hiện thao tác tiếp theo theo phím được nhập gần nhất, có lẽ sẽ cho trải nghiệm điều khiển mượt hơn.Mình đã cập nhật để phản ánh ý kiến đó rồi!
Cảm ơn bạn vì ý kiến hay 👍
Cảm ơn mọi người vì những lời góp ý tốt đẹp.
Mình đã cập nhật phần cài đặt preset màu sắc để phản ánh các phản hồi.
Mong mọi người tiếp tục quan tâm :)
Bạn làm rất tốt!
Wow, tuyệt thật đấy.
Wow, tuyệt thật. Vì mình còn chẳng biết chơi khối rubik nữa... haha
Cảm ơn bạn :)
Nếu thêm nút xoay ngược chiều kim đồng hồ thành nút điều khiển bên phải thì có vẻ sẽ thao tác dễ hơn một chút. Có cảm giác chỉ tay trái là bận quá nhiều. haha Và tông màu cam hơi gắt quá nên trên màn hình của tôi khá khó phân biệt với màu đỏ hu hu
Tôi đã gán vai trò chuyển đổi góc nhìn cho tay phải để giảm thao tác điều khiển khối lập phương xuống mức tối đa, nhưng đúng là tay trái bận hơn hẳn. Tôi cũng sẽ cân nhắc thêm phần điều khiển bên phải!
Về phần tông màu nữa, có lẽ tôi cũng nên cố gắng cung cấp thêm một vài tùy chọn.
Cảm ơn bạn đã phản hồi :)