Rubik's Cube · mimo-v2.5

Let me build a single-file index.html with a 3x3 Rubik's cube using three.min.js. Key requirements:

- 27 cubies (or 26), stickers as colored planes or colored faces with visible boundaries (black edges between stickers).
- Face turns animated with queue.
- Buttons U U' D D' L L' R R' F F' B B'.
- Drag orbit, wheel zoom bounded.
- Scramble, Reset.
- No addons — custom orbit controls.
- Camera keeps cube fully visible initially.

Implementation approach: Build cubies as BoxGeometry with materials per face. Colors on face materials based on starting position; but stickers move with cubies, so use cubie meshes with 6 materials (black plastic + colored stickers). Better: each cubie is a BoxGeometry(0.98) with materials array of 6, where outer faces get colored material, inner faces dark. But if cubie rotates, sticker stays attached to cubie — good.

However with a single box per cubie, rotating a face means rotating the group of cubies; the sticker orientation rotates with the cubie — correct.

Visible cubie boundaries: use gap between cubies (size 0.96, spacing 1.0) and dark base material visible in gaps.

Better stickers look: box of dark color (0.05) with slightly inset sticker planes? Simpler: materials array with per-face color, sticker covers whole face; gaps between cubies show background. To show "cubie boundaries", use rounded look: make box slightly smaller (0.95) so gap lines visible. Also add edge lines maybe. I'll do: core box 0.95 dark, plus sticker planes 0.86x0.86 slightly offset from face with rounded corners (use a canvas texture? no external assets but canvas-generated textures are fine — inline generation is allowed, not a network request). Could use simple PlaneGeometry with color; sticker boundaries visible due to gap between sticker and box edges showing dark. That's the classic look. 54 sticker meshes as planes with slight offset, color per face. Use RoundedBox-like via canvas texture with rounded rect alpha? Keep simple: plane stickers, dark box, spacing gap. Looks fine.

Actually nicer: use canvas-generated rounded-rect texture with transparency for stickers to get rounded corners. That's easy and looks good. But transparency sorting may cause issues; disable depthWrite on stickers? Keep alphaTest instead. Let's do canvas texture: rounded white square on transparent, material color tinted, transparent:true, alphaTest:0.5, depthWrite true. That works fine.

Animation: maintain a `cubeGroup` containing cubie meshes. For a move: determine cubies in the layer (by their logical position — track via a position vector stored on each cubie that updates after each move: apply rotation and round). Rotate a pivot group: reparent selected cubies to pivot, animate pivot rotation over ~200ms, on completion snap rotation to exact angle, reparent to cubeGroup, update logical positions, decrement queue.

Camera: custom orbit — spherical coords with damping-free simple lerp. Drag on canvas rotates; if drag started on cube? Requirement: "Dragging the background orbits the camera without turning a face." So any drag orbits. Pointer events on renderer.domElement.

Wheel zoom bounded: distance between 6 and 20.

Reset: restore solved state (cubie positions and rotations) and camera initial.

Scramble: apply random20 moves sequence from queue, animate each.

Queue: array of moves; process one at a time; buttons can push (queue) or be disabled — I'll queue up moves (cap queue length) so state stays consistent. Buttons show disabled state when queue is busy? Requirement says "queue or disable further moves until it completes" — I'll queue.

Color mapping standard: U=white, D=yellow, F=green, B=blue, R=red, L=orange. Standard orientation: +Y up white, +Z front green, +X right red.

Move notation: U = rotate layer y=+1 by -90° (clockwise looking from top, i.e., from +Y looking down, clockwise means negative rotation about +Y axis). Let's define: a clockwise turn viewed from outside along the face's outward normal = rotation by -90° about that outward normal axis. So:
- U: axis +Y, angle -90°
- D: axis -Y (or +Y with +90°) → rotation about +Y of +90°... Let's compute: D face normal is -Y. Clockwise viewed from -Y direction = rotation by -90° about -Y = +90° about +Y.
- R: normal +X, angle -90° about +X.
- L: normal -X → +90° about +X.
- F: normal +Z, -90° about +Z.
- B: normal -Z → +90° about +Z.
Inverse = negate angle.

Layer selection: cubies with logical coord along axis matching sign (+1 for U/R/F, -1 for D/L/B).

State verification: I'll implement a quick JS check in console or via browser tool: apply R then R', check all cubie transforms equal identity positions.

Sticker colors per cubie: for a cubie at (x,y,z) in {-1,0,1}^3, sticker on face where coordinate is ±1.

Let me also add lighting: ambient + directional, maybe MeshLambert/Phong. Stickers use MeshBasicMaterial? Better Phong with slight specular for depth. Use MeshLambertMaterial for stickers (flat) and box dark Lambert.

Renderer: antialias, shadows off. Add a subtle ground? Not necessary; keep background gradient via CSS and renderer alpha? Use scene.background color.

Camera framing: initial distance ~7, position from spherical (theta= -45° azimuth... typical view: position (4.5, 4, 6)). Cube diagonal extent ~ sqrt(3)*1.5 ≈ 2.6 plus sticker. Distance ~8.5 with fov 45 keeps fully visible. I'll set fov 45, distance 9, initial theta=Math.PI/4... Let me compute: camera at spherical (r=9, phi=1.0 rad from Y, theta=0.7). Cube max radius ~2.66; visible half-height at distance 9 = tan(22.5°)*9 = 3.73 > 2.66 ✓ fully visible.

UI: buttons panel, dark theme, hint text.

Let me write the code.

Pivot mechanics details:
- cubeGroup (THREE.Group) at origin, holds cubies.
- For move: create pivot = new THREE.Group(); scene.add? Add to cubeGroup? cubeGroup has identity rotation, so add pivot to cubeGroup. Attach selected cubies: pivot.attach(cubie) — Object3D.attach preserves world transform. Since pivot at origin with identity, fine.
- Animate pivot.rotation[axis] from 0 to target using easeInOutCubic.
- On finish: set exact rotation, pivot.updateMatrixWorld; then for each cubie: cubeGroup.attach(cubie); snap position to nearest grid (0.1 rounding) and snap quaternion to nearest 90° multiple. Actually attach preserves exact float; then snap positions: cubie.position.set(round(position.x), ...) since positions are at integers. Rotation: quaternion may have float error; snap by converting to matrix and rounding elements. Simple approach: round position, and for quaternion, normalize and snap each component to nearest of0, ±√2/2, ±1... Easier: take matrix, round each element to nearest 1e-4? For correctness of layer selection I use logical coords stored separately (cubie.userData.coord vector3 ints), updated by applying the rotation matrix rounded. That avoids float drift in selection. Visual snap: round position components to integers and snap quaternion via rounding matrix elements to 0/±1 then extracting quaternion.

Implement snap: 
```
const m = new THREE.Matrix4().makeRotationFromQuaternion(c.quaternion);
const e = m.elements; for(i) e[i] = Math.round(e[i]);
c.quaternion.setFromRotationMatrix(m);
c.position.set(Math.round(c.position.x), ...);
```
Good.

Scramble: generate 20 random moves avoiding same axis/layer consecutively; enqueue. During scramble, disable scramble/reset? Reset should clear queue.

Also add keyboard? Not required, skip (could add but keep minimal). Maybe nice: no.

Also status indicator showing current queue / "Solved?" check. Could add a "solved" detector: check all stickers on each face same color. Nice to have; simple check by iterating stickers' world normals and colors. I'll implement simple: for each cubie sticker mesh, compute world direction of its local normal, bucket by nearest axis, compare colors. Show badge "Solved". Cheap. Let's do it after each move completes.

Let me write the sticker generation: for each cubie (x,y,z), create box mesh0.95 dark. Faces: define face list with normal & color:
- +Y: white #f5f5f5
- -Y: yellow #ffd500
- +Z: green #009e3a (use brighter #16a34a? standard: #009b48)
- -Z: blue #0046ad... brighter: #0d5fd6? use #0051ba
- +X: red #c41e3a → brighter #e11d2e
- -X: orange #ff5800

Sticker mesh: PlaneGeometry(0.86,0.86) with rounded-rect canvas texture, positioned at face center offset 0.476 (0.95/2 + 0.001), oriented by lookAt or quaternion from normal.

Create shared texture once, materials per color (6 MeshLambertMaterial with map, transparent, alphaTest 0.5, side FrontSide).

Canvas:128x128, rounded rect radius 20, white fill.

Also sticker slight emissive? Lambert with lights fine.

Lighting: HemisphereLight(0xffffff, 0x444444, 0.9)? Lambert with hemi + directional0.8. Add DirectionalLight from (5,8,6) intensity 0.7, and another fill (-5,-3,-4) 0.25.

Renderer: setPixelRatio min(devicePixelRatio,2), resize handler.

Orbit controls custom:
- state: theta, phi, radius; target (0,0,0).
- pointerdown on canvas: dragging=true, track. pointermove: dTheta = -dx*0.005, dPhi = -dy*0.005 clamp phi [0.15, PI-0.15]. pointerup: end.
- wheel: radius += deltaY*0.002*radius? clamp [6,16]. preventDefault with passive:false.
- apply: camera.position from spherical, lookAt(0,0,0).

Smooth: store target values and lerp each frame for niceness. I'll lerp theta/phi/radius toward targetTheta etc. Reset restores camera instantly (set both target and current).

Buttons: layout U U' / D D' etc. rows. Also Scramble, Reset, status.

Let me also guard: pointerdown/up to detect click vs drag — no click action needed anyway.

Write file now. Also track move count? Not needed.

Edge case: while a pivot animation is active, queue moves; when queue empties, update status/solved check.

Reset while animating: clear animation — set pivot finish immediately. I'll implement: if animating, finish current move instantly (snap), clear queue, rebuild cube state to solved (positions, rotations, coords).

Rebuild solved: store initial transform per cubie (userData.home position; quaternion identity).

Let me write the code.

Verification via browser tool: I can run a check by exposing window.__cube API: applyMove(name) returning promise, getState() returning serialized sticker arrangement. Then use browser inspect to evaluate? The browser tool has "inspect" which returns DOM/console info. Hmm, can I run arbitrary JS? inspect action: "Inspect DOM/console". Click/type. There's a "type" action maybe types into page? Uncertain. Simplest verification: add a self-test that runs on load: perform R then R' programmatically, compare state, and log + display in the status area ("Self-test: R·R′ restored ✓"). That's a visible verification. Also scramble then check. But self-test on load would animate visibly; could run silently by directly using the move-application logic without animation (compute rotation matrices on cubie data). Better: implement pure state function applyMoveState(coord, axis, dir) and do a JS self-test comparing rotations. Actually the real verification is sticker arrangement — since stickers are attached to cubies, verifying cubie transforms (position + orientation) return to identity is the correct check.

I'll add a hidden self-test run at load that: clones state, applies R, applies R', checks all cubies back to home & identity quaternion (within epsilon). Log to console and set a data attribute. Also after user clicks Turn... I'll instead expose window.cubeAPI = {move, state, testInverse} and in console use browser inspect to read. And I can do visual screenshot verification: turn R, screenshot, turn R', screenshot, compare visually.

Let me check what the browser tool's inspect returns — probably DOM summary and console logs. I'll try.

Plan: build file, reload, screenshot initial, run test via inspect (if it evaluates JS? it says "Inspect DOM/console" — likely just reads). To run JS, I could add a query param or a hidden test panel: include a "Self-test" button that runs inverse tests for all 12 moves silently and reports result in status text. That's a neat visible verification. Do it.

Self-test implementation: snapshot cubie transforms (pos + quat), for each of the 12 move names: apply state-level move instantly (rotate pivot and snap immediately) then inverse, then compare; restore snapshot at end (restore pos/quats exactly). Since animation queue must be idle.

Implementation of applyMoveInstant(name): select layer cubies, rotate positions via matrix rounding and multiply quaternion. Simpler: use the same pivot path but set angle directly then snap, no animation, no queue. But if a real animation is running, disallow.

Let's write it.

Code structure:

```js
const MOVES = {
 U:{axis:'y',layer:1,sign:-1}, U_:{...}
}
```
Define base moves: U:{axis:'y',layer:1,dir:-1}, D:{axis:'y',layer:-1,dir:1}, R:{axis:'x',layer:1,dir:-1}, L:{axis:'x',layer:-1,dir:1}, F:{axis:'z',layer:1,dir:-1}, B:{axis:'z',layer:-1,dir:1}. Prime = dir*-1.

angle = dir * Math.PI/2.

Now write the HTML.

Status area: shows "Solved" badge and queue length, plus last move.

Also, "An animate each move and queue or disable further moves" — I queue. Maybe show queue length indicator "Busy…".

Write it.

For wheel zoom: e.deltaY positive → zoom out → radius increase.

Also touch support: pointer events handle touch; add touch-action:none on canvas.

Let me write the file now.

Self-test display: element #test.

I'll write the full file.

Solved check: iterate all stickers: for each sticker mesh, get world quaternion, transform (0,0,1) local normal, find dominant axis, bucket key = axis+sign, compare material color hex with expected color for that face. If all match → solved.

Sticker mesh's normal is +Z local (plane). So worldNormal = (0,0,1) applied by sticker.getWorldQuaternion.

Now write.

const FACES def:

```js
const FACE_DEFS = [
 {n:[0,1,0], color:0xffffff, name:'U'},
 {n:[0,-1,0], color:0xffd500, name:'D'},
 {n:[0,0,1], color:0x009e4a, name:'F'},
 {n:[0,0,-1], color:0x0d5fd6, name:'B'},
 {n:[1,0,0], color:0xe11d2e, name:'R'},
 {n:[-1,0,0], color:0xff6a00, name:'L'},
];
```

Cubie creation: skip center cubie (0,0,0)? Keep all 27 for simplicity — center invisible anyway; fine, include26 (skip 0,0,0) to save.

Box material: MeshLambertMaterial color 0x101012.

Sticker orientation: quaternion setFromUnitVectors(new Vector3(0,0,1), normal).

Plane at position normal * 0.476.

Spacing: cubie size 0.95, positions at integer coords → gaps0.05. Overall cube width 3*0.95+... total extent from -1.475 to 1.475 = 2.95.

Camera radius 9, fov 45 → half-height at9 = 3.73. Fully visible ✓. Min radius 5.5, max 16.

Lighting with Lambert and dark background #15171c gradient via CSS body background and renderer alpha true? Use renderer clear color matching. I'll do renderer = new THREE.WebGLRenderer({antialias:true}); setClearColor(0x14161b). CSS gradient behind isn't visible then. Fine.

Shadows: add a contact shadow? Skip.

Now UI CSS: panel top-left with grid of buttons, footer hint, status badge top-right.

Write file.

three.js r134-ish (2021). Fine. Write index.html.

There's a bug: in finishMoveVisual I call `pivot.rotation[m_axis()]` before... `m_axis()` uses anim.m.axis — fine. But `pivot.rotation[m_axis()] = anim.m.angle;` — fine. Slightly odd but works. Let me clean it to use anim.m.axis directly. Also `busyButtons` includes resetBtn but resetBtn should stay enabled (reset clears everything) — I skip it in the loop. Actually reset during animation: resetCube handles it. Good, reset stays enabled.

Also `_v[ax]` — Vector3 has x,y,z properties so bracket access works.

Let me clean up m_axis and test in browser.

Now run in browser and verify. Let me load index.html.

Note: my Function check ran the inline script body parse only. Good.

Now browser test.

Server may be running. Let's try the browser tool directly on file:// path or localhost.

No python. Try browser tool with file URL or localhost directly.

The cube renders nicely, fully visible. Now run the self-test via the button and verify. Also test a move R, then R', check state. Let me use browser click on Self-test.

I need to interact with the page via the browser tool. Click "Self-test" button at (148,265).

Error: `new THREE.Matrix4()['set' + 'X']` — hmm, `setX` isn't a Matrix4 method! Matrix4 has `makeRotationX`, not `setX`. Fix applyInstant to use makeRotationX/Y/Z.

Also note `finishMoveVisual` snaps via attach — but attach on a Group child preserves world transform; cubeGroup is at origin identity so fine.

Also the undo button: `document.getElementById('undoBtn')` disabled via busy check — but it's also in busyButtons? No, busyButtons = scrambleBtn, resetBtn. Fine.

Reload and re-test.

Wait — `finishMoveVisual` calls `cubeGroup.attach(c)` after the rotation, but for the instant path in `applyInstant`, the cubie quaternions get snapped. Also, `pivot.attach(c)` requires updateMatrixWorld of the cubeGroup — Object3D.attach calls updateWorldMatrix. Should be fine.

One concern in finishMoveVisual: after `cubeGroup.attach(c)`, cubie.position is in cubeGroup space. Good.

Also, in `applyInstant` after rounding the quaternion via rotation matrix: `rot` matrix is a rotation matrix (rounded elements already exact for ±90°). Good.

Now test: R then R' via buttons and check state.

Now let me run the self-test via clicking the Self-test button, then test R and R' via UI buttons and screenshots.

Self-test passes. Now test R button then R' button via UI, and take screenshots. Click R (188, 86) then R' (238, 86).

Buttons disabled while queued — good. Wait for animation to finish, then screenshot mid/post. Let me wait ~1s then screenshot.

Buttons disabled during the turn (queue) — good. Screenshot now shows the R move completed state.

Status still says "0 moves · queued 1" and the cube looks unchanged even after 1.2s. The animation should complete in ~190ms. Something is stuck: the queue shows "queued 1" but the move never starts — meaning `tick()` was never called after enqueue. Indeed, `enqueue` only pushes and calls updateUI; `tick()` is called at end of `finishMoveVisual` and... nothing calls tick initially. I need to call `tick()` in the animate loop or in enqueue. Let me add tick() to the update() function in the render loop.

Also `tick()` inside `finishMoveVisual` is now redundant but harmless. Reload and re-test R.

Now click R, wait ~0.5s, screenshot mid-animation isn't easy; but let's click R and take a screenshot quickly to see the animation in progress, then wait and see final state.

The R turn completed: green stickers moved onto the top-right, yellow stickers came around to the front-right column — correct for an R turn (clockwise from right: front face's right column goes down... let me verify: R clockwise viewed from +X: the front-top-right corner goes to front-bottom-right? Rotating -90° about +X takes +Z to +Y? Rotation about X by angle θ: y' = y cosθ - z sinθ, z' = y sinθ + z cosθ.θ=-90°: y' = z, z' = -y. So a sticker at front (z=1) with the F green color goes to y'=1, i.e. top face. In the screenshot, green stickers are on the top face right column — correct. And bottom stickers (yellow, y=-1) go to z' = -y = 1 → front. Screenshot shows yellow on front right column — correct!Badge shows MIXED, 1 move. Now click R' and verify it returns to solved.

The DOM status says "SOLVED, 2 moves" after R′ completed (the screenshot was captured mid-animation). Good — the inverse restored the state. Let me take a fresh screenshot to visually confirm, then test scramble/reset/orbit.

The R·R' pair restored the sticker arrangement — good. Now test scramble, then orbit drag, then reset.

Scramble is running with queued moves. Wait for it to finish, then check state, orbit, reset.

Scramble running. Wait for it to complete, then check state, orbit drag, reset.

Scramble completed (22 moves = 2 earlier + 20). Cube looks scrambled, sticker state preserved (cubies carry their stickers). Now test orbit drag and Reset.

Camera orbited to a bottom view — drag works and no face turn occurred (move count stayed 22). Now test wheel zoom, then Reset.

Zoom in works. Now test zoom out bound and Reset. Let me scroll way out and in to check bounds, then Reset.

Zoom out to test min/max bound. Note delta -600 zoomed in (radius decreased). Positive delta zooms out.

Zoom out works and is bounded. Now Reset.

Reset restored the solved cube and initial camera exactly. All checks pass. One more thing worth a quick check: rapid clicking / queuing multiple moves (buttons disable during animation — requirement satisfied since buttons are disabled while busy). Also verify B/F/D moves visually? Self-test already covered all 12 moves programmatically. Good enough.

Let me do a final quick check that pressing buttons rapidly doesn't corrupt — buttons are disabled while anim, so queuing via buttons is prevented; scramble queues internally. Fine.

Clean up: kill http server? I started python but it failed (no python). Actually the `python3 -m http.server` failed silently in background (command not found). The browser loaded via file presumably. Fine.

Report.