Rubik's Cube Visualizer

This project is an interactive 3D Rubik's Cube visualizer built with Three.js and cubejs, designed to illustrate and animate the process of solving a Rubik's Cube. It was created to support teaching and presentations with a Christian context, highlighting steps such as the "white cross" and "white fish" (Ichthys) as metaphors for faith and transformation.

Features

• 3D Rubik's Cube Visualization: Realistic, interactive cube rendered with Three.js.
• Christian Symbolism: Highlights steps like the white cross and white fish, connecting cube solving to Christian teaching.
• Move Sequence Animation: Enter or paste move sequences to animate the cube's solution or scramble.
• Step-by-Step Playback: Play, pause, and step through moves; supports custom move sequences and scrambles.
• Clean UI Mode: Hide controls for a distraction-free presentation.
• Responsive Controls: Adjust animation speed and pause duration.

Installation

1. Clone the repository:

   git clone https://github.com/BoThomas/rubics-cube.git
   cd rubics-cube

2. Install dependencies:

   bun install

3. Run the development server:

   bun run dev

   The app opens in your default browser automatically. If it does not, visit the URL printed in the terminal (defaults to http://localhost:3000).

Project Structure

• src/server.js — Bun server entry that imports the HTML route and auto-opens the browser in development.
• src/main.js — Three.js scene, cube logic, and UI controls.
• index.html — Primary HTML route that Bun bundles alongside client assets.
• src/style.css — Styles for the UI and cube.
• public/ — Additional static assets served by the bundled route.

Dependencies

• Three.js — 3D rendering.
• cubejs — Rubik's Cube logic and move parsing.
• Bun — Runtime, bundler, and single-file executable toolchain.

Building

• Create a single-file executable:

  bun run bundle

  This generates executables for macOS (ARM and x64), Windows, and Linux in the dist/ directory.