Interactive 3D Rubiks Cube Web App for Users to Manipulate

Create a fully interactive 3D Rubik’s Cube web application that users can manipulate via mouse. The cube must reflect the standard Rubik’s Cube colors on its faces:
– White (up)
– Yellow (down)
– Blue (front)
– Green (back)
– Orange (left)
– Red (right)
**Requirements:**
– Model the Rubik’s Cube as a 3x3x3 grid of smaller cubes (cubies), ensuring each has correctly colored faces per the standard color scheme.
– Implement mouse controls allowing:
– Face Rotation:
– Users can click and drag on a face to rotate it.
– Accurately detect which face is interacted with and rotate it in the correct axis and direction.
– Cube Rotation:
– Users can drag outside the cube’s faces to rotate the entire cube in 3D space.
– Include a scrambling feature with a user interface component to select how many random moves to perform. This scrambling must:
– Animate the moves visibly.
– Realistically shuffle the cube.
– Optional: Include an automatic solving feature that:
– Computes a solution from the current scrambled state.
– Animates step-by-step face rotations to restore the cube to its solved state.
– Use WebGL or a modern 3D JavaScript library (preferably Three.js) for:
– Smooth, responsive 3D rendering and animation.
**Steps:**
1. Build the 3D Rubik’s Cube model as a 3x3x3 grid of cubies using Three.js (or another WebGL-based 3D library).
2. Assign appropriate colors to each visible cubie face according to the standard color scheme.
3. Implement mouse interaction:
– Raycast to detect which cubie face is clicked.
– Determine rotation axis and direction for face rotation based on drag direction.
– Enable cube rotation when dragging outside cube faces.
4. Develop a scrambling mechanism that:
– Generates a random sequence of valid cube moves of user-selected length.
– Animates the scrambling moves clearly.
5. (Optional) Integrate or implement a solver (such as Kociemba’s algorithm or beginner method) that:
– Computes solution moves.
– Animates them back to the solved state.
**Output Format:**
Return a fully functional, self-contained JavaScript codebase suitable for execution in modern browsers without setup beyond standard library imports. The code must:
– Use standard WebGL 3D libraries (Three.js preferred).
– Include comprehensive comments explaining:
– The 3D model structure.
– Input handling.
– Color assignments.
– Scrambling logic.
– Solver approach (if included).
– Provide UI elements for:
– Scramble move count input.
– Buttons for “Scramble” and (optional) “Solve” actions.
– Animate all rotations smoothly for:
– Face turns.
– Whole cube rotation.
– Scrambling.
– Solving.
Ensure the final code is clean, well-structured, and easily runnable directly in a web page.