The user wants me to create an interactive 3D Rubik's Cube using three.js. Let me plan this out:

1. A 3x3x3 Rubik's Cube with colored faces
2. Clickable face rotations (clicking on a face rotates that face)
3. Orbit-drag camera (using OrbitControls or custom implementation)
4. A scramble button

Since I can't use external CDNs, I need to use the local three.min.js file. Let me check what's available in the current directory first.

Wait, the instructions say "These library file(s) are ALREADY present in the current directory — load each with a plain <script src="NAME"></script> using its exact filename (never a CDN or URL), then build on top of it: three.min.js."

So three.min.js is already in the directory. I need to build a complete Rubik's Cube in a single index.html file.

Let me think about the Rubik's Cube implementation:

1. **Cube Structure**: 3x3x3 = 27 smaller cubes (cubies), but only 26 are visible (center is hidden)
2. **Colors**: Standard Rubik's cube colors - white (top), yellow (bottom), red (front), orange (back), blue (right), green (left)
3. **Face Rotations**: When clicking on a face, rotate that face 90 degrees
4. **Orbit Controls**: I need to implement orbit-drag camera since I can't use OrbitControls from the addons
5. **Scramble Button**: Randomly rotate faces

For orbit controls without the addon, I'll implement a simple orbit camera with mouse drag.

Let me think about the face rotation mechanics:
- Each face of the cube has 9 stickers (3x3)
- When a face is clicked, the 9 cubies on that face rotate together
- I need to track the state of each cubie's position and orientation

Actually, implementing a full Rubik's Cube with proper rotation mechanics is quite complex. Let me think about the best approach:

**Approach**: Each cubie is a separate mesh. When a face rotation happens, I need to:
1. Identify which cubies belong to that face
2. Rotate them around the appropriate axis
3. Update their positions and orientations

Let me think about the coordinate system:
- Cube is centered at origin
- Each cubie is at integer coordinates (x, y, z) where x, y, z ∈ {-1, 0, 1}
- Face rotations rotate a plane of cubies around one axis

For face rotations:
- Right face (x=1): rotate around X axis
- Left face (x=-1): rotate around X axis
- Top face (y=1): rotate around Y axis
- Bottom face (y=-1): rotate around Y axis
- Front face (z=1): rotate around Z axis
- Back face (z=-1): rotate around Z axis

Actually, let me reconsider. The rotation axis for each face:
- Right face (x=1): rotate around X axis
- Left face (x=-1): rotate around X axis
- Top face (y=1): rotate around Y axis
- Bottom face (y=-1): rotate around Y axis
- Front face (z=1): rotate around Z axis
- Back face (z=-1): rotate around Z axis

Wait, I need to be more careful. When rotating the right face, the rotation is around the X axis. When rotating the top face, the rotation is around the Y axis. Etc.

For the click detection, I'll use raycasting to detect which face of the cube was clicked, then determine which face rotation to apply.

Let me think about the sticker colors:
- Front (z=1): Red
- Back (z=-1): Orange
- Right (x=1): Blue
- Left (x=-1): Green
- Top (y=1): White
- Bottom (y=-1): Yellow

Standard colors:
- White: #FFFFFF
- Yellow: #FFD700
- Red: #FF0000
- Orange: #FF8C00
- Blue: #0000FF
- Green: #00FF00

Let me now write the code. I'll need to:

1. Create 26 cubies (excluding center)
2. Each cubie has up to 3 visible faces
3. Use raycasting for click detection
4. Implement orbit camera with mouse drag
5. Implement scramble functionality
6. Animate rotations smoothly

For the orbit camera, I'll implement a simple polar coordinate camera that orbits around the center.

Let me think about the rotation animation. When a face is rotated, I need to:
1. Identify the 9 cubies on that face
2. Animate them rotating 90 degrees around the appropriate axis
3. After animation, update their actual positions/rotations

Actually, for simplicity, I can use THREE.Group to group the cubies that need to rotate, apply the rotation to the group, and then after animation, update individual cubie transforms and the group transform back to zero.

Let me structure the code:

```javascript
// Cube state
const cubeSize = 3;
const cubies = []; // Array of {mesh, group, x, y, z}

// Face definitions
const faces = [
  { name: 'right', axis: 'x', direction: 1, color: 0x0000ff },
  { name: 'left', axis: 'x', direction: -1, color: 0x00ff00 },
  { name: 'top', axis: 'y', direction: 1, color: 0xffffff },
  { name: 'bottom', axis: 'y', direction: -1, color: 0xffd700 },
  { name: 'front', axis: 'z', direction: 1, color: 0xff0000 },
  { name: 'back', axis: 'z', direction: -1, color: 0xff8c00 },
];
```

Wait, I need to be more careful about which axis each face rotates around. When you rotate the right face (x=1), you rotate around the X axis. The direction of rotation depends on which way you're looking at it.

Let me think about this more carefully with the right-hand rule:
- Right face (x=1): rotate around X axis. Looking from +X towards origin, clockwise rotation.
- Left face (x=-1): rotate around X axis. Looking from -X towards origin, clockwise rotation.
- Top face (y=1): rotate around Y axis. Looking from +Y towards origin, clockwise rotation.
- Bottom face (y=-1): rotate around Y axis. Looking from -Y towards origin, clockwise rotation.
- Front face (z=1): rotate around Z axis. Looking from +Z towards origin, clockwise rotation.
- Back face (z=-1): rotate around Z axis. Looking from -Z towards origin, clockwise rotation.

For the rotation, I'll use positive rotation for clockwise when looking from the positive axis direction towards the origin.

Actually, let me simplify. For each face, I'll define:
- The axis of rotation
- The direction (which way is "clockwise" when looking at the face)

For the right face (x=1): rotation around X, positive angle (right-hand rule)
For the left face (x=-1): rotation around X, negative angle
For the top face (y=1): rotation around Y, negative angle (because Y is up, and looking down at top face, clockwise is negative Y rotation)
Hmm, this is getting confusing. Let me just define it empirically.

Actually, let me think about it differently. When you rotate a face of a Rubik's cube:

Right face (x=1): The face is on the right. Rotating it clockwise (when looking at it from the right side) means rotating around the X axis in the positive direction (right-hand rule: thumb points +X, fingers curl from +Y to +Z).

Wait, right-hand rule: thumb along +X, fingers curl from +Y towards +Z. So a positive rotation around X takes +Y towards +Z.

Let me think about what happens to the front face stickers when we rotate the right face clockwise:
- The front-top sticker goes to the bottom-front
- The front-bottom sticker goes to the top-front
- etc.

Actually, I think I'm overcomplicating this. Let me just implement it and adjust the rotation direction based on visual feedback.

Let me think about a simpler approach:

For each face rotation:
1. Create a group containing the 9 cubies on that face
2. Rotate the group by 90 degrees around the face's normal axis
3. After animation, update each cubie's position based on the rotation

The tricky part is that after rotation, the cubies' positions change. For example, rotating the right face (x=1) 90 degrees around X:
- A cubie at (1, 1, 1) stays at (1, 1, 1) - it's on the axis
- A cubie at (1, 1, -1) goes to (1, -1, -1) - wait, that's not right

Let me think about rotation around X axis by 90 degrees (positive, right-hand rule):
- (x, y, z) → (x, -z, y)

So for the right face (x=1):
- (1, 1, 1) → (1, -1, 1)
- (1, 1, -1) → (1, 1, 1)
- (1, -1, -1) → (1, 1, -1)
- (1, -1, 1) → (1, -1, -1)
- (1, 0, 0) → (1, 0, 0) - center stays
- etc.

This looks correct! The front-top goes to right-top, right-top goes to back-top, etc.

OK so for each face rotation, I need to:
1. Group the 9 cubies on that face
2. Apply a 90-degree rotation around the face's axis
3. After animation, update each cubie's position and rotation

But there's a complication: the cubies have their own rotations (from previous rotations), so I need to compose rotations properly.

Let me think about this differently. Instead of tracking absolute positions and rotations, I'll track the cubies' state and update their transforms each frame.

Actually, the simplest approach for a working demo:
- Each cubie is a mesh with position and rotation
- When a face rotation happens, I animate the group rotation
- After animation completes, I update each cubie's absolute position and rotation based on the group rotation, then reset the group

Let me code this up now.

For the orbit camera, I'll implement a simple polar coordinate system:
- Camera position: (radius * sin(polar) * cos(azimuth), radius * cos(polar), radius * sin(polar) * sin(azimuth))
- Camera looks at origin
- Mouse drag changes azimuth and polar
- Scroll changes radius

Let me also think about the UI:
- A canvas for the 3D scene
- A scramble button
- Instructions

Let me write the complete HTML file now.

Actually, for the face rotation, I need to think about how to detect which face was clicked. I'll use raycasting against the individual sticker meshes. Each sticker will have a userData property indicating which face it belongs to.

Wait, actually each cubie has multiple faces. When I click on a sticker, I need to know which face of the Rubik's cube that sticker belongs to. I can store this in the mesh's userData.

Let me plan the cubie construction:
- Each cubie is a group of 3 meshes (for the 3 visible faces) if it's a corner, 2 meshes if it's an edge, 1 mesh if it's a center piece
- Actually, for simplicity, I'll make each cubie a single box with different colored faces

Hmm, but a single box geometry has 6 faces, and I need different colors on different faces. I can use an array of materials for the box, one for each face.

For a 3x3x3 cube:
- Corner cubies (8): 3 visible faces
- Edge cubies (12): 2 visible faces
- Center cubies (6): 1 visible face
- Core (1): 0 visible faces (hidden)

For each cubie, I need to assign colors to the appropriate faces of the box geometry.

The box geometry has 6 faces:
- +X (right)
- -X (left)
- +Y (top)
- -Y (bottom)
- +Z (front)
- -Z (back)

For a cubie at position (1, 1, 1) (top-right-front corner):
- +X face should be blue (right face of cube)
- +Y face should be white (top face of cube)
- +Z face should be red (front face of cube)
- -X, -Y, -Z faces are internal and should be dark/black

So I need to assign materials to each face of each cubie's box based on its position.

Let me define the color mapping:
- +X face → right face color (blue)
- -X face → left face color (green)
- +Y face → top face color (white)
- -Y face → bottom face color (yellow)
- +Z face → front face color (red)
- -Z face → back face color (orange)

But this only applies to the outer faces of the cube. For internal faces (where two cubies meet), I should use a dark color.

So for each cubie at (cx, cy, cz):
- +X face: if cx == 1, blue; else, dark
- -X face: if cx == -1, green; else, dark
- +Y face: if cy == 1, white; else, dark
- -Y face: if cy == -1, yellow; else, dark
- +Z face: if cz == 1, red; else, dark
- -Z face: if cz == -1, orange; else, dark

This is a clean approach. Let me implement it.

Now for the rotation mechanics. When I rotate a face, I need to:
1. Find all cubies on that face
2. Animate them rotating together
3. After animation, update their positions and orientations

I'll use a group approach:
1. Create a temporary group
2. Add the 9 cubies to the group
3. Remove them from the scene
4. Add the group to the scene
5. Animate the group rotation
6. After animation, remove the group, update each cubie's position/rotation, add them back to the scene

Wait, this is complex because the cubies are already in the scene. Let me think of a simpler approach.

Alternative approach: Use a THREE.Group for each face rotation. When rotating:
1. Create a new group at the center of the face
2. Add the 9 cubie meshes to this group
3. Remove them from the main scene
4. Add the group to the main scene
5. Animate the group's rotation
6. After animation, remove the group, update each cubie's world position/rotation, add them back to the main scene

But updating world position/rotation after group rotation is tricky because the cubies already have their own transforms.

Let me think about this differently. I'll store each cubie's logical position (grid coordinates) and cumulative rotation. The visual transform is computed from these.

Actually, the simplest working approach:
- Each cubie has a mesh at its grid position
- When a face rotates, I animate the group rotation
- After animation, I update the mesh positions and rotations of the affected cubies

Let me use this approach:
1. Store cubie data: { mesh, x, y, z, rotationX, rotationY, rotationZ }
2. When rotating a face:
   a. Collect the 9 cubies on that face
   b. Create a group, position it at origin
   c. For each cubie, remove its mesh from scene, add to group, set mesh position relative to group
   d. Animate group rotation
   e. After animation, for each cubie, remove from group, compute new position and rotation, add back to scene

Actually, I think the cleanest approach is:
- Each cubie's mesh is always at its current position
- For animation, I temporarily parent the meshes to a rotation group
- After animation, I update the cubie's logical state and re-parent

Let me just code it up. I'll use a simpler approach where I directly manipulate the cubie meshes.

Here's my plan:

```javascript
class RubiksCube {
  constructor() {
    this.cubies = []; // { mesh, x, y, z }
    this.rotating = false;
    this.rotationGroup = null;
    this.init();
  }
  
  init() {
    // Create 26 cubies
    for (let x = -1; x <= 1; x++) {
      for (let y = -1; y <= 1; y++) {
        for (let z = -1; z <= 1; z++) {
          if (x === 0 && y === 0 && z === 0) continue; // Skip center
          this.createCubie(x, y, z);
        }
      }
    }
  }
  
  createCubie(x, y, z) {
    // Create box with appropriate face colors
    const materials = this.getMaterials(x, y, z);
    const geometry = new THREE.BoxGeometry(0.95, 0.95, 0.95);
    const mesh = new THREE.Mesh(geometry, materials);
    mesh.position.set(x, y, z);
    mesh.userData = { face: this.getFace(x, y, z) }; // For raycasting
    scene.add(mesh);
    this.cubies.push({ mesh, x, y, z });
  }
  
  rotateFace(faceName) {
    // Get the 9 cubies on this face
    // Create rotation group
    // Animate
    // Update positions
  }
}
```

OK let me just write the full code now. I'll be careful with the rotation mechanics.

For the orbit camera, I'll implement it manually since I can't use OrbitControls from the addons (they're not available as a local file).

Let me write the complete code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Rubik's Cube</title>
  <style>
    /* styles */
  </style>
</head>
<body>
  <script src="three.min.js"></script>
  <script>
    // All the code
  </script>
</body>
</html>
```

Let me think about the face rotation more carefully.

When rotating the front face (z=1) clockwise (looking from +Z towards origin):
- The rotation is around the Z axis
- Using right-hand rule, positive rotation around Z takes +X towards +Y
- But when looking at the front face from the front, clockwise rotation takes the top towards the right
- So from the front view, clockwise is: +Y → +X → -Y → -X → +Y
- In terms of the right-hand rule (positive Z rotation): +X → +Y → -X → -Y → +X
- That's counterclockwise from the front view!

So for the front face, a clockwise rotation (as seen from the front) is a NEGATIVE rotation around Z.

Let me define the rotation directions:
- Front face (z=1): clockwise from front = negative Z rotation
- Back face (z=-1): clockwise from back = positive Z rotation (since we're looking from -Z)
- Right face (x=1): clockwise from right = negative X rotation? No...

Hmm, let me think again. When looking at the right face from the right (+X direction):
- Clockwise rotation takes +Y towards -Z (top goes to the back)
- In right-hand rule terms, this is... thumb along +X, positive rotation takes +Y towards +Z
- But we want +Y towards -Z, so it's negative X rotation

Wait, let me reconsider. Looking from the +X direction towards the origin:
- +Y is up, +Z is towards us (into the screen from our perspective)
- Clockwise rotation: +Y → -Z → -Y → +Z → +Y
- Right-hand rule for +X rotation: +Y → +Z → -Y → -Z → +Y
- So clockwise from +X view is NEGATIVE X rotation

Hmm, that doesn't seem right either. Let me think about it with actual cube rotations.

When you rotate the right face of a Rubik's cube clockwise (looking at it from the right side):
- The top-front sticker goes to the top-back
- The top-back sticker goes to the bottom-back
- The bottom-back sticker goes to the bottom-front
- The bottom-front sticker goes to the top-front

In coordinates:
- (1, 1, 1) → (1, 1, -1) [top-front → top-back]
- (1, 1, -1) → (1, -1, -1) [top-back → bottom-back]
- (1, -1, -1) → (1, -1, 1) [bottom-back → bottom-front]
- (1, -1, 1) → (1, 1, 1) [bottom-front → top-front]

So the mapping is: (1, y, z) → (1, ?, ?)
- (1, 1, 1) → (1, 1, -1): y stays 1, z goes from 1 to -1
- (1, 1, -1) → (1, -1, -1): y goes from 1 to -1, z stays -1
- (1, -1, -1) → (1, -1, 1): y stays -1, z goes from -1 to 1
- (1, -1, 1) → (1, 1, 1): y goes from -1 to 1, z stays 1

So the transformation for the right face is:
- y' = z (no wait...)
- z' = -y

Let me check: (1, 1, 1) → (1, 1, -1): y'=1, z'=-1. If y'=z and z'=-y, then y'=1, z'=-1. ✓
(1, 1, -1) → (1, -1, -1): y'=-1, z'=-1. If y'=z and z'=-y, then y'=-1, z'=-1. ✓
(1, -1, -1) → (1, -1, 1): y'=1, z'=1. If y'=z and z'=-y, then y'=1... wait, z=-1, so y'=-1. That's wrong.

Let me redo: (1, -1, -1) → (1, -1, 1)
y' = -1, z' = 1
If y' = -z and z' = y: y' = -(-1) = 1 ≠ -1. Wrong.
If y' = z and z' = -y: y' = -1 ✓, z' = -(-1) = 1 ✓. 

Wait, let me recheck (1, 1, 1) → (1, 1, -1):
y' = z = 1 ✓
z' = -y = -1 ✓

(1, 1, -1) → (1, -1, -1):
y' = z = -1 ✓
z' = -y = -1 ✓

(1, -1, -1) → (1, -1, 1):
y' = z = -1 ✓
z' = -y = 1 ✓

(1, -1, 1) → (1, 1, 1):
y' = z = 1 ✓
z' = -y = 1 ✓

So the right face clockwise rotation (looking from +X) is:
y' = z, z' = -y

This is a rotation around the X axis by -90 degrees (or 270 degrees).

In terms of THREE.js rotation: rotation.x -= Math.PI / 2

Let me verify with the rotation matrix for -90° around X:
[1  0   0] [x]   [x]
[0  0   1] [y] = [z]
[0  -1  0] [z]   [-y]

So (x, y, z) → (x, z, -y). Yes! That matches.

Now let me figure out all 6 faces:

**Right face (x=1), clockwise from +X view:**
Rotation around X by -90°: (x, y, z) → (x, z, -y)

**Left face (x=-1), clockwise from -X view:**
Looking from -X, clockwise takes +Y towards +Z (opposite of +X view)
So: (x, y, z) → (x, -z, y)
Rotation around X by +90°: (x, y, z) → (x, -z, y)

Let me verify: (-1, 1, 1) → (-1, 1, -1)? 
Looking from -X, clockwise: top goes to left (which is +Z from -X view)
(-1, 1, 1) → (-1, -1, 1)? No...

Hmm, let me think about this differently. For the left face, looking from the left (-X direction):
- +Y is up, +Z is to the right (from -X view)
- Clockwise: +Y → +Z → -Y → -Z → +Y
- So (x, y, z) → (x, -z, y)

Check: (-1, 1, 1) → (-1, -1, 1)
(-1, -1, 1) → (-1, -1, -1)
(-1, -1, -1) → (-1, 1, -1)
(-1, 1, -1) → (-1, 1, 1)

That forms a cycle: (1,1)→(-1,1)→(-1,-1)→(1,-1)→(1,1) in the yz plane. That's clockwise from -X view. ✓

**Top face (y=1), clockwise from +Y view:**
Looking from +Y (top), clockwise takes +X towards -Z
(x, y, z) → (-z, y, x)

Check: (1, 1, 1) → (-1, 1, 1)
(-1, 1, 1) → (-1, 1, -1)
(-1, 1, -1) → (1, 1, -1)
(1, 1, -1) → (1, 1, 1)

That's clockwise from top view. ✓

**Bottom face (y=-1), clockwise from -Y view:**
Looking from -Y (bottom), clockwise takes +X towards +Z
(x, y, z) → (z, y, -x)

Check: (1, -1, 1) → (1, -1, -1)
(1, -1, -1) → (-1, -1, -1)
(-1, -1, -1) → (-1, -1, 1)
(-1, -1, 1) → (1, -1, 1)

Clockwise from bottom view. ✓

**Front face (z=1), clockwise from +Z view:**
Looking from +Z (front), clockwise takes +X towards -Y
(x, y, z) → (y, -x, z)

Check: (1, 1, 1) → (1, -1, 1)
(1, -1, 1) → (-1, -1, 1)
(-1, -1, 1) → (-1, 1, 1)
(-1, 1, 1) → (1, 1, 1)

Clockwise from front view. ✓

**Back face (z=-1), clockwise from -Z view:**
Looking from -Z (back), clockwise takes +X towards +Y
(x, y, z) → (-y, x, z)

Check: (1, 1, -1) → (-1, 1, -1)
(-1, 1, -1) → (-1, -1, -1)
(-1, -1, -1) → (1, -1, -1)
(1, -1, -1) → (1, 1, -1)

Clockwise from back view. ✓

Great, now I have all 6 face rotations defined.

Now for the animation, I'll use a simple approach:
1. When a face rotation is triggered, collect the 9 cubies on that face
2. Create a group at the center
3. Parent those cubies to the group
4. Animate the group rotation from 0 to 90° (or -90°)
5. After animation, unparent the cubies, update their positions, and re-parent to scene

For the orbit camera, I'll implement a simple polar coordinate camera system with mouse drag.

Let me also think about the scramble. I'll randomly select 20-25 face rotations with random directions.

Now let me write the complete code. I'll make it visually appealing with a dark background, a nice UI panel, and smooth animations.

Let me also think about the raycasting for face detection. When the user clicks on a cubie, I need to determine which face of the Rubik's cube they clicked. I can store the face information in the mesh's userData.

For each cubie, I'll create 6 box faces (using an array of 6 materials), and each material will have a userData indicating which face it belongs to (or "internal" for hidden faces).

Actually, for raycasting, I need to know which face of the Rubik's cube was clicked. When a ray hits a mesh, I can check the face index and the cubie's position to determine which face of the cube it belongs to.

Alternatively, I can assign each mesh a userData.face property that indicates which face of the Rubik's cube that sticker belongs to.

Let me simplify: each cubie mesh has userData.face = 'right', 'left', 'top', 'bottom', 'front', or 'back' for the visible faces, and 'internal' for hidden faces. When raycasting hits a mesh, I check userData.face to determine which face rotation to apply.

Wait, but each cubie has multiple meshes (one per visible face). I need to create separate meshes for each visible face, or use a single mesh with multiple materials.

Using a single BoxGeometry with 6 materials is simpler. When raycasting hits the mesh, I can check which face was hit using intersection.faceIndex, and then determine which face of the Rubik's cube that corresponds to based on the cubie's position.

Actually, with BoxGeometry and an array of materials, the face indices are:
- 0: +X (right)
- 1: -X (left)
- 2: +Y (top)
- 3: -Y (bottom)
- 4: +Z (front)
- 5: -Z (back)

For a cubie at position (x, y, z), the visible faces are those where the coordinate is at the boundary (-1 or 1). So:
- If x == 1, face 0 (+X) is visible and belongs to the right face
- If x == -1, face 1 (-X) is visible and belongs to the left face
- If y == 1, face 2 (+Y) is visible and belongs to the top face
- If y == -1, face 3 (-Y) is visible and belongs to the bottom face
- If z == 1, face 4 (+Z) is visible and belongs to the front face
- If z == -1, face 5 (-Z) is visible and belongs to the back face

When a ray hits a face, I can check the face index and the cubie's position to determine which Rubik's cube face was clicked.

But wait, when the cube is being rotated, the face indices in world space change. The face index in the geometry is relative to the cubie's local space. So if a cubie has been rotated, the face index still refers to the same local face.

Actually, for click detection, I should use the cubie's current orientation to determine which face was clicked. The face index in the geometry is fixed (it's the original box face), but the cubie's rotation transforms it.

Hmm, this is getting complicated. Let me use a simpler approach:

For each visible face of each cubie, I'll create a separate mesh. Each mesh will have userData.face indicating which Rubik's cube face it belongs to. This way, raycasting is straightforward.

But creating 54 separate meshes (26 cubies × ~2 visible faces each) is a lot. Let me just use the single mesh approach and figure out the face detection.

Actually, the simplest approach for click detection: when the user clicks on a cubie, determine which face of the Rubik's cube is closest to the camera at the click point. Or, simpler: just determine which face of the cubie was hit based on the face normal in world space.

Let me use this approach:
1. Raycast against all cubie meshes
2. For the hit mesh, get the face normal in world space
3. Transform the normal to the cubie's local space (inverse of the cubie's world transform)
4. The dominant axis of the local normal tells us which face of the Rubik's cube was clicked
5. Based on the cubie's position and the face normal, determine which Rubik's cube face it belongs to

Actually, even simpler: I can just use the world-space normal of the hit face and determine which face of the cube it corresponds to by looking at which axis it's closest to.

Wait, but after rotations, the face normals change. The face normal in world space tells us which direction the face is pointing, which corresponds to which face of the Rubik's cube.

So:
1. Raycast hit gives intersection.face.normal (in local space of the mesh)
2. Transform to world space: normalWorld = intersection.object.localToWorld(intersection.face.normal.clone()).sub(intersection.object.position).normalize()
3. The dominant component of normalWorld tells us which face:
   - +X → right face
   - -X → left face
   - +Y → top face
   - -Y → bottom face
   - +Z → front face
   - -Z → back face

This should work! Let me use this approach.

Actually, I realize there's a subtlety. The face.normal from BoxGeometry is in the local space of the geometry, not the mesh's space. But since the mesh has no geometry rotation (the geometry is axis-aligned), the face normal in local space is the same as in mesh space. And the mesh's world transform includes any rotation the cubie has undergone.

So the workflow is:
1. Get intersection.face.normal (local to geometry, which is same as local to mesh since no geometry rotation)
2. Transform to world space using the mesh's matrixWorld
3. Determine which cube face based on the world-space normal

Let me code this up.

For the face normal transformation, I can use:
```javascript
const normal = intersection.face.normal.clone();
normal.applyMatrix4(intersection.object.matrixWorld);
// Then find the dominant axis
```

Wait, that's not quite right either. The normal should be transformed by the inverse-transpose of the matrix, but for uniform scaling (which we have), it's the same as the matrix itself. Actually, for direction vectors (not points), we should use the normal matrix (inverse transpose of the model matrix). But for uniform scaling, it's just the rotation part.

Let me just use the mesh's rotation to transform the normal:
```javascript
const normal = intersection.face.normal.clone();
normal.applyEuler(intersection.object.rotation);
```

Hmm, this is getting complicated. Let me just use a simpler approach.

Since each cubie starts axis-aligned and only gets rotated by 90-degree increments around cardinal axes, the face normals will always be aligned with the cardinal axes. So I can just check the world-space normal and round to the nearest axis.

Let me try this approach:
```javascript
const normal = intersection.face.normal.clone();
normal.applyMatrix4(intersection.object.matrixWorld);
// Round to nearest axis
const absX = Math.abs(normal.x);
const absY = Math.abs(normal.y);
const absZ = Math.abs(normal.z);
if (absX > absY && absX > absZ) {
  face = normal.x > 0 ? 'right' : 'left';
} else if (absY > absX && absY > absZ) {
  face = normal.y > 0 ? 'top' : 'bottom';
} else {
  face = normal.z > 0 ? 'front' : 'back';
}
```

This should work!

OK, let me now write the complete code. I'll structure it as follows:

1. HTML structure with canvas container and UI controls
2. CSS for styling
3. JavaScript for:
   - Scene setup (renderer, camera, lights)
   - Cube creation
   - Orbit camera controls
   - Raycasting for face detection
   - Face rotation animation
   - Scramble functionality

Let me write it all out now.

One more thing - for the orbit camera, I need to handle:
- Left mouse drag: rotate camera around the cube
- Right mouse drag or middle mouse: pan
- Scroll: zoom

I'll implement a simple version of this.

Let me also add some visual polish:
- Dark background
- Grid or subtle environment
- Smooth animations
- Nice UI panel

Here's my plan for the complete code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Rubik's Cube</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { overflow: hidden; background: #1a1a2e; font-family: 'Segoe UI', sans-serif; }
    #canvas-container { width: 100vw; height: 100vh; }
    #ui { position: absolute; top: 20px; left: 20px; }
    #ui button { ... }
    #info { position: absolute; bottom: 20px; left: 20px; color: white; }
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="ui">
    <button id="scrambleBtn">Scramble</button>
    <button id="resetBtn">Reset</button>
  </div>
  <div id="info">Click on a face to rotate it | Drag to orbit | Scroll to zoom</div>
  
  <script src="three.min.js"></script>
  <script>
    // ... all the JS code
  </script>
</body>
</html>
```

Now let me write the full JavaScript. This is going to be quite long.

Let me think about the rotation animation more carefully. I need to:
1. When a face rotation is triggered, collect the 9 cubies
2. Create a THREE.Group at the center
3. Move the 9 cubie meshes into the group (setting their positions relative to the group)
4. Animate the group rotation
5. After animation, update each cubie's logical position and rotation, remove from group, add back to scene

The tricky part is step 5: after the group rotates, each cubie's position and rotation in world space has changed. I need to extract the new position and rotation from the group's transform and apply it to each cubie.

Actually, a simpler approach: instead of using a group, I can directly animate each cubie's rotation around the face's axis, passing through the center of the face.

But that's also complex because each cubie needs to rotate around a different center point (the face center).

Let me use the group approach but be careful about the math.

When I create the group:
- Group position = (0, 0, 0) (center of cube)
- For each cubie on the face, set mesh.position to its current (x, y, z) position
- Add mesh to group
- Remove mesh from scene

When I rotate the group by angle θ:
- Each cubie's mesh rotates around the group's origin (which is the cube center)
- After rotation, the mesh's world position has changed

After animation:
- For each cubie, get its mesh's world position and rotation
- Set the cubie's logical (x, y, z) to the new position (rounded to nearest integer)
- Set the cubie's mesh position to the new position
- Set the cubie's mesh rotation to the new rotation
- Remove mesh from group, add back to scene
- Reset group rotation to 0

Wait, but the cubie's mesh already has its own rotation accumulated from previous rotations. When I add it to the group, the group's rotation compounds with the mesh's local rotation.

Hmm, let me think about this more carefully.

When I add a mesh to a group:
- The mesh's world transform = group.transform × mesh.localTransform
- The mesh's local transform includes its position and rotation

So if a cubie has already been rotated (e.g., it was part of a previous face rotation), its mesh.rotation already has that rotation. When I add it to the group and rotate the group, the total rotation is the composition of the mesh's local rotation and the group's rotation.

After the group animation, I need to:
1. Get the mesh's world rotation
2. Set the mesh's local rotation to match (since it will no longer be in the group)
3. Set the mesh's world position to the new position

Actually, the simplest way is:
1. Before adding to group, record the mesh's current world transform
2. After group rotation, record the mesh's new world transform
3. Set the mesh's local transform to the new world transform (since it will no longer be parented to the group)

But THREE.js doesn't have a direct way to set a mesh's local transform to match its world transform while it's still parented to a group.

Let me try a different approach. After the animation:
1. For each cubie, get mesh.matrixWorld
2. Decompose matrixWorld into position, rotation, scale
3. Set mesh.position, mesh.rotation, mesh.scale from the decomposed values
4. Set mesh.matrixAutoUpdate = true (so it recomputes from position/rotation/scale)
5. Remove mesh from group, add back to scene
6. Reset group

Wait, but if I set mesh.position/rotation/scale to match the world transform, and then remove it from the group, the mesh's world transform will be the same (since its local transform now matches what was its world transform while parented to the group).

Actually, that's not quite right either. When the mesh is in the group, its world transform is group.matrixWorld × mesh.matrix. After removing from the group, its world transform becomes mesh.matrix (since it's now directly in the scene). So I need to set mesh.matrix = mesh.matrixWorld (from when it was in the group).

Hmm, this is getting complicated. Let me use a different approach.

**Simpler approach**: Don't use groups. Instead, directly compute the new positions and rotations of the affected cubies after a face rotation, and animate them using TWEEN or manual interpolation.

For each affected cubie:
1. Compute its new position after the rotation
2. Compute its new rotation after the rotation
3. Animate from old position/rotation to new position/rotation

This avoids the group parenting complexity.

Let me define the rotation functions:

```javascript
function rotatePointAroundAxis(point, axis, angle) {
  // Rotate point around axis by angle (in radians)
  // Using Rodrigues' rotation formula
  const cos = Math.cos(angle);
  const sin = Math.sin(angle);
  const dot = point.x * axis.x + point.y * axis.y + point.z * axis.z;
  const cross = new THREE.Vector3(
    axis.y * point.z - axis.z * point.y,
    axis.z * point.x - axis.x * point.z,
    axis.x * point.y - axis.y * point.x
  );
  return new THREE.Vector3(
    point.x * cos + cross.x * sin + axis.x * dot * (1 - cos),
    point.y * cos + cross.y * sin + axis.y * dot * (1 - cos),
    point.z * cos + cross.z * sin + axis.z * dot * (1 - cos)
  );
}
```

For each face rotation, I need to:
1. Determine the rotation axis and angle
2. For each affected cubie, compute its new position by rotating around the axis through the cube center
3. Compute its new rotation by composing the face rotation with its existing rotation

The rotation axis passes through the center of the cube (origin) and is aligned with one of the cardinal axes.

For the right face (x=1), rotation axis is X, angle is -90° (as we determined).
For the left face (x=-1), rotation axis is X, angle is +90°.
For the top face (y=1), rotation axis is Y, angle is -90°.
For the bottom face (y=-1), rotation axis is Y, angle is +90°.
For the front face (z=1), rotation axis is Z, angle is -90°.
For the back face (z=-1), rotation axis is Z, angle is +90°.

Wait, let me double-check the top face. We said clockwise from +Y view is (x, y, z) → (-z, y, x). This is a rotation around Y by... let me check.

Rotation around Y by +90° (right-hand rule, thumb along +Y):
(x, y, z) → (z, y, -x)

That gives (1, 1, 1) → (1, 1, -1), but we want (1, 1, 1) → (-1, 1, 1) for the top face clockwise from +Y view.

So top face clockwise from +Y view is (x, y, z) → (-z, y, x), which is rotation around Y by -90°.

Let me verify: Rotation around Y by -90°:
(x, y, z) → (z, y, -x)? No...

Rotation matrix for -90° around Y:
[cos(-90)  0  sin(-90)]   [ 0  0 -1]
[   0      1     0    ] = [ 0  1  0]
[-sin(-90) 0  cos(-90)]   [ 1  0  0]

So (x, y, z) → (-z, y, x). Yes! That matches our top face clockwise rotation.

So:
- Top face (y=1): rotation around Y by -90°
- Bottom face (y=-1): rotation around Y by +90°

Let me verify bottom face: (x, y, z) → (z, y, -x) (clockwise from -Y view)

Rotation around Y by +90°:
(x, y, z) → (z, y, -x)? Let me check the matrix:

Rotation matrix for +90° around Y:
[cos(90)  0  sin(90)]   [ 0  0  1]
[  0      1    0   ] = [ 0  1  0]
[-sin(90) 0  cos(90)]   [-1  0  0]

So (x, y, z) → (z, y, -x). Yes! That matches our bottom face clockwise rotation.

Wait, but I said bottom face clockwise from -Y view is (x, y, z) → (z, y, -x). And rotation around Y by +90° gives (x, y, z) → (z, y, -x). So bottom face clockwise from -Y view = +90° around Y. ✓

And top face clockwise from +Y view is (x, y, z) → (-z, y, x). And rotation around Y by -90° gives (x, y, z) → (-z, y, x). So top face clockwise from +Y view = -90° around Y. ✓

Great, so the rotation angles are:
- Right face (x=1): -90° around X
- Left face (x=-1): +90° around X
- Top face (y=1): -90° around Y
- Bottom face (y=-1): +90° around Y
- Front face (z=1): -90° around Z
- Back face (z=-1): +90° around Z

Now for the animation, I need to smoothly interpolate the cubies' positions and rotations from their current state to their new state after the rotation.

For positions: I can use the rotation matrix to compute the new position of each affected cubie.

For rotations: Each cubie has an accumulated rotation (from previous face rotations). When a face rotation happens, I need to compose the face rotation with each cubie's existing rotation.

Let me think about how to represent rotations. I'll use THREE.Euler for each cubie's rotation.

When a face rotation happens:
1. For each affected cubie, compute its new position using the rotation matrix
2. For each affected cubie, compute its new rotation by composing the face rotation with its existing rotation

For composing rotations, I can use quaternions:
```javascript
const faceRotation = new THREE.Quaternion().setFromAxisAngle(axis, angle);
const cubieRotation = new THREE.Quaternion().setFromEuler(cubie.mesh.rotation);
const newRotation = faceRotation.multiply(cubieRotation);
cubie.mesh.rotation.setFromQuaternion(newRotation);
```

Wait, the order matters. When a cubie is part of a face rotation, the face rotation happens first (in the cubie's local space), and then the cubie's existing rotation is applied. Or is it the other way around?

Actually, think of it this way: the cubie is attached to the face, and the face rotates. The face rotation is applied in the cube's coordinate system. So the cubie's new orientation = face rotation × cubie's old orientation.

In terms of quaternions, if we apply rotation Q_face first and then Q_cubie, the combined rotation is Q_cubie × Q_face (in the convention where we apply rotations from right to left).

Hmm, this is getting confusing. Let me just use the group approach for animation and then update the cubie states after the animation completes.

Let me try the group approach more carefully:

1. Create a THREE.Group at the origin
2. For each affected cubie:
   a. Remove mesh from scene
   b. Add mesh to group
   c. The mesh's position is already set correctly (it's at the cubie's grid position)
3. Animate group.rotation by the face rotation angle
4. After animation:
   a. For each affected cubie:
      i. Get the mesh's world position and rotation
      ii. Set mesh.position to the world position
      iii. Set mesh.rotation to the world rotation
      iv. Remove mesh from group
      v. Add mesh back to scene
   b. Reset group.rotation to (0, 0, 0)

Wait, but when the mesh is in the group, its world position is group.position + group.rotation × mesh.position (simplified). When I remove it from the group and set its position/rotation to the world values, it should stay in the same place.

Actually, there's a subtlety. When the mesh is in the group, its local position is the same as before (e.g., (1, 1, 1)). The group's transform moves it to the world position. When I remove it from the group, its local position is still (1, 1, 1), but now it's directly in the scene, so its world position is just (1, 1, 1). That's wrong!

So I need to:
1. Before adding to group, record the mesh's current world position and rotation
2. After group rotation, record the mesh's new world position and rotation
3. When removing from group, set the mesh's local position/rotation to the new world values

But the mesh's local position/rotation before being added to the group was just its grid position and accumulated rotation. After group rotation, the world position/rotation has changed. I need to set the mesh's local position/rotation to the new world values so that when it's removed from the group, it stays in the same place.

Let me think about this step by step:

Before animation:
- mesh.position = (x, y, z) (grid position)
- mesh.rotation = accumulated rotation from previous moves
- mesh is in scene directly

During animation setup:
- scene.remove(mesh)
- group.add(mesh)
- mesh.position is still (x, y, z) relative to group
- group.position = (0, 0, 0)
- So mesh world position = group.matrixWorld × (x, y, z) = rotated (x, y, z) as group rotates

After animation (group has rotated by angle θ):
- mesh.worldPosition = group.matrixWorld × mesh.position (where mesh.position is still (x, y, z) in local space)
- mesh.worldRotation = group.rotation + mesh.rotation (approximately, for small rotations)

Wait, that's not right either. The world rotation of a child mesh is the composition of parent rotation and local rotation.

In THREE.js, the world transform is computed as:
worldMatrix = parent.matrixWorld × localMatrix

And localMatrix = T(position) × R(rotation) × S(scale)

So the world rotation of the mesh is not simply group.rotation + mesh.rotation. It's the composition of the two rotations.

When I want to extract the mesh's new local transform after the group animation, I need to:
1. Get mesh.matrixWorld (the world transform after group rotation)
2. Set mesh.matrix = mesh.matrixWorld (so that when it's removed from the group, it has the same world transform)
3. Decompose mesh.matrix to get position, rotation, scale
4. Set mesh.position, mesh.rotation, mesh.scale from the decomposed values
5. Remove from group, add to scene

Actually, there's an even simpler approach. I can just set mesh.matrixAutoUpdate = false, set mesh.matrix = mesh.matrixWorld, then remove from group and add to scene. But then I need to make sure matrixAutoUpdate is set back to true.

Hmm, let me just use the decompose approach:

```javascript
// After animation completes
const position = new THREE.Vector3();
const quaternion = new THREE.Quaternion();
const scale = new THREE.Vector3();

for (const cubie of affectedCubies) {
  cubie.mesh.matrixWorld.decompose(position, quaternion, scale);
  cubie.mesh.position.copy(position);
  cubie.mesh.quaternion.copy(quaternion);
  cubie.mesh.scale.copy(scale);
  
  group.remove(cubie.mesh);
  scene.add(cubie.mesh);
  
  // Update cubie's logical position
  cubie.x = Math.round(position.x);
  cubie.y = Math.round(position.y);
  cubie.z = Math.round(position.z);
}

group.rotation.set(0, 0, 0);
```

Wait, but after removing from the group and adding to scene, the mesh's world transform should be the same as its local transform (since it's now directly in the scene). And we set its local transform to match what was its world transform while in the group. So it should stay in the same place. ✓

And the cubie's logical position is updated to the new grid position. ✓

This should work! Let me code it up.

Now, for the animation, I'll use a simple tweening approach. I'll animate the group's rotation over time using requestAnimationFrame.

Let me also think about preventing multiple simultaneous rotations. I'll use a flag `isRotating` that prevents new rotations while one is in progress.

OK, I think I have enough planning. Let me write the complete code now.

Actually, one more thing: for the raycasting, I need to make sure I can detect which face was clicked. I'll use the approach I described earlier - get the world-space normal of the hit face and determine which cube face it corresponds to.

But wait, there's a problem. After face rotations, the face normals of individual cubies change. The face normal in world space tells us which direction that face is pointing, which corresponds to which face of the Rubik's cube. So this approach should work even after rotations.

Let me also think about the visual appearance. I want the cube to look nice:
- Each sticker should have a slight bevel or at least clean edges
- The cube should have a slight gap between cubies
- The background should be dark and attractive
- There should be a subtle grid or floor

For the gap between cubies, I'll make each cubie slightly smaller than 1 unit (e.g., 0.95) so there's a small gap.

Let me also add some edge highlighting or use a dark material for the internal faces.

OK, let me write the code now. I'll aim for a clean, well-structured implementation.

Let me also think about the scramble. I'll implement it as a series of random face rotations, each animated. I'll need to chain the animations so they happen one after another.

For the scramble, I'll:
1. Generate a random sequence of 20-25 face rotations
2. Execute them one after another with a small delay between each
3. Each rotation is animated over ~200ms

Let me also add a reset button to return the cube to its solved state.

Alright, let me write the complete code now. This is going to be a substantial file.

Let me also think about the orbit camera implementation. I'll implement a simple polar coordinate camera:

```javascript
let cameraRadius = 5;
let cameraTheta = 0; // azimuthal angle (around Y axis)
let cameraPhi = Math.PI / 3; // polar angle (from Y axis)

function updateCamera() {
  camera.position.x = cameraRadius * Math.sin(cameraPhi) * Math.cos(cameraTheta);
  camera.position.y = cameraRadius * Math.cos(cameraPhi);
  camera.position.z = cameraRadius * Math.sin(cameraPhi) * Math.sin(cameraTheta);
  camera.lookAt(0, 0, 0);
}
```

For mouse drag:
- Left mouse drag: change theta and phi
- Right mouse drag: pan (optional, skip for simplicity)
- Scroll: change radius

I'll track mouse movement and update the camera accordingly.

Let me also add some visual feedback when a face is clicked - maybe a brief highlight or glow on the face.

OK, I think I've planned enough. Let me write the code.

One more consideration: the three.min.js file. I need to make sure it's loaded before my script runs. I'll use a regular script tag with the src attribute.

Also, I should check if THREE.MeshStandardMaterial or THREE.MeshPhongMaterial is available in three.min.js. Since it's the full three.min.js (not the minified module version), it should have all the materials.

Let me also add some ambient and directional lighting so the cube looks good.

Let me write the code now:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Rubik's Cube</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      overflow: hidden; 
      background: #0a0a1a; 
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      user-select: none;
    }
    #canvas-container { 
      width: 100vw; 
      height: 100vh; 
      position: fixed;
      top: 0;
      left: 0;
    }
    #controls {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 12px;
      z-index: 10;
    }
    #controls button {
      padding: 10px 24px;
      border: 2px solid rgba(255,255,255,0.2);
      border-radius: 8px;
      background: rgba(255,255,255,0.1);
      color: white;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      backdrop-filter: blur(10px);
      transition: all 0.2s;
    }
    #controls button:hover {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.4);
    }
    #controls button:active {
      transform: scale(0.96);
    }
    #info {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255,255,255,0.6);
      font-size: 13px;
      text-align: center;
      pointer-events: none;
    }
    #move-count {
      position: absolute;
      top: 20px;
      right: 20px;
      color: rgba(255,255,255,0.7);
      font-size: 14px;
      z-index: 10;
    }
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <button id="scrambleBtn">🔀 Scramble</button>
    <button id="resetBtn">🔄 Reset</button>
  </div>
  <div id="info">Click on a face to rotate it · Drag to orbit · Scroll to zoom</div>
  <div id="move-count">Moves: 0</div>

  <script src="three.min.js"></script>
  <script>
    // ... complete JS code
  </script>
</body>
</html>
```

Now for the JavaScript. Let me write it section by section.

First, the scene setup:

```javascript
// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0a1a);

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(5, 4, 7);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.getElementById('canvas-container').appendChild(renderer.domElement);

// Lights
const ambientLight = new THREE.AmbientLight(0x404060, 1.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
directionalLight.position.set(5, 8, 5);
directionalLight.castShadow = true;
scene.add(directionalLight);

const fillLight = new THREE.DirectionalLight(0x8888ff, 0.5);
fillLight.position.set(-3, 2, -3);
scene.add(fillLight);
```

Now the cube creation. I need to create 26 cubies (excluding the center).

For each cubie, I'll create a BoxGeometry with 6 materials (one for each face). The colors are:
- Right (+X): Blue
- Left (-X): Green  
- Top (+Y): White
- Bottom (-Y): Yellow
- Front (+Z): Red
- Back (-Z): Orange
- Internal faces: Dark gray

```javascript
const CUBE_SIZE = 0.95; // Slightly less than 1 for gaps
const GAP = 0.02;
const COLORS = {
  right: 0x0000FF,    // Blue
  left: 0x00FF00,     // Green
  top: 0xFFFFFF,      // White
  bottom: 0xFFD700,   // Yellow
  front: 0xFF0000,    // Red
  back: 0xFF8C00,     // Orange
  internal: 0x1a1a2e  // Dark
};

const cubies = [];

function createCubie(x, y, z) {
  const materials = [
    // +X (right)
    new THREE.MeshPhongMaterial({ color: x === 1 ? COLORS.right : COLORS.internal, shininess: 80 }),
    // -X (left)
    new THREE.MeshPhongMaterial({ color: x === -1 ? COLORS.left : COLORS.internal, shininess: 80 }),
    // +Y (top)
    new THREE.MeshPhongMaterial({ color: y === 1 ? COLORS.top : COLORS.internal, shininess: 80 }),
    // -Y (bottom)
    new THREE.MeshPhongMaterial({ color: y === -1 ? COLORS.bottom : COLORS.internal, shininess: 80 }),
    // +Z (front)
    new THREE.MeshPhongMaterial({ color: z === 1 ? COLORS.front : COLORS.internal, shininess: 80 }),
    // -Z (back)
    new THREE.MeshPhongMaterial({ color: z === -1 ? COLORS.back : COLORS.internal, shininess: 80 }),
  ];
  
  const geometry = new THREE.BoxGeometry(CUBE_SIZE, CUBE_SIZE, CUBE_SIZE);
  const mesh = new THREE.Mesh(geometry, materials);
  mesh.position.set(x, y, z);
  mesh.castShadow = true;
  mesh.receiveShadow = true;
  
  scene.add(mesh);
  cubies.push({ mesh, x, y, z });
}

// Create all cubies except the center
for (let x = -1; x <= 1; x++) {
  for (let y = -1; y <= 1; y++) {
    for (let z = -1; z <= 1; z++) {
      if (x === 0 && y === 0 && z === 0) continue;
      createCubie(x, y, z);
    }
  }
}
```

Now for the face rotation logic. I need to define which cubies belong to each face and how they rotate.

```javascript
// Face definitions
const FACES = {
  right:   { axis: new THREE.Vector3(1, 0, 0), angle: -Math.PI / 2, getCubies: () => cubies.filter(c => c.x === 1) },
  left:    { axis: new THREE.Vector3(1, 0, 0), angle: Math.PI / 2,  getCubies: () => cubies.filter(c => c.x === -1) },
  top:     { axis: new THREE.Vector3(0, 1, 0), angle: -Math.PI / 2, getCubies: () => cubies.filter(c => c.y === 1) },
  bottom:  { axis: new THREE.Vector3(0, 1, 0), angle: Math.PI / 2,  getCubies: () => cubies.filter(c => c.y === -1) },
  front:   { axis: new THREE.Vector3(0, 0, 1), angle: -Math.PI / 2, getCubies: () => cubies.filter(c => c.z === 1) },
  back:    { axis: new THREE.Vector3(0, 0, 1), angle: Math.PI / 2,  getCubies: () => cubies.filter(c => c.z === -1) },
};
```

Wait, I need to double-check these rotation directions. Let me re-verify:

Right face (x=1): clockwise from +X view = -90° around X ✓
Left face (x=-1): clockwise from -X view = +90° around X ✓
Top face (y=1): clockwise from +Y view = -90° around Y ✓
Bottom face (y=-1): clockwise from -Y view = +90° around Y ✓
Front face (z=1): clockwise from +Z view = -90° around Z ✓
Back face (z=-1): clockwise from -Z view = +90° around Z ✓

These look correct.

Now for the rotation animation. I'll use a group-based approach:

```javascript
let isRotating = false;
let rotationGroup = null;
let rotationStartTime = 0;
let rotationDuration = 200; // ms
let pendingRotation = null;
let moveCount = 0;

function rotateFace(faceName) {
  if (isRotating) return;
  
  const face = FACES[faceName];
  const faceCubies = face.getCubies();
  
  if (faceCubies.length === 0) return;
  
  isRotating = true;
  
  // Create rotation group
  rotationGroup = new THREE.Group();
  scene.add(rotationGroup);
  
  // Move affected cubies to the group
  for (const cubie of faceCubies) {
    scene.remove(cubie.mesh);
    rotationGroup.add(cubie.mesh);
  }
  
  // Animate rotation
  rotationStartTime = performance.now();
  pendingRotation = { faceName, faceCubies };
  
  moveCount++;
  document.getElementById('move-count').textContent = `Moves: ${moveCount}`;
}

function updateRotationAnimation() {
  if (!isRotating || !rotationGroup) return;
  
  const elapsed = performance.now() - rotationStartTime;
  const t = Math.min(elapsed / rotationDuration, 1);
  
  // Ease out cubic
  const eased = 1 - Math.pow(1 - t, 3);
  
  // Apply rotation to group
  const face = FACES[pendingRotation.faceName];
  rotationGroup.rotation.set(0, 0, 0);
  rotationGroup.rotateOnAxis(face.axis, face.angle * eased);
  
  if (t >= 1) {
    // Animation complete, update cubie states
    completeRotation();
  }
}

function completeRotation() {
  const face = FACES[pendingRotation.faceName];
  const faceCubies = pendingRotation.faceCubies;
  
  for (const cubie of faceCubies) {
    // Get world transform
    const position = new THREE.Vector3();
    const quaternion = new THREE.Quaternion();
    const scale = new THREE.Vector3();
    cubie.mesh.matrixWorld.decompose(position, quaternion, scale);
    
    // Set local transform to match world transform
    cubie.mesh.position.copy(position);
    cubie.mesh.quaternion.copy(quaternion);
    cubie.mesh.scale.set(1, 1, 1);
    
    // Remove from group, add back to scene
    rotationGroup.remove(cubie.mesh);
    scene.add(cubie.mesh);
    
    // Update logical position
    cubie.x = Math.round(position.x);
    cubie.y = Math.round(position.y);
    cubie.z = Math.round(position.z);
  }
  
  // Clean up
  scene.remove(rotationGroup);
  rotationGroup = null;
  pendingRotation = null;
  isRotating = false;
}
```

Wait, there's an issue with the rotation animation. When I set `rotationGroup.rotation.set(0, 0, 0)` each frame and then apply `rotateOnAxis`, the rotation accumulates incorrectly because rotateOnAxis adds to the existing rotation.

Let me fix this by computing the rotation from scratch each frame:

```javascript
function updateRotationAnimation() {
  if (!isRotating || !rotationGroup) return;
  
  const elapsed = performance.now() - rotationStartTime;
  const t = Math.min(elapsed / rotationDuration, 1);
  const eased = 1 - Math.pow(1 - t, 3);
  
  const face = FACES[pendingRotation.faceName];
  const totalAngle = face.angle * eased;
  
  // Reset and apply rotation
  rotationGroup.rotation.set(0, 0, 0);
  rotationGroup.quaternion.identity();
  rotationGroup.rotateOnAxis(face.axis, totalAngle);
  
  if (t >= 1) {
    completeRotation();
  }
}
```

Actually, using `rotateOnAxis` on a group with zero rotation should work. But let me use quaternion directly for more reliability:

```javascript
rotationGroup.quaternion.copy(new THREE.Quaternion().setFromAxisAngle(face.axis, totalAngle));
```

Hmm, but I need to be careful about the axis direction. The axis should be in the group's local space, which is the same as world space since the group is at the origin with no parent rotation.

Let me also think about whether the rotation axis needs to be normalized. THREE.Vector3(1, 0, 0) is already normalized, so that's fine.

OK, let me also think about the orbit camera controls. I'll implement a simple polar orbit:

```javascript
let orbitTheta = Math.PI / 4;  // azimuthal angle
let orbitPhi = Math.PI / 3;    // polar angle
let orbitRadius = 7;
let isDragging = false;
let previousMouse = { x: 0, y: 0 };

// Mouse events
renderer.domElement.addEventListener('mousedown', onMouseDown);
renderer.domElement.addEventListener('mousemove', onMouseMove);
renderer.domElement.addEventListener('mouseup', onMouseUp);
renderer.domElement.addEventListener('wheel', onWheel);

function onMouseDown(event) {
  if (event.button === 0) { // Left click
    isDragging = true;
    previousMouse = { x: event.clientX, y: event.clientY };
  }
}

function onMouseMove(event) {
  if (!isDragging) return;
  
  const dx = event.clientX - previousMouse.x;
  const dy = event.clientY - previousMouse.y;
  
  orbitTheta -= dx * 0.005;
  orbitPhi = Math.max(0.1, Math.min(Math.PI - 0.1, orbitPhi - dy * 0.005));
  
  previousMouse = { x: event.clientX, y: event.clientY };
}

function onMouseUp(event) {
  isDragging = false;
}

function onWheel(event) {
  orbitRadius = Math.max(3, Math.min(15, orbitRadius + event.deltaY * 0.01));
}

function updateCamera() {
  camera.position.x = orbitRadius * Math.sin(orbitPhi) * Math.cos(orbitTheta);
  camera.position.y = orbitRadius * Math.cos(orbitPhi);
  camera.position.z = orbitRadius * Math.sin(orbitPhi) * Math.sin(orbitTheta);
  camera.lookAt(0, 0, 0);
}
```

For the raycasting (click to rotate face), I need to handle it differently from orbit dragging. When the user clicks without dragging, it's a face click. When they drag, it's an orbit rotation.

I'll track whether the mouse moved significantly between mousedown and mouseup. If it didn't move much, it's a click.

```javascript
let mouseDownPos = { x: 0, y: 0 };
let isClick = false;

function onMouseDown(event) {
  mouseDownPos = { x: event.clientX, y: event.clientY };
  isDragging = true;
  isClick = true;
}

function onMouseMove(event) {
  if (!isDragging) return;
  
  const dx = event.clientX - mouseDownPos.x;
  const dy = event.clientY - mouseDownPos.y;
  
  if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
    isClick = false;
  }
  
  orbitTheta -= dx * 0.005;
  orbitPhi = Math.max(0.1, Math.min(Math.PI - 0.1, orbitPhi - dy * 0.005));
  
  mouseDownPos = { x: event.clientX, y: event.clientY };
}

function onMouseUp(event) {
  if (isClick) {
    handleFaceClick(event);
  }
  isDragging = false;
}
```

For handleFaceClick, I'll use raycasting:

```javascript
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function handleFaceClick(event) {
  const rect = renderer.domElement.getBoundingClientRect();
  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
  
  raycaster.setFromCamera(mouse, camera);
  const meshes = cubies.map(c => c.mesh);
  const intersects = raycaster.intersectObjects(meshes);
  
  if (intersects.length > 0) {
    const intersection = intersects[0];
    const faceName = getFaceFromNormal(intersection);
    if (faceName) {
      rotateFace(faceName);
    }
  }
}

function getFaceFromNormal(intersection) {
  const normal = intersection.face.normal.clone();
  normal.applyMatrix4(intersection.object.matrixWorld);
  
  // Round to nearest axis
  const x = Math.round(normal.x);
  const y = Math.round(normal.y);
  const z = Math.round(normal.z);
  
  if (x === 1) return 'right';
  if (x === -1) return 'left';
  if (y === 1) return 'top';
  if (y === -1) return 'bottom';
  if (z === 1) return 'front';
  if (z === -1) return 'back';
  
  return null;
}
```

Wait, there's an issue with `normal.applyMatrix4`. The normal is a direction vector, not a point, so it should be transformed by the normal matrix (inverse transpose of the model matrix). But for uniform scaling and no shear, the regular matrix works for directions too.

Actually, `applyMatrix4` treats the vector as a direction (w=0), so it applies the linear part of the matrix (rotation + scale) but not the translation. This is correct for direction vectors.

But there's still a subtlety: the matrix includes any non-uniform scaling, which would distort the normal. Since our cubies have uniform scale (1,1,1), this is fine.

However, after the group rotation animation, the cubie's matrixWorld includes the group's rotation. So the normal should correctly reflect the cubie's current orientation in world space.

Let me also think about the rounding. Due to floating point errors, the rounded normal might not be exactly -1, 0, or 1. I should use a threshold:

```javascript
function getFaceFromNormal(intersection) {
  const normal = intersection.face.normal.clone();
  normal.applyMatrix4(intersection.object.matrixWorld);
  
  // Find the dominant axis
  const ax = Math.abs(normal.x);
  const ay = Math.abs(normal.y);
  const az = Math.abs(normal.z);
  
  const threshold = 0.5;
  
  if (ax > ay && ax > az && ax > threshold) {
    return normal.x > 0 ? 'right' : 'left';
  } else if (ay > ax && ay > az && ay > threshold) {
    return normal.y > 0 ? 'top' : 'bottom';
  } else if (az > ax && az > ay && az > threshold) {
    return normal.z > 0 ? 'front' : 'back';
  }
  
  return null;
}
```

This is more robust.

Now for the scramble function:

```javascript
function scramble() {
  if (isRotating) return;
  
  const faceNames = Object.keys(FACES);
  const numMoves = 20 + Math.floor(Math.random() * 6); // 20-25 moves
  
  let i = 0;
  function doNextMove() {
    if (i >= numMoves) {
      moveCount = 0;
      document.getElementById('move-count').textContent = `Moves: ${moveCount}`;
      return;
    }
    
    const faceName = faceNames[Math.floor(Math.random() * faceNames.length)];
    rotateFace(faceName);
    i++;
    
    // Wait for rotation to complete before next move
    const checkInterval = setInterval(() => {
      if (!isRotating) {
        clearInterval(checkInterval);
        doNextMove();
      }
    }, 50);
  }
  
  doNextMove();
}
```

Wait, this approach of polling with setInterval is a bit ugly. Let me use a callback-based approach instead.

Actually, let me restructure the rotation logic to use a promise or callback:

```javascript
function rotateFace(faceName, callback) {
  if (isRotating) {
    if (callback) callback();
    return;
  }
  
  const face = FACES[faceName];
  const faceCubies = face.getCubies();
  
  if (faceCubies.length === 0) {
    if (callback) callback();
    return;
  }
  
  isRotating = true;
  rotationGroup = new THREE.Group();
  scene.add(rotationGroup);
  
  for (const cubie of faceCubies) {
    scene.remove(cubie.mesh);
    rotationGroup.add(cubie.mesh);
  }
  
  rotationStartTime = performance.now();
  pendingRotation = { faceName, faceCubies, callback };
  
  moveCount++;
  document.getElementById('move-count').textContent = `Moves: ${moveCount}`;
}

// In the animation loop:
function updateRotationAnimation() {
  if (!isRotating || !rotationGroup) return;
  
  const elapsed = performance.now() - rotationStartTime;
  const t = Math.min(elapsed / rotationDuration, 1);
  const eased = 1 - Math.pow(1 - t, 3);
  
  const face = FACES[pendingRotation.faceName];
  const totalAngle = face.angle * eased;
  
  rotationGroup.quaternion.setFromAxisAngle(face.axis, totalAngle);
  
  if (t >= 1) {
    completeRotation();
  }
}

function completeRotation() {
  const { faceCubies, callback } = pendingRotation;
  
  for (const cubie of faceCubies) {
    const position = new THREE.Vector3();
    const quaternion = new THREE.Quaternion();
    const scale = new THREE.Vector3();
    cubie.mesh.matrixWorld.decompose(position, quaternion, scale);
    
    cubie.mesh.position.copy(position);
    cubie.mesh.quaternion.copy(quaternion);
    cubie.mesh.scale.set(1, 1, 1);
    
    rotationGroup.remove(cubie.mesh);
    scene.add(cubie.mesh);
    
    cubie.x = Math.round(position.x);
    cubie.y = Math.round(position.y);
    cubie.z = Math.round(position.z);
  }
  
  scene.remove(rotationGroup);
  rotationGroup = null;
  pendingRotation = null;
  isRotating = false;
  
  if (callback) callback();
}
```

This is cleaner. Now the scramble function can use callbacks:

```javascript
function scramble() {
  const faceNames = Object.keys(FACES);
  const numMoves = 20 + Math.floor(Math.random() * 6);
  let i = 0;
  
  function doNextMove() {
    if (i >= numMoves) {
      moveCount = 0;
      document.getElementById('move-count').textContent = `Moves: ${moveCount}`;
      return;
    }
    
    const faceName = faceNames[Math.floor(Math.random() * faceNames.length)];
    rotateFace(faceName, () => {
      i++;
      setTimeout(doNextMove, 100); // Small delay between moves
    });
  }
  
  doNextMove();
}
```

And the reset function:

```javascript
function resetCube() {
  // Reset all cubies to their original positions and rotations
  for (const cubie of cubies) {
    // Animate back to original position... or just snap
    cubie.mesh.position.set(cubie.x, cubie.y, cubie.z);
    cubie.mesh.rotation.set(0, 0, 0);
    cubie.mesh.quaternion.identity();
  }
  moveCount = 0;
  document.getElementById('move-count').textContent = `Moves: ${moveCount}`;
}
```

Wait, the reset function should actually reset the logical positions too. But since we're resetting to the solved state, all cubies should be at their original positions with no rotation. The issue is that the cubie objects store their current (x, y, z) which might have changed after rotations. I need to track the original positions.

Actually, let me add an `origX`, `origY`, `origZ` to each cubie, or better yet, just reset the scene to the initial state by recreating all cubies. But that's wasteful.

Let me just store the initial positions and reset to them:

```javascript
function resetCube() {
  for (const cubie of cubies) {
    // Find the original position (same as current since we haven't scrambled yet... but we have)
    // Actually, after rotations, the cubie's logical position has changed
    // I need to track the original position separately
  }
}
```

Hmm, this is getting complicated. Let me add `origX`, `origY`, `origZ` to each cubie:

```javascript
cubies.push({ mesh, x, y, z, origX: x, origY: y, origZ: z });
```

And the reset function:

```javascript
function resetCube() {
  for (const cubie of cubies) {
    cubie.x = cubie.origX;
    cubie.y = cubie.origY;
    cubie.z = cubie.origZ;
    cubie.mesh.position.set(cubie.origX, cubie.origY, cubie.origZ);
    cubie.mesh.quaternion.identity();
  }
  moveCount = 0;
  document.getElementById('move-count').textContent = `Moves: ${moveCount}`;
}
```

OK, I think I have enough to write the complete code. Let me also add the window resize handler and the animation loop.

Let me also think about the visual appearance more. I want:
- A dark background with a subtle gradient
- The cube to be well-lit
- A slight glow or shadow effect
- Nice button styling

Let me also add a subtle grid on the ground plane for visual reference.

Actually, let me keep it simpler and just focus on making the cube look good with proper lighting.

One more thing: I should add event listeners for the buttons and handle window resize.

Let me also add a subtle animation to the background, like a slow rotation or subtle particles. Actually, let me keep it simple and just have a nice dark background.

Let me also think about the face highlighting when hovered. I can change the emissive color of the face when the mouse hovers over it. This adds nice interactivity feedback.

OK, let me write the complete code now. I'll try to keep it well-organized and commented.

Actually, wait. I realize there might be an issue with my rotation logic. When I create the rotation group and add cubie meshes to it, the cubie meshes have their own position, rotation, and scale. The group's transform is applied on top of that.

So when the group rotates, each cubie's mesh rotates around the group's origin (which is at the cube center). The cubie's mesh position is at its grid coordinates (e.g., (1, 1, 1)), so it rotates around the origin while maintaining its distance from the origin. This is correct for a face rotation.

But wait, there's a subtle issue. When I add a cubie mesh to the group, the mesh's position is in the group's local space. Since the group is at the origin with no rotation initially, the mesh's world position is the same as its local position. As the group rotates, the mesh's world position changes according to the group's rotation applied to its local position. This is exactly what we want.

After the animation completes, I decompose the mesh's world transform and set it as the local transform. Then I remove the mesh from the group and add it back to the scene. The mesh's local transform now equals what was its world transform while in the group, so it stays in the same place. ✓

The cubie's logical position is updated to the new grid coordinates. ✓

I think this approach is correct. Let me write the complete code now.

One more thing: I need to make sure the raycasting works correctly. When a mesh is in the rotation group, its matrixWorld is updated by the group's transform. So raycasting against it should work correctly even during the animation.

But I should disable raycasting during rotation to prevent the user from clicking on a face while it's rotating. I already have the `isRotating` flag that prevents new rotations, so that should be fine.

Let me also think about the camera orbit. I want the orbit to be smooth and responsive. I'll use linear interpolation for the camera position.

Actually, for simplicity, I'll just update the camera position directly based on the orbit parameters each frame.

Let me also add a subtle ground plane or grid for visual reference.

OK, I'm going to write the complete code now. Let me be thorough and make sure everything works.

Let me also consider the edge case where the user clicks on an internal face (a face between two cubies). In this case, the normal would point inward, and we should ignore it. But since internal faces have the same color as the background (dark), they're hard to see and unlikely to be clicked intentionally.

Actually, with my current approach, internal faces have the same dark color as the background, so they won't be visually distinct. But they're still clickable via raycasting. I should filter out clicks on internal faces.

To filter internal faces, I can check if the clicked face's normal points outward from the cube. A face is on the exterior if its normal points away from the center of the cube (i.e., the dot product of the normal with the cubie's position vector is positive).

Actually, a simpler check: the face is on the exterior if it's a visible face (not internal). I can determine this by checking if the cubie's coordinate in the direction of the face normal is at the boundary (-1 or 1).

But this requires knowing which face of the cubie was clicked and which direction it faces. With my current approach (using world-space normal), I can check:

For a cubie at position (x, y, z), a face with world-space normal (nx, ny, nz) is on the exterior if:
- nx > 0 and x == 1 (right face)
- nx < 0 and x == -1 (left face)
- ny > 0 and y == 1 (top face)
- ny < 0 and y == -1 (bottom face)
- nz > 0 and z == 1 (front face)
- nz < 0 and z == -1 (back face)

If none of these conditions are met, the face is internal and should be ignored.

Let me add this check to the face detection:

```javascript
function getFaceFromNormal(intersection) {
  const normal = intersection.face.normal.clone();
  normal.applyMatrix4(intersection.object.matrixWorld);
  
  const x = Math.round(normal.x);
  const y = Math.round(normal.y);
  const z = Math.round(normal.z);
  
  const cubie = intersection.object;
  const pos = cubie.position; // This is the local position before any group rotation... hmm
  
  // Actually, during a rotation, the cubie's position is relative to the group
  // After rotation completes, the position is in world space
  // I need to get the cubie's logical position from the cubies array
}
```

Hmm, this is getting complicated because during a rotation, the cubie's mesh position is relative to the group, not the world. And after the rotation, I update the cubie's logical position.

Let me simplify: I'll just check if the rounded normal corresponds to an exterior face of the cube. The exterior faces are those where the normal points outward from the cube center. For a 3x3x3 cube centered at the origin, a face with normal (nx, ny, nz) is exterior if:
- The face is on the outer layer of the cube

But I don't know which cubie the face belongs to from just the normal. I need to check the cubie's position.

Let me store a reference to the cubie object on the mesh's userData:

```javascript
cubie.mesh.userData.cubieRef = cubie;
```

Then in getFaceFromNormal:

```javascript
function getFaceFromNormal(intersection) {
  const normal = intersection.face.normal.clone();
  normal.applyMatrix4(intersection.object.matrixWorld);
  
  const nx = Math.round(normal.x);
  const ny = Math.round(normal.y);
  const nz = Math.round(normal.z);
  
  const cubie = intersection.object.userData.cubieRef;
  if (!cubie) return null;
  
  if (nx === 1 && cubie.x === 1) return 'right';
  if (nx === -1 && cubie.x === -1) return 'left';
  if (ny === 1 && cubie.y === 1) return 'top';
  if (ny === -1 && cubie.y === -1) return 'bottom';
  if (nz === 1 && cubie.z === 1) return 'front';
  if (nz === -1 && cubie.z === -1) return 'back';
  
  return null; // Internal face
}
```

Wait, but after a rotation, the cubie's x, y, z have been updated to the new logical position. And the mesh's world position reflects the new position. So the check should work correctly.

But during the rotation animation, the cubie's mesh is in the rotation group, and its position is relative to the group. The cubie's logical x, y, z haven't been updated yet (they're updated after the animation completes). So during the animation, the check might fail.

But I'm already preventing clicks during rotation (isRotating flag), so this shouldn't be an issue.

OK, I think the approach is sound. Let me write the complete code now.

Actually, I realize there's another issue. When I add a mesh to the rotation group, the mesh's position is still at its current world position (relative to the group's origin). But the mesh's position property is in the group's local space. Since the group is at the origin, the mesh's local position equals its world position before the group rotation.

Wait, no. When I do `scene.remove(mesh)` and then `group.add(mesh)`, the mesh's position doesn't change in its local space. But its parent changes from scene to group. Since the group is at the origin with no rotation, the mesh's world position is the same as its local position (which is its grid position). ✓

As the group rotates, the mesh's world position changes according to the group's rotation applied to its local position. ✓

After the animation, I decompose the mesh's world matrix and set its local position/rotation to match. Then I remove it from the group and add it back to the scene. Since the mesh's local transform now equals what was its world transform while in the group, it stays in the same place. ✓

Great, the approach is consistent.

Let me now write the complete HTML file. I'll be thorough and make sure everything works.

Actually, I just realized I should also handle the case where the user clicks on a face during a rotation. The isRotating flag handles this, but I should also make sure the raycaster doesn't pick up meshes that are in the rotation group (they're still in the scene graph, just parented to the group). The raycaster should work fine with parented objects.

One more thing: I should make the cube slightly larger or add some spacing between the cubies so the individual cubies are visible. I'll use CUBE_SIZE = 0.92 and a dark background color that matches the internal faces.

Let me also add a subtle ambient occlusion effect or edge highlighting. Actually, that might be too complex. Let me just make sure the lighting is good.

I'll use:
- Ambient light for base illumination
- Two directional lights for key and fill
- One point light for dramatic effect

Let me finalize the code now.

Actually, I want to also add a nice ground plane or some visual reference. Let me add a subtle grid on the ground.

And I should also add some post-processing or at least a subtle tone mapping for better visuals. But that might be too complex. Let me keep it simple.

Let me also think about the color scheme. Standard Rubik's cube colors:
- White: #FFFFFF (top)
- Yellow: #FFD700 (bottom)
- Red: #FF0000 (front)
- Orange: #FF8C00 (back)
- Blue: #0000FF (right)
- Green: #00FF00 (left)

But these are very saturated. In a 3D rendering, they might look too bright or too dark depending on the lighting. Let me adjust them slightly:
- White: #F0F0F0
- Yellow: #FFD700
- Red: #CC0000
- Orange: #FF8C00
- Blue: #0044CC
- Green: #00AA00

Actually, let me just use the standard colors and adjust the lighting to make them look good.

I'll use MeshPhongMaterial with a moderate shininess for a slightly glossy look.

OK, let me write the final code now. I'll aim for a clean, well-structured implementation.

Let me also add some CSS transitions for the UI elements and make the overall design look polished.

Here's my final plan for the HTML structure:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Rubik's Cube</title>
  <style>
    /* Full styling */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="ui-panel">
    <h1>Rubik's Cube</h1>
    <div class="buttons">
      <button id="scrambleBtn">Scramble</button>
      <button id="resetBtn">Reset</button>
    </div>
    <div id="move-count">Moves: 0</div>
    <div id="instructions">Click a face to rotate · Drag to orbit · Scroll to zoom</div>
  </div>
  
  <script src="three.min.js"></script>
  <script>
    // Complete JS implementation
  </script>
</body>
</html>
```

Let me write it all out now. I'll be comprehensive and make sure the code is correct.

One more consideration: I should handle the case where three.min.js might not be loaded yet. But since the script tag is before my script, it should be loaded by the time my script runs.

Also, I should make sure the canvas resizes properly when the window is resized.

Let me write the complete code now:

Hmm, I realize I should also think about the face click detection more carefully. When the user clicks on a cubie, I need to determine which face of the Rubik's cube they're trying to rotate. The approach I described (using the world-space normal of the hit face) should work, but I need to make sure it handles all cases correctly.

Let me trace through an example:
1. User clicks on the front face of the cube (z=1 face)
2. Raycaster hits a mesh on the front face
3. The hit face's normal in local space is (0, 0, 1) (the +Z face of the box)
4. After applying the mesh's world matrix (which includes any accumulated rotations), the normal becomes the world-space normal
5. I round it to the nearest axis: (0, 0, 1) → front face ✓

Another example:
1. User clicks on the top face of the cube (y=1 face) after the cube has been rotated
2. Raycaster hits a mesh on the top face
3. The hit face's normal in local space is (0, 1, 0) (the +Y face of the box)
4. After applying the mesh's world matrix (which includes the rotation from a previous face turn), the normal is transformed
5. I round it to the nearest axis and determine which face of the cube it corresponds to

This should work correctly because the world-space normal always points in the direction the face is currently facing, which corresponds to one of the six faces of the Rubik's cube.

OK, I'm confident the approach is correct. Let me write the code.

Let me also think about performance. With 26 cubies, each with a BoxGeometry and 6 materials, the scene should be very lightweight. No performance issues expected.

One more thing: I should make the internal faces of the cubies not render (or make them very dark) so that the cube looks solid. I'll use a very dark color for internal faces.

Actually, with the standard approach of using 6 materials for a BoxGeometry, the internal faces are still rendered but they're facing other cubies and not visible. Since they're dark, they won't be noticeable. But they do add to the draw call count. For 26 cubies × 6 faces = 156 faces, this is negligible.

Let me also add a subtle edge wireframe or outline to make the cubies more distinct from each other. I can do this by adding a slightly larger wireframe box behind each cubie, or by using a dark edge color.

Actually, the gap between cubies (due to CUBE_SIZE < 1) should be enough to see the edges. Let me use CUBE_SIZE = 0.94 and a dark background color that matches the internal faces.

OK, I'm going to write the complete code now. No more planning!

Let me also make sure I handle the window resize event properly.

And I should add some CSS for the UI panel to make it look nice and modern.

Let me write the complete index.html file:

I need to be careful about one thing: when I use `rotationGroup.quaternion.setFromAxisAngle(face.axis, totalAngle)`, I need to make sure the axis is normalized. THREE.Vector3(1, 0, 0) is already normalized, so that's fine.

Also, I should make sure that during the animation, the group's rotation is applied correctly. Let me use quaternion directly:

```javascript
const quaternion = new THREE.Quaternion().setFromAxisAngle(face.axis, totalAngle);
rotationGroup.quaternion.copy(quaternion);
```

This should work because the group starts with identity rotation, and we're setting its rotation directly each frame.

Wait, but `setFromAxisAngle` creates a new quaternion. I should create it once and reuse it, or just create a new one each frame (which is fine for performance).

OK let me write the code now. For real this time.

Let me also think about what happens when the user clicks on a face that's currently being rotated. The isRotating flag prevents this, which is correct.

What about clicking on two different faces in quick succession? The second click will be ignored because isRotating is still true. After the first rotation completes, the user can click again. This is the expected behavior.

Let me also add a visual indicator for which face is being hovered over. I can change the emissive color of the hovered face.

For hover detection, I'll use mousemove event and raycasting. When the mouse hovers over a face, I'll highlight it.

```javascript
let hoveredFace = null;

function onMouseMove(event) {
  // ... orbit camera handling ...
  
  // Also check for face hover
  const rect = renderer.domElement.getBoundingClientRect();
  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
  
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(cubies.map(c => c.mesh));
  
  // Reset previous hover
  if (hoveredFace) {
    // Reset emissive color
    hoveredFace.material.emissive.setHex(0x000000);
    hoveredFace = null;
  }
  
  if (intersects.length > 0 && !isRotating) {
    const intersection = intersects[0];
    const faceName = getFaceFromNormal(intersection);
    if (faceName) {
      intersection.face.material.emissive.setHex(0x333333);
      hoveredFace = intersection.face;
      renderer.domElement.style.cursor = 'pointer';
    }
  } else {
    renderer.domElement.style.cursor = 'grab';
  }
}
```

Hmm, but `intersection.face` doesn't have a `material` property directly. The material is on the mesh. And a BoxGeometry with an array of materials means each face has a different material.

In THREE.js, when you raycast against a mesh with an array of materials, `intersection.faceIndex` tells you which face was hit, and the material is `intersection.object.material[intersection.faceIndex]` (for a single mesh with an array of materials).

Wait, actually in newer versions of three.js, `intersection.face` might be deprecated in favor of `intersection.faceIndex`. Let me check...

In three.js r125+, `intersection.face` was deprecated and removed. Instead, you use `intersection.faceIndex` and `intersection.object.material[intersection.faceIndex]` to get the material.

But I'm not sure which version three.min.js is. Let me just use `intersection.face` for now and handle both cases.

Actually, for simplicity, let me just skip the hover highlighting and focus on making the core functionality work perfectly. The hover effect is a nice-to-have but not essential.

Let me also think about the visual design of the UI. I want it to look modern and clean, with a dark theme that matches the 3D scene.

OK, let me write the final code now. I'll include:
1. Scene setup with lighting
2. Cube creation with proper colors
3. Orbit camera controls
4. Face click detection and rotation
5. Rotation animation
6. Scramble functionality
7. Reset functionality
8. Move counter
9. Responsive design

Here goes:

Actually, I realize I need to be more careful about one thing. When I do `scene.remove(cubie.mesh)` and then `rotationGroup.add(cubie.mesh)`, the mesh's world matrix needs to be updated. In THREE.js, this happens automatically when you add/remove objects from the scene graph, but I should make sure to call `scene.updateMatrixWorld()` if needed.

Actually, in the animation loop, I'm calling `renderer.render(scene, camera)` which updates the matrices. So it should be fine.

But during the rotation animation setup (before the first render after adding to group), the matrices might not be updated yet. Let me make sure to update them:

```javascript
// After moving cubies to the group
scene.updateMatrixWorld(true);
```

This ensures all world matrices are up to date before the animation starts.

OK, let me write the complete code now. I'll be thorough and make sure everything is correct.

Let me also think about the scramble animation. I want each move to be animated (200ms) with a small delay between moves (100ms). So the total scramble time is about 20 * 300ms = 6 seconds, which is reasonable.

For the reset, I'll just snap all cubies back to their solved positions instantly. No animation needed.

Let me write the code:

I also want to add a subtle grid on the ground to give a sense of space. I'll create a simple grid using THREE.GridHelper.

And I'll add a subtle fog to the scene for atmosphere.

Let me finalize and write the code now.

One last thing: I should make sure the cube is visible and well-framed when the page loads. The camera should be positioned to see the entire cube. With a cube of size 3 units (from -1.5 to 1.5 in each direction), a camera distance of about 7-8 units should be good.

OK, here's the complete code:

Wait, I also need to handle the case where the user is dragging (orbit) and also clicks. I need to distinguish between a click (no drag) and a drag (orbit). I'll track the mouse movement distance and only trigger a face rotation if the mouse didn't move significantly.

Let me finalize the code now. I'll write it all out in one go.

Let me also think about the edge glow or outline effect. I can add a subtle outline to each cubie by using a slightly larger wireframe mesh behind it. But this might be too complex. Let me skip it and focus on the core functionality.

Actually, I just realized I should also handle touch events for mobile devices. Let me add touch event handlers for orbit controls and face clicking.

For touch:
- Single touch drag: orbit
- Double tap: rotate face (similar to click)
- Pinch: zoom

This adds complexity. Let me keep it simple and just support mouse for now, with a note that it works best on desktop.

OK, final code time. Let me write it all out.

I also want to make sure the cube looks good from the default camera angle. Let me position the camera at an angle that shows three faces of the cube clearly.

Default camera position: (5, 3, 5) looking at (0, 0, 0). This gives a nice isometric-like view.

Let me also add a subtle rotation to the cube when it's idle, so it looks more dynamic. Actually, no, that might interfere with the orbit controls. Let me skip it.

One more visual touch: I'll add a subtle shadow under the cube on the ground plane. This gives a sense of grounding.

OK, I'm writing the code now. For real this time. No more planning.

Let me structure the JavaScript code:

1. Constants and configuration
2. Scene setup (renderer, camera, lights, controls)
3. Cube creation
4. Face rotation logic
5. Orbit camera controls
6. Raycasting and face click detection
7. Scramble and reset
8. Animation loop
9. Event listeners
10. Initialization

Here's the complete code:

```javascript
// === Configuration ===
const CUBE_SIZE = 0.92;
const ROTATION_DURATION = 200; // ms
const FOV = 45;

// === Colors ===
const COLORS = {
  right: 0x0055DD,   // Blue
  left: 0x00AA44,    // Green
  top: 0xF0F0F0,     // White
  bottom: 0xFFD700,  // Yellow
  front: 0xDD0000,   // Red
  back: 0xFF6600,    // Orange
  internal: 0x1a1a2e // Dark
};

// === State ===
let scene, camera, renderer;
let cubies = [];
let isRotating = false;
let rotationGroup = null;
let rotationStartTime = 0;
let pendingRotation = null;
let moveCount = 0;

// Orbit camera
let orbitTheta = Math.PI / 4;
let orbitPhi = Math.PI / 3;
let orbitRadius = 7;
let isDragging = false;
let isClick = false;
let previousMouse = { x: 0, y: 0 };
let mouseDownPos = { x: 0, y: 0 };

// Raycasting
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// === Scene Setup ===
function initScene() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x0a0a1a);
  scene.fog = new THREE.FogExp2(0x0a0a1a, 0.05);

  camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 100);
  
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  document.getElementById('canvas-container').appendChild(renderer.domElement);

  // Lights
  const ambientLight = new THREE.AmbientLight(0x404060, 2);
  scene.add(ambientLight);

  const dirLight = new THREE.DirectionalLight(0xffffff, 3);
  dirLight.position.set(5, 8, 5);
  dirLight.castShadow = true;
  dirLight.shadow.mapSize.width = 1024;
  dirLight.shadow.mapSize.height = 1024;
  scene.add(dirLight);

  const fillLight = new THREE.DirectionalLight(0x4466ff, 1);
  fillLight.position.set(-3, 2, -3);
  scene.add(fillLight);

  const rimLight = new THREE.DirectionalLight(0xffffff, 1.5);
  rimLight.position.set(0, -3, 5);
  scene.add(rimLight);
}

// === Cube Creation ===
function createCubie(x, y, z) {
  const materials = [
    new THREE.MeshPhongMaterial({ color: x === 1 ? COLORS.right : COLORS.internal, shininess: 60, specular: 0x222222 }),
    new THREE.MeshPhongMaterial({ color: x === -1 ? COLORS.left : COLORS.internal, shininess: 60, specular: 0x222222 }),
    new THREE.MeshPhongMaterial({ color: y === 1 ? COLORS.top : COLORS.internal, shininess: 60, specular: 0x222222 }),
    new THREE.MeshPhongMaterial({ color: y === -1 ? COLORS.bottom : COLORS.internal, shininess: 60, specular: 0x222222 }),
    new THREE.MeshPhongMaterial({ color: z === 1 ? COLORS.front : COLORS.internal, shininess: 60, specular: 0x222222 }),
    new THREE.MeshPhongMaterial({ color: z === -1 ? COLORS.back : COLORS.internal, shininess: 60, specular: 0x222222 }),
  ];

  const geometry = new THREE.BoxGeometry(CUBE_SIZE, CUBE_SIZE, CUBE_SIZE);
  const mesh = new THREE.Mesh(geometry, materials);
  mesh.position.set(x, y, z);
  mesh.castShadow = true;
  mesh.receiveShadow = true;
  
  mesh.userData.cubieRef = { x, y, z };

  scene.add(mesh);
  cubies.push({ mesh, x, y, z });
}

function createCube() {
  for (let x = -1; x <= 1; x++) {
    for (let y = -1; y <= 1; y++) {
      for (let z = -1; z <= 1; z++) {
        if (x === 0 && y === 0 && z === 0) continue;
        createCubie(x, y, z);
      }
    }
  }
}

// === Face Rotation ===
const FACES = {
  right:   { axis: new THREE.Vector3(1, 0, 0), angle: -Math.PI / 2, filter: c => c.x === 1 },
  left:    { axis: new THREE.Vector3(1, 0, 0), angle: Math.PI / 2,  filter: c => c.x === -1 },
  top:     { axis: new THREE.Vector3(0, 1, 0), angle: -Math.PI / 2, filter: c => c.y === 1 },
  bottom:  { axis: new THREE.Vector3(0, 1, 0), angle: Math.PI / 2,  filter: c => c.y === -1 },
  front:   { axis: new THREE.Vector3(0, 0, 1), angle: -Math.PI / 2, filter: c => c.z === 1 },
  back:    { axis: new THREE.Vector3(0, 0, 1), angle: Math.PI / 2,  filter: c => c.z === -1 },
};

function rotateFace(faceName, callback) {
  if (isRotating) {
    if (callback) callback();
    return;
  }

  const face = FACES[faceName];
  const faceCubies = cubies.filter(face.filter);

  if (faceCubies.length === 0) {
    if (callback) callback();
    return;
  }

  isRotating = true;
  moveCount++;
  document.getElementById('move-count').textContent = `Moves: ${moveCount}`;

  // Create rotation group
  rotationGroup = new THREE.Group();
  scene.add(rotationGroup);

  // Move affected cubies to the group
  for (const cubie of faceCubies) {
    scene.remove(cubie.mesh);
    rotationGroup.add(cubie.mesh);
  }

  scene.updateMatrixWorld(true);

  // Start animation
  rotationStartTime = performance.now();
  pendingRotation = { faceName, faceCubies, callback };
}

function completeRotation() {
  const { faceCubies, callback } = pendingRotation;

  for (const cubie of faceCubies) {
    const position = new THREE.Vector3();
    const quaternion = new THREE.Quaternion();
    const scale = new THREE.Vector3();
    cubie.mesh.matrixWorld.decompose(position, quaternion, scale);

    cubie.mesh.position.copy(position);
    cubie.mesh.quaternion.copy(quaternion);
    cubie.mesh.scale.set(1, 1, 1);

    rotationGroup.remove(cubie.mesh);
    scene.add(cubie.mesh);

    cubie.x = Math.round(position.x);
    cubie.y = Math.round(position.y);
    cubie.z = Math.round(position.z);
    cubie.mesh.userData.cubieRef = { x: cubie.x, y: cubie.y, z: cubie.z };
  }

  scene.remove(rotationGroup);
  rotationGroup = null;
  pendingRotation = null;
  isRotating = false;

  if (callback) callback();
}

function updateRotationAnimation() {
  if (!isRotating || !rotationGroup || !pendingRotation) return;

  const elapsed = performance.now() - rotationStartTime;
  const t = Math.min(elapsed / ROTATION_DURATION, 1);
  const eased = 1 - Math.pow(1 - t, 3); // Ease out cubic

  const face = FACES[pendingRotation.faceName];
  const totalAngle = face.angle * eased;

  rotationGroup.quaternion.setFromAxisAngle(face.axis, totalAngle);

  if (t >= 1) {
    completeRotation();
  }
}

// === Orbit Camera ===
function updateCamera() {
  camera.position.x = orbitRadius * Math.sin(orbitPhi) * Math.cos(orbitTheta);
  camera.position.y = orbitRadius * Math.cos(orbitPhi);
  camera.position.z = orbitRadius * Math.sin(orbitPhi) * Math.sin(orbitTheta);
  camera.lookAt(0, 0, 0);
}

// === Face Click Detection ===
function getFaceFromNormal(intersection) {
  const normal = intersection.face.normal.clone();
  normal.applyMatrix4(intersection.object.matrixWorld);

  const nx = Math.round(normal.x);
  const ny = Math.round(normal.y);
  const nz = Math.round(normal.z);

  const ref = intersection.object.userData.cubieRef;
  if (!ref) return null;

  if (nx === 1 && ref.x === 1) return 'right';
  if (nx === -1 && ref.x === -1) return 'left';
  if (ny === 1 && ref.y === 1) return 'top';
  if (ny === -1 && ref.y === -1) return 'bottom';
  if (nz === 1 && ref.z === 1) return 'front';
  if (nz === -1 && ref.z === -1) return 'back';

  return null;
}

function handleFaceClick(event) {
  const rect = renderer.domElement.getBoundingClientRect();
  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);
  const meshes = cubies.map(c => c.mesh);
  const intersects = raycaster.intersectObjects(meshes);

  if (intersects.length > 0) {
    const faceName = getFaceFromNormal(intersects[0]);
    if (faceName) {
      rotateFace(faceName);
    }
  }
}

// === Scramble ===
function scramble() {
  const faceNames = Object.keys(FACES);
  const numMoves = 20 + Math.floor(Math.random() * 6);
  let i = 0;

  function doNextMove() {
    if (i >= numMoves) {
      moveCount = 0;
      document.getElementById('move-count').textContent = `Moves: ${moveCount}`;
      return;
    }

    const faceName = faceNames[Math.floor(Math.random() * faceNames.length)];
    rotateFace(faceName, () => {
      i++;
      setTimeout(doNextMove, 80);
    });
  }

  doNextMove();
}

// === Reset ===
function resetCube() {
  for (const cubie of cubies) {
    cubie.mesh.position.set(cubie.x, cubie.y, cubie.z);
    cubie.mesh.quaternion.identity();
  }
  moveCount = 0;
  document.getElementById('move-count').textContent = `Moves: ${moveCount}`;
}

// === Event Listeners ===
function setupEventListeners() {
  // Orbit controls
  renderer.domElement.addEventListener('mousedown', (e) => {
    if (e.button === 0) {
      isDragging = true;
      isClick = true;
      mouseDownPos = { x: e.clientX, y: e.clientY };
      previousMouse = { x: e.clientX, y: e.clientY };
      renderer.domElement.style.cursor = 'grabbing';
    }
  });

  window.addEventListener('mousemove', (e) => {
    if (!isDragging) return;

    const dx = e.clientX - previousMouse.x;
    const dy = e.clientY - previousMouse.y;

    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
      isClick = false;
    }

    orbitTheta -= dx * 0.005;
    orbitPhi = Math.max(0.1, Math.min(Math.PI - 0.1, orbitPhi - dy * 0.005));

    previousMouse = { x: e.clientX, y: e.clientY };
  });

  window.addEventListener('mouseup', (e) => {
    if (e.button === 0 && isClick) {
      handleFaceClick(e);
    }
    isDragging = false;
    renderer.domElement.style.cursor = 'grab';
  });

  // Scroll to zoom
  renderer.domElement.addEventListener('wheel', (e) => {
    e.preventDefault();
    orbitRadius = Math.max(4, Math.min(15, orbitRadius + e.deltaY * 0.005));
  }, { passive: false });

  // Buttons
  document.getElementById('scrambleBtn').addEventListener('click', scramble);
  document.getElementById('resetBtn').addEventListener('click', resetCube);

  // Resize
  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });

  // Set initial cursor
  renderer.domElement.style.cursor = 'grab';
}

// === Animation Loop ===
function animate() {
  requestAnimationFrame(animate);

  updateRotationAnimation();
  updateCamera();

  renderer.render(scene, camera);
}

// === Init ===
function init() {
  initScene();
  createCube();
  setupEventListeners();
  updateCamera();
  animate();
}

init();
```

Wait, I need to double-check the face rotation directions. Let me re-verify:

Right face (x=1): clockwise from +X view
- Looking from +X towards origin, the face is in the YZ plane
- Clockwise: +Y → -Z → -Y → +Z → +Y
- In coordinates: (1, y, z) → (1, z, -y)
- This is rotation around X by -90° ✓

Left face (x=-1): clockwise from -X view
- Looking from -X towards origin, the face is in the YZ plane
- Clockwise: +Y → +Z → -Y → -Z → +Y
- In coordinates: (-1, y, z) → (-1, -z, y)
- This is rotation around X by +90° ✓

Top face (y=1): clockwise from +Y view
- Looking from +Y towards origin, the face is in the XZ plane
- Clockwise: +X → -Z → -X → +Z → +X
- In coordinates: (x, 1, z) → (-z, 1, x)
- This is rotation around Y by -90° ✓

Bottom face (y=-1): clockwise from -Y view
- Looking from -Y towards origin, the face is in the XZ plane
- Clockwise: +X → +Z → -X → -Z → +X
- In coordinates: (x, -1, z) → (z, -1, -x)
- This is rotation around Y by +90° ✓

Front face (z=1): clockwise from +Z view
- Looking from +Z towards origin, the face is in the XY plane
- Clockwise: +X → -Y → -X → +Y → +X
- In coordinates: (x, y, 1) → (y, -x, 1)
- This is rotation around Z by -90° ✓

Back face (z=-1): clockwise from -Z view
- Looking from -Z towards origin, the face is in the XY plane
- Clockwise: +X → +Y → -X → -Y → +X
- In coordinates: (x, y, -1) → (-y, x, -1)
- This is rotation around Z by +90° ✓

All confirmed! The rotation angles are correct.

Now let me also verify the rotation group approach works correctly.

When I create a group at the origin and add a cubie mesh at position (1, 1, 1):
- The mesh's local position is (1, 1, 1)
- The group's position is (0, 0, 0)
- The mesh's world position is (1, 1, 1)

When I rotate the group by -90° around X:
- The rotation matrix for -90° around X transforms (x, y, z) → (x, z, -y)
- So the mesh's world position becomes (1, 1, -1)

After the animation, I decompose the mesh's world matrix:
- Position: (1, 1, -1)
- This is correct! The cubie at (1, 1, 1) on the right face should move to (1, 1, -1) after a right face clockwise rotation.

Wait, let me double-check. For the right face clockwise rotation, we said:
(1, y, z) → (1, z, -y)

So (1, 1, 1) → (1, 1, -1). ✓

And the cubie's rotation should also be updated. The mesh's world quaternion after the group rotation should reflect the face rotation.

After decomposing and setting the mesh's local transform to the world transform, the mesh's rotation will be set correctly. ✓

Great, the approach is correct.

One more thing: I should make sure the `scene.updateMatrixWorld(true)` call is correct. The `true` parameter forces a recursive update of all world matrices. This is important because we just changed the parent of several meshes (from scene to group), and we need the world matrices to be updated before the animation starts.

Actually, in the animation loop, `renderer.render()` calls `scene.updateMatrixWorld()` internally. So even without the explicit call, the matrices should be correct by the time the first render after adding to the group happens. But it's safer to call it explicitly.

OK, I think the code is complete and correct. Let me write the final HTML file.

Oh wait, I also need to handle the case where `intersection.face` might be null or undefined in newer versions of three.js. In newer versions, `face` was replaced with `faceIndex`. Let me handle both:

```javascript
function getFaceFromNormal(intersection) {
  let normal;
  if (intersection.face) {
    normal = intersection.face.normal.clone();
  } else if (intersection.faceIndex !== undefined) {
    // For newer three.js versions, compute normal from face index
    const geometry = intersection.object.geometry;
    const index = intersection.faceIndex;
    // This is more complex... let me just use face for now
    return null;
  } else {
    return null;
  }
  normal.applyMatrix4(intersection.object.matrixWorld);
  // ... rest of the function
}
```

Actually, let me just use `intersection.face` for now. If three.min.js is an older version, it should have `face`. If it's a newer version, I might need to handle `faceIndex` differently. But for a basic implementation, `face` should work.

Hmm, actually in three.js r125+, `face` was removed from Intersection and replaced with `faceIndex`. But `face` might still be available in some versions. Let me check what version three.min.js might be...

Since I don't know the exact version, let me handle both cases:

```javascript
function getFaceFromNormal(intersection) {
  let normal;
  if (intersection.face) {
    normal = intersection.face.normal.clone();
  } else {
    // Fallback: compute normal from faceIndex
    const geometry = intersection.object.geometry;
    const faceIndex = intersection.faceIndex !== undefined ? intersection.faceIndex : intersection.face;
    if (faceIndex === undefined) return null;
    const normalAttr = geometry.getAttribute('normal');
    if (!normalAttr) return null;
    // Get the normal for the first vertex of the face
    const v = faceIndex * 3;
    normal = new THREE.Vector3(
      normalAttr.getX(v),
      normalAttr.getY(v),
      normalAttr.getZ(v)
    );
  }
  normal.applyMatrix4(intersection.object.matrixWorld);
  // ... rest
}
```

Actually, this is getting too complicated. Let me just use `intersection.face` and hope the version of three.min.js supports it. Most versions do.

OK, let me finalize the code and write it out. I'll keep it clean and well-structured.

One more thing: I should also add a subtle animation to the background, like a slow gradient shift or some floating particles. But that might be too much. Let me keep it simple.

Let me also add a nice ground plane with a grid pattern. I'll use THREE.GridHelper.

```javascript
const gridHelper = new THREE.GridHelper(10, 20, 0x333355, 0x222244);
gridHelper.position.y = -1.5;
scene.add(gridHelper);
```

This adds a subtle grid below the cube for visual reference.

OK, I'm writing the final code now. Let me also make sure the CSS is polished and the UI looks good.

Let me also add a subtle animation to the scramble button when it's being clicked.

And I should make the instructions text fade in/out or be subtle.

Here's my final HTML file:

Actually, I realize I should also think about the color of the internal faces. Currently I'm using 0x1a1a2e which is very dark. But when you look at the cube from certain angles, you might see the internal faces through the gaps between cubies. The dark color should make them blend in with the background.

But actually, the gaps between cubies show the background, not the internal faces. The internal faces are hidden between cubies. So the dark color is fine.

Wait, actually the internal faces ARE visible through the gaps between cubies. When you look at the cube from an angle, you can see the internal faces of the cubies that are on the edges and corners. The dark color will make these look like shadows, which is actually a nice effect.

OK, I'm satisfied with the design. Let me write the final code.

Hmm, one more thing. I want to make sure the cube is properly centered and the camera is at the right distance. The cube spans from -1 to 1 in each direction, so it's 2 units wide. The camera should be far enough to see the whole cube.

With FOV = 45° and camera distance of 7, the visible width at the camera's distance is approximately 2 * 7 * tan(22.5°) ≈ 2 * 7 * 0.414 ≈ 5.8 units. The cube is 2 units wide, so it fits comfortably. ✓

The camera position (5, 3, 5) gives a nice 3/4 view of the cube. ✓

OK, final code:

Actually, I want to reconsider the camera orbit. With orbitPhi = PI/3 (60 degrees from the top), the camera is looking down at the cube at about 60 degrees. This gives a nice view of the top and front faces. ✓

And orbitTheta = PI/4 (45 degrees) gives a 45-degree azimuthal angle, showing both the left and right sides of the cube. ✓

The orbitRadius of 7 gives enough distance to see the whole cube. ✓

OK, I'm writing the final code now. For real this time. No more deliberation.

Let me also add a nice touch: when a face is clicked, briefly highlight it with a subtle glow effect. I can do this by temporarily increasing the emissive intensity of the face's material.

Actually, this is complex because I need to identify which material corresponds to which face of which cubie. Let me skip this for now and focus on the core functionality.

Let me write the complete index.html file now.

I also want to make sure the page looks good on different screen sizes. The canvas should fill the entire viewport, and the UI should be responsive.

OK here's my final attempt. Let me write the complete code: