Build a Rubik's cube using Three.js in a single index.html. 27 cubies, raycasting for click operations — clicking a face rotates that layer? "Clickable face rotation" — clicking a face rotates that layer. Let me design it: click on a cubie's face → identify axis/layer based on click position and normal, rotate that face 90°. Simpler: click to rotate the face that contains that sticker... ambiguity: clicking the top face of a cubie could mean either U or... Common approach: clicking the front-facing side rotates that face clockwise. To disambiguate, use the face normal and position to determine which of the 6 face rotations it is: layer = based on the cubie's position along the normal axis being at the outer edge, rotation axis = normal. Only clicks on the outermost stickers trigger a face rotation. This is clean: click a sticker on the U layer (y=1 with normal +y) → U rotation. Direction: clockwise by default; Shift+click for counterclockwise, maybe.

Animation: rotate the group of 9 cubies 90° over time, then snap and update logical positions.

Camera: homebrew orbit drag (mouse drag rotates spherical coords), wheel to zoom.

Scramble button: queue of about 20 random moves, fast animation.

Implementation details:
- Cubies: 27 meshes (rounded box or BoxGeometry with a black material + sticker planes). Simpler: BoxGeometry with multi-material, only outer faces colored. Use per-cubie materials: for each of the 6 faces, if outer, sticker color, otherwise black.
- Logical state: track cubie's position with mesh.position, rounded values.
- Rotation: pick axis and layer index (-1,0,1), create a THREE.Group, attach cubies to the group (preserve world transform), animate the group's rotation, then bake: update world matrix, detach cubies back to scene, round positions, snap quaternion.

Attach/detach: use scene.attach / group.attach. THREE r? The version of three.min.js is unknown; attach exists since r84+. To be safe I could implement a manual attach helper. Let me check the version.

Click detection: raycaster on pointerdown (not on drag). Distinguish click from drag: record position on pointerdown, and if pointerup is within a small movement threshold → click.

Direction of rotation: clockwise when looking at the face from outside. Sign of rotation angle: for a +y face, clockwise viewed from +y is a negative angle around the +y axis (rotation -90°). For normal n, clockwise = -90° around axis n. Shift+click → +90.

Animation queue: moves are processed sequentially. Disable clicks during animation? Allow queuing.

Also add a reset button (probably). Keep the code robust.

Let me write it. Snap after rotation: for each cubie in the group, after animating the group's rotation to target, scene.attach(cubie), round position, snap quaternion components to nearest 90°? Rounding quaternion: build rotation from rounded euler? Simpler: keep cubie.userData.quaternion exact: track logical orientation by accumulating. Actually, snapping the quaternion: round each component? Risky. Better: after detach, compute rounded euler angles → but euler composition order is an issue. Common trick: since all rotations are multiples of 90°, round the elements of the rotation matrix to nearest integers and set quaternion from that matrix. This works.

Animation loop with a requestAnimationFrame queue of moves.

Camera orbit: spherical coords, drag rotates, wheel zoom clamps radius.

Add hover highlight? Optional, skip or keep simple.

Scramble: 25 random moves, fast animation (100ms each).

Let me write the code.

Check availability of attach in three.min.js — quick grep. Let me peek at the file headers.

Modern Three.js (the 2021 ones, probably around r128 or so). Attach/detach are available. Let's write index.html.

Let me do a quick sanity check for syntax errors. Can I run node against the inline script? Node doesn't have THREE DOM. At the very least I can validate the JS syntax with node --check against the extracted script. Let's give that a try.

No python3. Use node to extract it. Also, the three.js UMD probably needs `this`/globalThis — the stub sets global.self, but UMD uses `typeof globalThis !== "undefined" ? globalThis : this` → globalThis exists, so THREE gets attached to globalThis. But in the -e eval, `global.THREE` is undefined? In CJS, `require` of a UMD with an exports check: "object"==typeof exports && "undefined"!=typeof module → writes into exports, not globalThis! In other words, it exports as a module. Use the return value of require.

Everything looks fine. r128 supports attach/detach, Raycaster, and MeshLambertMaterial. One thing to confirm: `snapCubie` rounds the matrix elements, then does setFromRotationMatrix — the matrix has position baked in as well, but setFromRotationMatrix ignores translation. OK.

Another check: inside snapCubie, we call c.updateMatrix() — the matrix is composed from position/quaternion/scale, and rounding the translation to STEP units is fine.

Also `hits = raycaster.intersectObjects(cubies, false)` — cubies are children of cubeRoot. Does the raycaster handle the world matrix via object.matrixWorld? intersectObject uses the object's matrixWorld, which gets updated during rendering. No problem.

Done. Time to wrap up.