The user wants a single-page web app with a 3D Rubik's Cube using three.js. Let me build it in index.html.

Let me create a comprehensive Rubik's cube:
- 27 cubies (small cubes) arranged in 3x3x3 grid
- Each face colored correctly (white, yellow, red, orange, green, blue)
- Interactive face rotations on click
- Orbit controls (implement manually since no external resources, but OrbitControls might be in three.min.js... Actually three.min.js is core three.js, not the addons. I need to implement orbit controls manually.)
- Scramble button

Let me write this. I'll implement:
- Boxes with proper face colors using materials array
- Raycaster for click detection
- Orbit controls implemented manually with mouse drag
- Face rotation: when clicking on a face of a cubie, determine which layer/slice to rotate, animate the rotation.

Let me build the cube. Each cubie is a BoxGeometry with 6 materials. The colors are on outer faces only.

Let me think about the approach for face rotation. When user clicks a cubie, detect which side was clicked (from the face normal). Then rotate that slice of cubies 90° around that axis.

I'll track cubies as group of meshes. For rotation, add the slice cubies to a temporary group, animate rotation, then add back.

Let me implement orbit controls: mouse drag to rotate camera around target. Right-click or left-click on empty space? The problem: clicking on the cube rotates faces, but we also want orbit drag. 

Approach: Left-drag on a cubie rotates that face. Left-drag on empty space (or background) orbits. Also could use right-drag to orbit always. Let me use: left click on cube = face rotation (needs to be a click, but drag on cube shouldn't rotate face accidentally). 

Let me do: On pointerdown on a cube face, set a flag. If pointer moves beyond threshold, cancel face rotation (treat as orbit). On pointerup without move, trigger face rotation. Orbit uses drag anywhere (including on cube when dragged).

Actually simpler: 
- Left click (no drag) on a cubie face → rotate that layer.
- Drag (left or right) → orbit camera.

Let me implement pointer events.

Let me write the whole thing.

For OrbitControls, I'll implement a simple spherical orbit: camera orbits around target, with phi/theta, and zoom on wheel.

Let me code.

Color assignment: standard Rubik's cube with white on top (U), yellow bottom (D), red front (F), orange back (B), green right (R), blue left (L).

BoxGeometry material order: [+x, -x, +y, -y, +z, -z].
- +x = right face (green)
- -x = left face (blue)
- +y = top (white)
- -y = bottom (yellow)
- +z = front (red)
- -z = back (orange)

For internal faces, use dark gray/black.

For each cubie at position (x,y,z) in {-1,0,1}, set the material color for outer faces.

Face rotation: determine clicked face normal. Suppose normal is +y (top). Rotate the top layer (all cubies with y == clicked cubie's y rounded) around Y axis by ±90°. Direction depends on... let's rotate clockwise. For +y normal, rotating around +Y by -90 (or +90). Let me just do a chosen direction.

After rotation, positions change. I need to re-snap the mesh positions to integers and update internal rotation. Because of floating point, snap positions.

Actually the standard approach: keep each cubie as a mesh with position (vector) and quaternion. For a slice rotation, group the cubies in that slice, apply rotation, then after animation, set each cubie's position = rounded, and world matrix.

Let me implement by: during animation, parent the slice cubies to a temporary pivot group, rotate the group. After animation ends, update each cubie: its world position and world quaternion, round position to integers, clear transform matrix, then remove from pivot and add back to scene.

Let me implement carefully.

I'll create helper to set cubie's position from world matrix.

Let me code it now.

Structure:
- scene, camera, renderer
- cube group containing 27 cubies (cubie mesh).
- orbit state
- raycaster on click.

Click detection: need to raycast against cubies. But during a rotation animation, we may block input.

Let me define:
- isAnimating flag.
- selected slice detection.

When click on cubie: get face normal in world coords. But cube may be rotated from orbit... no, orbit only moves camera, cube stays fixed in world. Actually I orbit the camera, not the cube. So cube is axis-aligned in world. Good, cubie positions are world positions. The cube group could be at origin, axis-aligned. So face normal in world = normal from raycaster face in object local space (cubie local). Since cubies are axis-aligned (rotations are 90° multiples, so quaternions remain axis-aligned), local space == world space (just translation). Good.

So face normal from intersect.face.normal in cubie local space. Determine dominant axis. That gives slice axis. The cubie's rounded position on that axis gives slice index.

Direction of rotation: I'll pick clockwise relative to the normal. For normal +y, rotate -90° around Y. For normal -y, rotate +90° around Y (so it's always "clockwise" from the viewer of that face). Let me define sign by normal component: rotation = -sign(normal_axis) * 90° around that axis. That gives consistent clockwise view.

Let me implement rotation direction as: rotate the layer such that it turns clockwise when looking along the outward normal. 

For +y normal, looking down -y, clockwise is... rotate around +Y axis negative? Let me not overthink; just use rotAngle = -90 * sign(normalDir) where sign is +1 if normal along positive axis. Actually let me test mentally: top layer, normal +y (pointing up). Viewing from above looking down. Clockwise rotation. For standard math, positive rotation about +Y is counterclockwise when viewed from +Y looking down... The direction doesn't matter much for functionality.

Let me just pick: rotAngle (radians) = -Math.PI/2 * Math.sign(normal component along axis). Where normal component could be +1, -1 (I'll take the sign of the component with max abs).

Now let me write the code.

Let me handle slice selection: cubies rounded position. Round each component to nearest integer. axis = dominant normal axis. sliceVal = cubie's position[axis]. Collect all cubies whose rounded position[axis] === sliceVal.

Then create pivot group at origin, set pivot quaternion to identity, attach slice cubies (parent them to pivot preserving world transform via pivot.updateMatrixWorld then cube.attach? three.js has Object3D.attach method). Actually three has `pivot.attach(cubie)` which reparents while preserving world transform. But for clean rotation around axis, better to set pivot.rotation and attach so that rotation happens around pivot's origin which equals the cube center.

Simplest: create pivot at origin. For each cubie in slice, use scene.attach? Let me do: pivot.attach(cubie) keeps world transform, then animate pivot.rotation[axis] from 0 to rotAngle. After animation: for each cubie, get world position and quaternion, snap, then scene.attach(cubie) (back to scene, which preserves world transform), reset cubie's position rounded. pivot.rotation reset.

But if pivot.rotation accumulates, we should set pivot.quaternion to identity before attaching. Since slice cubies have arbitrary world transforms, attaching to identity-rotated pivot then rotating pivot gives correct rotation about world origin (cube center). Good.

Let me use a tween-like animation in the render loop with a queue.

Let me implement an animation queue of rotations. But to keep simple, process one at a time; block input while animating.

Now let me write.

Let me also add nice visuals: slight gap between cubies, rounded? Just use BoxGeometry with size 0.95 to create gaps. Add subtle edges via EdgesGeometry maybe. Keep simple with black internal and colored outer.

Add lighting: ambient + directional.

Add UI: header title, scramble button, maybe reset button. Instructions text.

Scramble: perform N random rotations rapidly (queue them with fast animation).

Let me code.

I'll implement rotation as a queue where each entry has axis, sliceVal, angle, duration. The update loop animates current entry; when done, finalize and pop next. Buttons during animation: I'll just enqueue. For manual clicks, enqueue too. That's cleaner than blocking.

Let me implement finalize: after pivot rotation applied, for each cubie snap.

Snap function:
```
function snapCubie(cubie){
  cubie.updateWorldMatrix(true,false);
  const wp = new THREE.Vector3(); cubie.getWorldPosition(wp);
  const wq = new THREE.Quaternion(); cubie.getWorldQuaternion(wq);
  // remove from pivot back to scene
  scene.attach(cubie); // wait, cube group. Let me keep cubies in a 'cube' group.
  cubie.position.set(Math.round(wp.x), Math.round(wp.y), Math.round(wp.z));
  cubie.quaternion.copy(wq);
  // snap quaternion to nearest 90 deg
  snapQuat(cubie.quaternion);
  cubie.updateMatrix();
}
```

Hmm attach order: after rotation, pivot holds cubies. I need to remove them from pivot and put into cube group with snapped transforms. Let me do: 
```
for each cubie in slice:
  cubie.updateWorldMatrix(true,false);
  const wp = getWorldPosition, wq=getWorldQuaternion
  pivot.remove(cubie);
  cubeGroup.add(cubie);
  cubie.position.set(round...);
  cubie.quaternion.copy(wq); snapQuat;
  cubie.updateMatrix();
pivot.rotation.set(0,0,0);
```

cubeGroup is at origin so positions are world.

snapQuat: round each quaternion component to nearest multiple of 0.5 (since 90° rotations have quaternion components 0, ±0.5, ±0.7071...). Hmm 90° quaternion: q = cos(45°)=0.7071 around axis. Components are ±0.7071 or 0. Rounding to 0.5 won't give 0.7071. Better approach: don't snap quaternion; instead store cubie's transform relative to cube using its own matrix. Since all rotations are 90° multiples, the accumulated quaternion should remain axis-aligned. Rounding each quat component to nearest 0 or ±0.5 or ±0.707... complicated.

Alternative: represent each cubie position as integer vector and maintain its orientation as part of transform matrix. Since we snap position to integer and keep exact quaternion (which should be near axis-aligned due to exact 90° rotations), floating error is minimal if rotations are exact ±90°. Let me just keep quaternion as-is but ensure exact. The pivot rotation is animated by easing to exact angle, final set to exact angle. Errors accumulate slightly across many rotations but small. Could cause drift after thousands of moves but fine.

Actually to be safe, I'll snap the quaternion by rounding to nearest value in set {0, ±0.5, ±0.7071067811865476} per component. Let me implement a helper that quantizes each component to the nearest allowed value based on its magnitude being near 0 or near 0.7071 or near 0.5? 90° rotations produce only 0 and ±0.7071 components (axis-aligned) — no 0.5 components. Combinations of 90° rotations around different axes yield quaternions that are axis-aligned 90° rotations → components 0 and ±0.7071. 180° rotations would give ±1. But we only do 90° rotations, and concatenation of 90° rotations stays as rotations by multiples of 90°, quaternion components are {0, ±0.7071, ±1} possibly for 180° and 0°/360°. Let me quantize: for each component, find nearest in set {0, ±0.5? } no.

Let me quantize each component c: if |c| near 0 →0; if near 0.7071 → ±0.7071; if near 1 → ±1. Simple thresholds.

Let me write quantize: 
```
const mag=Math.abs(c);
if(mag<0.4) c=0;
else if(mag<0.9) c=0.7071067811865476*Math.sign(c);
else c=Math.sign(c);
```

Good.

Now orbit controls. Implement with pointer drag:
- pointerdown: record start x,y, set dragging, and record whether down on a cubie (for click detection). 
- pointermove: if dragging, compute delta, update theta/phi around target, set camera position. Distance for zoom on wheel.
- pointerup: if moved < threshold pixels and pointer was on a cubie, do face rotation.

But drag on cubie should orbit too (so user can orbit freely). And click (no move) on cubie = rotate face. Click on background = nothing (or also orbit). That's fine.

Need to detect cubie at pointerdown via raycaster to know if it's a face-click candidate.

Let me set renderer, camera at position like (6,6,6) looking at origin. target (0,0,0). theta initial, phi initial.

Let me code orbit: 
```
let theta = Math.PI/4, phi = Math.PI/4, dist=9;
updateCam(){
  camera.position.set(dist*Math.sin(phi)*Math.cos(theta), dist*Math.cos(phi), dist*Math.sin(phi)*Math.sin(theta));
  camera.lookAt(0,0,0);
}
```
Drag: theta -= dx*0.01; phi -= dy*0.01; clamp phi.

Wheel: dist *= 1+deltaY*0.001, clamp.

Now raycaster uses camera & NDC.

Let me get pointer NDC from event.clientX relative to canvas rect.

I'll use renderer.domElement for events.

Let me now write the full HTML.

For the click detection I need the cubie meshes list for raycasting. I'll keep allCubies array.

Face normal: intersect.face.normal is in cubie local space. Since cubie is axis aligned, that equals world axis. Good. But to be safe convert: normal.clone().transformDirection(cubie.matrixWorld). Then find dominant axis.

Also the cubie world position gives slice.

Let me now write.

I want click rotation to feel good: quick 300ms.

Scramble: enqueue 20 random moves with 80ms each. Provide a scramble button.

Let me write the code fully.

Let me also add instructions overlay.

Let me make the renderer responsive.

Now writing file.

Let me also consider: when rotating a slice, cubies are the group's children. cubeGroup at origin. Good.

Let me write everything.

For materials, define 6-material array per cubie. Colors:
```
const COL = {
  right:0x2ecc71, // green +x
  left:0x3498db,  // blue -x
  up:0xecf0f1,    // white +y
  down:0xf1c40f,  // yellow -y
  front:0xe74c3c, // red +z
  back:0xf39c12,  // orange -z
  inner:0x1a1a1a
};
```
Material order [+x,-x,+y,-y,+z,-z] = [right,left,up,down,front,back].

For cubie at (i,j,k) in {-1,0,1}:
```
mats = [inner,inner,inner,inner,inner,inner].map(()=>new THREE.MeshStandardMaterial({color:inner}));
if(i===1) mats[0]=right; if(i===-1) mats[1]=left;
if(j===1) mats[2]=up; if(j===-1) mats[3]=down;
if(k===1) mats[4]=front; if(k===-1) mats[5]=back;
```
Use distinct material instances fine.

Mesh size 0.95, positioned at (i*1.0,...). Slight scale maybe 0.96 for gaps. I'll size box 0.94.

Add subtle edges: EdgesGeometry with LineSegments thin black. Optional.

Lighting: ambient 0xffffff 0.6, directional from (5,8,6).

Background: gradient via renderer clear color dark.

Let me finalize and write.

I'll compute slice rotation:
```
function enqueueMove(axis, sliceVal, angle){
  queue.push({axis, sliceVal, angle, duration:300});
}
```
Process in animate loop.

Rotate around axis using pivot.rotation[axis] += delta. For axis 0=X,1=Y,2=Z.

Finalize when elapsed>=duration: set rotation to exact angle, snap cubies.

Let me write process:
```
function updateRotations(dt){
  if(queue.length===0){current=null;return;}
  if(!current){
    current=queue.shift();
    current.elapsed=0;
    // build pivot
    pivot.rotation.set(0,0,0);
    pivot.quaternion.identity();
    current.cubies=[];
    for(const c of allCubies){
      const p=[c.position.x,c.position.y,c.position.z].map(Math.round);
      if(p[current.axis]===current.sliceVal) current.cubies.push(c);
    }
    for(const c of current.cubies) pivot.attach(c);
    // initial rotation
    current.prev=0;
  }
  current.elapsed+=dt;
  const t=Math.min(1,current.elapsed/current.duration);
  const eased=easeInOutCubic(t);
  const targetAngle=current.angle*eased;
  const rot=pivot.rotation[current.axisName];
  pivot.rotation[current.axisName]=targetAngle;
  if(t>=1){
    pivot.rotation[current.axisName]=current.angle;
    // finalize
    for(const c of current.cubies){
      c.updateWorldMatrix(true,false);
      const wp=new THREE.Vector3(); c.getWorldPosition(wp);
      const wq=new THREE.Quaternion(); c.getWorldQuaternion(wq);
      pivot.remove(c);
      cubeGroup.add(c);
      c.position.set(Math.round(wp.x),Math.round(wp.y),Math.round(wp.z));
      c.quaternion.copy(wq);
      quantizeQuat(c.quaternion);
      c.updateMatrix();
    }
    pivot.rotation.set(0,0,0);
    current=null;
  }
}
```

pivot.rotation uses euler; setting rotation.x etc fine.

Note pivot.attach requires pivot in scene to preserve world correctly — attach preserves the child's world transform relative to new parent's world transform. pivot is child of scene at origin identity. Fine.

easeInOutCubic.

Now the click → enqueue:
```
function onFaceClick(cubie, normal){
  // dominant axis
  const n=normal;
  let axis=0; let v=n.x;
  if(Math.abs(n.y)>Math.abs(v)){axis=1;v=n.y;}
  if(Math.abs(n.z)>Math.abs(v)){axis=2;v=n.z;}
  const sign = v>=0?1:-1;
  const sliceVal=Math.round(cubie.position[axis]);
  const angle = -Math.PI/2*sign;
  enqueueMove(axis,sliceVal,angle);
}
```

Good.

Now pointer handlers. Let me use pointerdown/move/up on canvas.

```
let pointerDown=false, downX=0, downY=0, moved=false, downCubie=null;
canvas.addEventListener('pointerdown',e=>{
  pointerDown=true; downX=e.clientX; downY=e.clientY; moved=false;
  downCubie=hitCubie(e);
});
canvas.addEventListener('pointermove',e=>{
  if(!pointerDown) return;
  const dx=e.clientX-downX, dy=e.clientY-downY;
  if(Math.abs(dx)+Math.abs(dy)>6) moved=true;
  if(moved){ theta-=dx*0.008; phi-=dy*0.008; phi=clamp; updateCam(); downX=e.clientX; downY=e.clientY;}
});
window.addEventListener('pointerup',e=>{
  if(!pointerDown) return;
  pointerDown=false;
  if(!moved && downCubie){
     const intersect = raycast downCubie to get normal; enqueueMove...
  }
  downCubie=null;
});
```

For normal, need to raycast at pointerup position (same as down since not moved). I'll raycast at down. Actually let me capture normal at pointerdown too. Let me store downNormal.

hitCubie(e): raycast, return {cubie, normal} or null.

Let me implement raycast:
```
function raycast(e){
  const rect=renderer.domElement.getBoundingClientRect();
  const mx=((e.clientX-rect.left)/rect.width)*2-1;
  const my=-((e.clientY-rect.top)/rect.height)*2+1;
  raycaster.setFromCamera(new THREE.Vector2(mx,my), camera);
  const hits=raycaster.intersectObjects(allCubies);
  if(hits.length) return {cubie:hits[0].object, normal:hits[0].face.normal.clone().transformDirection(hits[0].object.matrixWorld)};
  return null;
}
```

Note: raycast only works for objects in scene with visible. allCubies are children of cubeGroup which is in scene. During animation cubies are in pivot (still in scene under pivot). Fine.

Add window resize.

Scramble button: on click, generate 20 moves. Random axis & sliceVal & direction, queue with short duration.

Also prevent selecting slice that doesn't change? Any slice works (rotating middle slice is a valid "face" though not standard cubie face but fine).

Reset button maybe. I'll add scramble and reset.

Let me write UI CSS nice.

Let me now write the file.

Also need to handle that pivot.attach during animation moves cubies from cubeGroup to pivot; but on next move we rebuild. Good. allCubies stays same array regardless of parent.

One concern: pivot must be added to scene. Yes.

Let me also ensure that when not animating, cubies are in cubeGroup (not pivot). Initial state all in cubeGroup.

Edge: after finalize we remove from pivot and add to cubeGroup. Good.

Let me write now.

Let me pick camera far, renderer antialias.

Write the file.

Good, three.min.js is a UMD/global build. Let me write the index.html.

I have a bug: in updateRotations I call `current.axisName()` but current is a plain object without that method. I defined `axisName` array separately. Let me fix: use `axisName[current.axis]` array.

Also the raycast function has a messy while loop. Let me fix that. Since intersectObjects on allCubies with recursive=true, hits[0].object is either the mesh or an edge LineSegments child. I want the cubie mesh. Let me just raycast with recursive=false (the cubie mesh directly), but the mesh has the edge as child; face normal only exists on mesh geometry. intersectObjects(allCubies) default recursive=false? In three.js, intersectObjects default recursive=true. Let me set recursive:false and filter hits to objects that have geometry with face normals... Actually simpler: intersectObjects(allCubies, false) hits only the top-level meshes. That gives face normal correctly. The edges are children so won't be hit. Good. But clicking might want to also count when hitting edge line — irrelevant.

Let me fix raycast to use recursive false and clean up.

Also `current.axisName()` bug. Fix.

Also the introAnim runs on same clock; fine but clock.getDelta is shared with animate loop leading to double consumption. Minor; acceptable but let me just not use clock there, use Date. Actually the double getDelta could make animations jump. Let me use a separate approach for intro with performance.now. Simpler: integrate intro into animate loop. Let me just set cubeGroup rotation in animate until k>=1. I'll refactor: add intro flag.

Let me rewrite those parts with edits.

Also the reset uses userData.pos which I overwrite in finalize to same rounded positions (which equal original integer positions). userData.pos original is [i,j,k] integers, and position is i*GAP. In reset I set position = userData.pos*GAP. Good, but finalize sets userData.pos to rounded position = [i,j,k]. Good consistent.

But after many rotations the integer positions change, and reset restores original positions [i,j,k] — that's the solved layout since those are the original grid coords. Good.

Let me fix the two bugs.

Now let me integrate the intro animation into the animate loop cleanly. Let me edit the animate function.

Wait, I have `const intro` declared after `const clock` but animate() references intro. Since animate is called via requestAnimationFrame after the script runs fully, and `intro` is declared before `animate()` is called? Let me check order: `const clock`, `cubeGroup.rotation`, `function animate(){...}` defined (not called yet), then `animate();` called, then `const intro`. 

Since `animate()` is invoked synchronously with `animate()` at the end, and `intro` is declared AFTER that call... Actually `animate()` call happens before `const intro` is reached in execution. When animate() runs its first frame via requestAnimationFrame, it's asynchronous (next frame), by which time `intro` will have been declared. But the synchronous call `animate()` at line... wait `animate()` calls `requestAnimationFrame(animate)` first then executes body immediately in the same call. So the first `animate()` invocation executes body immediately, which reads `intro` → but `const intro` hasn't been initialized yet at that point! That would throw ReferenceError (TDZ).

Let me check current file order.

`intro` is declared after `animate()` is invoked, causing TDZ ReferenceError on first synchronous call. I need to move the `intro` declaration before `animate()`. Also there's a leftover `cubeGroup.rotation.set(0.4, 0.6, 0);` at line 315 from the old block. Let me fix ordering.

The JS is syntactically valid. Let me do a quick sanity check by verifying there are no references to undefined things and that three.min.js exists. Let me also verify the reset uses userData correctly. Also I want to double check pivot.attach exists in three r118+ (attached method added r109). The three.min.js version is 2021 (r128/r130ish). attach exists. Good.

One concern: In the raycast during the intro spin, cubeGroup is rotated, so cubie local != world. But I transformDirection by matrixWorld, which includes cubeGroup rotation, so normal in world is correct. And slice selection uses cubie.position[axis] which is local to cubeGroup. Since cubeGroup is rotated, the axis alignment for rotation is off! The rotation pivot is world-aligned but cubie local axes are rotated by cubeGroup.

Hmm. During intro the cube spins but by the time user clicks (intro done ~0.9s), cubeGroup.rotation is (0,0,0). So after intro, cube is axis aligned in world and everything consistent. The intro only lasts 0.9s and user interactions would be at world axes after. But if user clicks during intro... edge case, ignore. But also the normal transform: when cube aligned, fine.

Actually wait, there's a subtle issue: I rotate cubeGroup to level, but after that cubeGroup.rotation stays (0,0,0), good, so cubie world = local. The rotation pivot operates in world space around origin, and cubies positions are in cubeGroup local == world. Consistent.

Everything good. Let me also confirm the intro doesn't interfere: it's fine.

Let me also double check: reset button restores positions with userData.pos which for the center cubies is [0,0,0]. Good.

I think the app is complete. Let me provide a brief summary. The file exists. Good.

Let me just make sure there's no leftover reference and quick visual test can't be done in headless easily. I'm confident.

Actually, one more check: `renderer.outputEncoding = THREE.sRGBEncoding;` — in r128 that's valid. In some versions it's `outputColorSpace`. Since three.min.js is 2021 r128-130, outputEncoding is valid (deprecated in r152). Good.

Done.