Build a Rubik's cube using three.min.js. Need clickable face rotation (click a facelet to rotate that layer? Or click and drag?), orbit-drag camera, scramble button. Implementation contents:

- 27 cubies, each a mesh with colored face materials.
- Orbit camera: manual implementation (drag on background rotates the camera). But dragging on the cube might be for face rotation. More simply: click a cubie face → rotate the layer containing that face in the click direction? General approach: click rotates that layer 90° (direction determined by which face was clicked / Shift for reverse rotation). Or drag on cube face rotates the layer.

Policy: pointerdown on cube starts a potential face drag. If pointer moves beyond threshold, determine drag direction and rotate the layer accordingly. If just a click without movement... hmm, "clickable face rotation" — click a sticker to rotate its face clockwise, Shift+click to rotate counter-clockwise. This is simpler and fits "clickable." But rotating only the face layer by clicking a sticker is also good. Do it like this: click a sticker → rotate that face clockwise 90° (Shift = counter-clockwise). Also support drag-to-rotate for usability? Narrow the scope: click + Shift-click, plus drag-based slice rotation might be too complex. Click only, but drag on empty space orbits the camera. Actually if the drag threshold is used: quick click = face rotation; drag starting from cube = layer rotation in drag direction (good). Implementation: raycast on pointerdown; if it hits a cubie, record the hit point, face normal, and cubie. If pointer moves more than 8px, compute the drag direction in world space, project onto the face plane, determine rotation axis = normal, direction determined via cross product. Rotate the layer containing the clicked cubie around the normal axis. If pointerup without exceeding threshold → treat as click: rotate clicked face clockwise (Shift for counter-clockwise). If pointerdown hits nothing → orbit camera.

Animation: queue of rotations, animate over about 200ms using a pivot group.

Scramble: apply 20 random moves immediately (fast animation or instant). Animate quickly.

Implementation details:

- Cubie: BoxGeometry(0.96) with MeshLambertMaterial per face; colors: standard. Stickers can be material color only — no problem.
- Position is integer -1,0,1 times spacing 1.
- Rotation: create Group pivot at origin, attach cubies whose rounded coordinate along the axis matches the layer, rotate pivot to target angle, then reattach to scene and round positions and quaternions.

Rounding after rotation: snap cubie.position to nearest integer grid, and snap quaternion via rotation matrix rounding? Simplest: keep a logical state with grid position and orientation; after animation, cubie.position.set(round each /1 * 1), and round elements of rotation matrix to nearest of -1,0,1 by setting from snapped matrix. Use m = new Matrix4().makeRotationFromQuaternion(q), round each element, q.setFromRotationMatrix.

Drag → layer rotation: axis = clicked face normal (world axis, snap to nearest axis). Drag vector in screen space → convert to world direction on the plane perpendicular to the normal... Standard approach: camera right and up vectors; drag dx,dy gives world move direction d = right*dx + up*(-dy). Rotation axis must be perpendicular to the face normal, one of the two other axes. Choose the axis a (one of the two world axes perpendicular to normal) that maximizes |dot(d, a)|. Then rotation is around the remaining axis? No: layer rotates around an axis; clicked face normal is n; dragging moves the sticker in direction d; rotation axis t is perpendicular to both n and the direction of motion: t = n × d normalized, snapped to axis. Rotation direction sign: motion = ω × r → sign = sign of dot(d, t × r)? Let r = hit point (relative to center, since layer passes through origin). For angular velocity ω around t: v = ω t × r. We want v·d > 0, so sign = sign(d · (t × r)). Rotate layer by ±90° with that sign.

Click (no drag): rotate the face = the layer at the extreme of the clicked normal? Clicking the sticker with normal +X on a cubie at x=1 → rotate the X layer (which is a face) clockwise as seen from +X. Clicking a sticker with normal +X on an inner cubie (x=0) rotates the middle slice — that's also fine, clockwise as viewed from +X. Clockwise from the viewpoint looking down from the positive side of the normal axis = rotation of -90° around the normal (right-hand rule: positive rotation is counter-clockwise looking from positive side down). So click move: axis=n, angle=-90° (Shift: +90°).

Move queue processed sequentially in animation loop.

Camera orbit: spherical coordinates, drag on empty space changes theta/phi. Wheel zoom optional — add it.

UI: scramble button, reset button (maybe), styled with title bar.

Lighting: ambient + directional.

Raycast targets: cubie meshes; use face normal transformed to world (mesh's quaternion). Get intersect.face.normal and apply cubie's quaternion, then snap to axis.

Let's write the code.

Key functions:

```js
const AXIS = [[1,0,0],[0,1,0],[0,0,1]];
function snapAxis(v){ pick the axis with maximum |dot| with sign }
```

Move queue: `moves.push({axis, layer, angle, duration})`. Each frame, if not animating and queue not empty, start a move: select cubies with round(pos[axis])==layer, attach to pivot, animate.

Snap function after move ends.

Scramble: 25 random moves with duration 90ms; user moves 220ms.

Prevent input during scramble? Just queue; disable scramble button while moves are queued.

Face colors: right +x red, left -x orange, up +y white? Standard: U white, D yellow, F green, B blue, R red, L orange. Material order for BoxGeometry: [+x,-x,+y,-y,+z,-z] = [R,L,U,D,F,B]. Inner faces dark gray.

Cubie construction: single geometry, per-cubie material array (shared materials OK — materials can be shared per-face-index across cubies... inner faces are also dark). Use 12 shared materials: color per face + black. But face index in material array maps to geometry groups; every cubie gets the same array, so a cubie at x=-1 will display red on its +x face... Actually the colors should depend on position: sticker colors only on outward-facing sides. Since cubies keep material array [red, orange, white, yellow, green, blue], red will always be on local +x; initially local==world, so a cubie at x=-1 will show orange on the outward -x face, which is correct, and red on its inward +x face (hidden). Since the whole mesh rotates together with materials after rotation, colors move correctly. So a single shared material array works.

Edge rounding: add a slight bevel? Just use box with black gaps (size 0.94, spacing 1.02).

Orbit: camera spherical coordinates: radius 8, theta, phi. Update on drag. Also add touch support via pointer events (pointerdown/move/up covers it).

Cursor: pointer when hovering a cubie? Optional, skip or make simple.

Write the file.

Snap quaternion:
```js
function snapCubie(c){
  c.position.set(Math.round(c.position.x), Math.round(c.position.y), Math.round(c.position.z)).multiplyScalar(SPACING);
  const m = new THREE.Matrix4().makeRotationFromQuaternion(c.quaternion);
  const e = m.elements;
  for(let i=0;i<16;i++) e[i] = Math.round(e[i]);
  c.quaternion.setFromRotationMatrix(m);
}
```

Layer selection during pivot: positions are multiples of SPACING, so layer = Math.round(pos[axis]/SPACING).

Move execution:

```js
let anim = null;
function startMove(mv){
  const pivot = new THREE.Group(); scene.add(pivot);
  const affected = cubies.filter(c=>Math.round(c.position.getComponent(axIdx)/SPACING)===mv.layer);
  affected.forEach(c=>pivot.attach(c));
  anim = {mv, pivot, affected, t0: performance.now()};
}
```
Each frame: ease progress; pivot.rotation[axis] = angle * eased. When done: affected.forEach(c=>scene.attach(c)); snap; remove pivot; anim=null.

Drag detection: on pointerdown, raycast. If hit: save {cubie, point, normal(world-snapped), x,y, moved:false}. If pointermove with button and hit info: dx,dy from start; if len>10: determine the move, push to queue, clear hit info (one move per drag). Otherwise orbit.

pointerup: if hit info exists and !moved: click move: axis=normal, layer = cubie layer along normal axis, angle = shift? +PI/2 : -PI/2.

Orbit drag: pointerdown with no hit: orbit mode.

Camera update: position from spherical coords, lookAt origin.

Zoom: wheel adjusts radius, clamp 5..15.

UI: overlay div with title, scramble + reset buttons, hint text.

Reset: rebuild positions/quaternions (or just snap and set). Rebuild cubies to reposition — simpler: reset each cubie's position to original and identity quaternion. Save the originals.

Write it.

Alright, three.min.js exists. Let me write index.html.

Sanity check: if three.min.js exists, is the syntax OK? Can't easily run WebGL headlessly, but at least the JS syntax can be verified with node (there are browser globals, but syntax-checking via `new Function` or `node --check` doesn't parse embedded scripts). Let me extract the script and run node --check on it.

Syntax is OK. One thing that concerns me: the UMD build of three.min.js — need to check whether it's setting a global THREE (not the module version). Let me check the end/beginning: "!function(t,e){"object"==typeof exports..." — this is UMD, so if define/exports don't exist, it should attach to global. Check how `global.THREE` or `e(t...)` is being used — probably it's `e(t.THREE={})`. No problem.

Also, in older three builds (r1xx) `quaternion.identity()` does exist (added in r104). MatrixColumn is fine too. This build is minified from around 2021 (r12x or so), so quaternion.identity should exist. Let me quickly verify with grep.

grep -o "t\.THREE={}" found nothing. Let me check how globals are exported. I'll search for the "THREE=" pattern.

OK, the UMD build exports a global THREE (a `THREE={}` assignment exists somewhere, probably `e(t.THREE={})`, and the obfuscated minify made the grep weird but THREE={} matched). Good.

"identity" appears once in three.min.js — that's probably Quaternion.identity. OK.

Also, confirm that MeshStandardMaterial and everything else are present (standard). And that attach() exists on Object3D — has existed since r93. No problem.

Done. Time to wrap up.