Rubik's Cube · gemma-4-26b-a4b-it

The user wants a 3D interactive Rubik's Cube built with Three.js.
The solution must be contained in a single `index.html` file.
It must use the provided `three.min.js` file.
It must include CSS and JS inline.
It must not use external assets/CDNs.
It must support:
- 3x3 Rubik's Cube.
- Start solved with 6 distinct colors.
- Visible cubie boundaries.
- Buttons for U, D, L, R, F, B and their inverses.
- Animated moves.
- Move queuing to prevent state corruption.
- Background dragging for camera orbit.
- Bounded wheel zoom.
- Scramble and Reset functionality.
- The cube must maintain state (recoloring is not enough).

Plan:
1.  Check if `three.min.js` exists.
2.  Create `index.html` with:
    - HTML structure (canvas for Three.js, UI for controls).
    - CSS for styling.
    - JavaScript for the cube logic.
3.  Cube logic:
    - Create a set of 27 cubies (3x3x3).
    - Each cubie has 6 faces (though some are internal).
    - Use a single `THREE.Group` for the cube or manage individual cubies.
    - To handle rotations, we can rotate the cubies belonging to a specific face.
    - Actually, it's better to group the cubies that belong to a face, rotate the group, and then re-attach the cubies to the scene/root to avoid nested rotation issues or manage their positions/orientations carefully.
    - A better way: Maintain a 3x3x3 array of "cubie" objects. For each rotation, identify which cubies are in the rotation plane, rotate them, and update their positions/rotations in the data structure.
    - Alternatively, use `THREE.Group` for each move. When a move is completed, we update the cubie positions in the world.
4.  Interaction:
    - Mouse/Touch drag for camera orbit.
    - Scroll for zoom.
    - Buttons for moves.
5.  Animation:
    - Use `requestAnimationFrame` and `Tween` or a manual interpolation for smooth rotation. Since I shouldn't use external libraries, I'll implement a simple lerp/tween mechanism.
6.  Verification:
    - Test move/inverse move.
    - Test Scramble/Reset.
    - Test Orbit/Zoom.

Let's start by checking the environment.

Okay, `three.min.js` is present.

Now I will write the `index.html` file.

Plan for `index.html`:
- HTML:
    - `<div id="controls">` for buttons.
    - `<canvas id="canvas">` (or just let Three.js handle it).
- CSS:
    - Full screen, UI overlay.
- JS:
    - `THREE.Scene`, `THREE.PerspectiveCamera`, `THREE.WebGLRenderer`.
    - `OrbitControls` equivalent (since I can't use the official addon). I'll implement a simple version of `OrbitControls` for camera rotation.
    - `Cube` class:
        - Maintains a 3x3x3 array of cubies.
        - Each cubie is a `THREE.Mesh` (a BoxGeometry).
        - Faces (stickers) are colored.
        - Rotation logic:
            - Given an axis and a layer, find cubies in that layer.
            - Rotate the selected cubies.
            - Update their positions and rotations.
    - `Animation` logic:
        - Handle moves one by one.
    - `UI` event listeners.

Detailed implementation of the Cube:
- 27 cubies.
- Each cubie: a `THREE.Mesh` with `BoxGeometry(1, 1, 1)`.
- To make it look like a Rubik's cube, each cubie should have colored faces.
- Actually, it's easier to make each cubie have 6 faces, but some are interior. However, for a Rubik's cube, we only care about the exterior ones.
- The "standard" way is to have a 3x3x3 grid of cubies.
- We need to track which cubie is where.
- When a move is made (e.g., 'U' - Upper layer):
    1. Identify cubies where `y > 0.5` (roughly).
    2. Create a `THREE.Group` and add these cubies to it.
    3. Rotate the group.
    4. After rotation, remove cubies from the group and re-add to the scene, updating their `position` and `rotation`.
    5. Update the internal state of the cube.

Wait, a better way for the state:
- The "state" is the arrangement of colors.
- A 3x3x3 grid of "cubies", where each cubie has 6 colors.
- When rotating a layer, we rotate the actual 3D objects.
- To make it easier, I'll use a 3x3x3 grid of cubie objects.
- Each cubie object will have a `THREE.Mesh` and a coordinate system.

Wait, if I rotate the 3D objects, I need to be careful with the coordinate system.
Actually, if I rotate a group of meshes, I can then re-attach them to the scene and update their positions.

Let's refine the rotation logic:
- Cubies are at integer coordinates: `x, y, z` in `{-1, 0, 1}`.
- For a move (e.g., 'U'):
    1. Filter cubies where `y == 1`.
    2. Rotate them 90 degrees around the Y axis.
    3. Update their positions: `(x, y, z) -> (z, y, -x)`.
    4. Update their rotations.

Wait, `THREE.Group` is great for this.
1. Create a `Group`.
2. Add all cubies in the target layer to the group.
3. Rotate the group.
4. After animation, for each cubie in the group:
    - `scene.attach(cubie)` (this automatically handles the transformation).
    - `cubie.position.round()` (to avoid floating point issues).

Let's implement the Camera controls.
A simple `OrbitControls` can be implemented using `mousemove` and `wheel` events.
- `rotationX`, `rotationY` for orbiting.
- `distance` for zoom.

Let's start writing.

I've written the `index.html`. Now I need to verify it.
The requirements are:
- 3x3 Rubik's cube.
- Starts solved.
- 6 distinct colors and visible boundaries.
- Buttons for U, D, L, R, F, B and inverses.
- Animated moves, move queuing.
- Background dragging orbits camera.
- Scramble and Reset.
- Start solved and handle inverse correctly.

Let's run the application and check the output.

The user wants an interactive 3D Rubik's Cube using `three.min.js`.

1.  **Structure**: Single-page `index.html` with CSS and JS inline.
2.  **Library**: Use `three.min.js` (already present in the directory).
3.  **Core Requirements**:
    *   3x3 Rubik's Cube.
    *   Start solved.
    *   6 distinct colors, visible cubie boundaries.
    *   Buttons for U, D, L, R, F, B and their inverses.
    *   Animate moves.
    *   Queue/disable moves during animation.
    *   Background drag to orbit camera.
    *   Bounded wheel zoom.
    *   Scramble and Reset buttons.
    *   No external assets/CDNs.
4.  **Verification**:
    *   Turn face and inverse face -> back to original state.
    *   Orbit camera.
    *   Reset -> solved state and initial framing.

Plan:
1.  Check if `three.min.js` is in the current directory.
2.  Write the `index.html` file.
    *   HTML structure: `<canvas>` for Three.js, `<div class="controls">` for buttons.
    *   CSS: Absolute positioning for controls, styling for buttons.
    *   JS:
        *   Initialize Three.js scene, camera, renderer.
        *   Create 27 cubies (3x3x3).
        *   Each cubie is a `THREE.Mesh` (BoxGeometry).
        *   Add faces to cubies with specific colors.
        *   Maintain a data structure for the stickers/faces to handle rotation correctly.
        *   Actually, a better way to handle rotations in Three.js for a Rubik's cube is:
            *   Create a group for each face rotation.
            *   When a move is requested, identify the cubies that belong to that face.
            *   Add them to the rotation group.
            *   Animate the rotation.
            *   After rotation, remove cubies from the group and re-attach them to the scene (or a parent group) with updated world positions/orientations to avoid accumulating errors and to keep the coordinate system stable.
        *   Alternatively, just rotate the group and then update the positions of the cubies.
        *   Implement camera controls (OrbitControls-like behavior using `mousedown`, `mousemove`, `wheel`).
        *   Implement rotation logic (U, D, L, R, F, B).
        *   Implement Scramble (random sequence of moves).
        *   Implement Reset.

Let's start by checking the directory contents.