3D Interactive Rubik's Cube

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), and red (right). Requirements: - Model the Rubik's Cube as a 3x3x3 grid of smaller cubes (cubies), each with correctly colored faces per the standard color scheme. - Implement mouse controls allowing: * Rotation of individual cube faces by clicking and dragging on that face, accurately detecting which face is interacted with and rotating it in the correct axis and direction. * Rotation of the entire cube in 3D space by dragging outside the cube’s faces. - 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 shuffling the cube. - Optionally, include an automatic solving feature that computes a solution from the current scrambled state and animates step-by-step face rotations restoring the cube to solved. - 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 and animates the scrambling moves clearly. 5. (Optional) Integrate or implement a solver (such as Kociemba’s algorithm or beginner method) computing solution moves and animating them back to 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, and solver approach if included. - Provide UI elements for scramble move count input and buttons for "Scramble" and (optional) "Solve" actions. - Animate all rotations smoothly for face turns, whole cube rotation, scrambling, and solving. Ensure the final code is clean, well-structured, and easily runnable directly in a web page.