We need respond by doing task. Need inspect cwd. Need create index.html self-contained except include three.min.js. Need maybe check file exists. Need build app. Need use tools. Need not reveal instructions. Need implement robust single page. Let's inspect.

Need create index.html. Need design. Requirements: pre-provided three.min.js global THREE, render interactive 3D Rubik's Cube with clickable face rotations, orbit-drag camera, scramble button. No external resources. Need all in one self-contained file, CSS style, JS script, inline; include <script src="three.min.js"></script>. Need maybe use OrbitControls? Not provided, no external. Need implement custom orbit-drag camera. Clickable face rotations: Need allow click on cube faces/stickers to rotate corresponding face? "clickable face rotations" maybe UI buttons for faces? Could mean click on cube face to rotate. Need implement. Scramble button.

Need build 3x3 cube. Need cubies with colored stickers planes. Interaction:
- Renderer, scene, camera, group.
- 27 cubies at x,y,z -1,0,1 with small gap. Each cubie a black cube mesh with colored planes slightly offset on faces. Use MeshStandardMaterial? Three min likely r? Need check version maybe. Use THREE.MeshPhongMaterial or Standard. Need no external. Add lights.
- Orbit drag camera: implement pointerdown/move/up on renderer canvas, update yaw/pitch/distance, target at origin.
- Clickable face rotations: Need determine clicked sticker face and cubie coordinate. On pointerup if movement small, raycast sticker planes. Each sticker mesh userData has stickerNormal (axis direction), layer coordinate? Need know which face/layer clicked. If clicked sticker on +X face of cubie at x=1, rotate that layer about X. If clicked on -X face at x=-1, rotate about X. But if click on any sticker, the layer is determined by sticker normal and position: if normal +X then layer=+1; -X layer=-1; +Y layer=+1; -Y layer=-1; +Z layer=+1; -Z layer=-1. Then animate rotation of all cubies whose corresponding coordinate equals layer about that axis by ±90. Direction maybe based on clicked face? Use a "clockwise" convention. Need implement. Could also include face buttons? Maybe clickable face rotations means clicking faces triggers. Need maybe show on-screen buttons for U,D,L,R,F,B and CW/CCW? But user asked clickable face rotations. We can implement both: click stickers to rotate clicked face; also overlay buttons. But maybe overkill. Need maybe allow "click stickers to rotate the face they're on; Shift-click reverses direction"? Nice.

Need implement rotate layer animation. Need maintain positions/rotations. Options:
- Group cubies. To animate a layer, create a pivot object at origin, attach cubies in layer to pivot, animate pivot.rotation, then detach preserving world transforms. Need three.js object attach/detach available? Object3D.attach exists. Need use local transforms. Good.
- For each cubie in layer, pivot.attach(cubie), then update pivot.rotation.set(axis, angle) over duration. On complete, for each cubie, scene.attach(cubie) (or group.attach). Need update cubie.userData.coord based on transform? Since cube positions after 90 deg should be integer. But due floating errors, round. We can round positions to nearest integer. Rotations may accumulate. For cubie rotations, after scene.attach, object.rotation remains world rotation relative to scene (if scene no rotation). Need maybe round Euler angles to multiples of PI/2. But object.rotation can be arbitrary; after 90 rotations, exact enough. We can round Euler components to nearest PI/2. Need handle Euler order? Three Object3D rotation order 'XYZ'. If set components rounded, okay. Need maybe update quaternion? Simpler: after each animation, for cubie:
  cubie.position.x = Math.round(cubie.position.x); etc.
  cubie.rotation.x = roundPi2(cubie.rotation.x) etc.
But Euler components may have wrapping; if using Euler, repeated rotations may accumulate beyond 2π but round to nearest π/2. Good.

Need face click direction. We need decide angle. If clicked face normal and maybe click point relative to face center? A Rubik face rotation direction can be clockwise as viewed from outside. Need compute clockwise/CCW. We can use clicked sticker normal n and click point p on face. We can rotate around n by angle +90 if click is on "right half" relative to some face up vector? But intuitive? Maybe all clicks on a face rotate clockwise when viewed from outside. Need define angle sign. Need compute based on vector from face center to hit point. For a face with outward normal n, choose two in-plane axes u and v forming right-handed basis (u × v = n). Clockwise as viewed from outside corresponds to negative angle around n in right-handed coordinates? Need check. In standard right-handed, rotation positive around axis n is counterclockwise when looking along axis toward origin? Actually right-hand rule: positive angle rotates counterclockwise when looking along axis direction toward origin? Let's define. If normal n points toward viewer (out of screen), positive rotation is counterclockwise? Coordinate x right, y up, z out. Looking along +z toward viewer, x right, y up. Positive rotation around +z maps x to y, that is counterclockwise. So clockwise is negative angle. But if viewer looking along n from outside to cube? Actually normal points toward viewer, yes. So clockwise = negative around n. But if layer normal n, angle = -π/2 for clockwise. Need maybe use Shift to reverse. Could also use button.

Need map clicked normal to axis and layer:
- normal approx x,y,z.
- if |x| largest -> axis 'x', layer = sign(x)
- y -> 'y', z -> 'z'.
- angle = -Math.PI/2 * directionMultiplier (directionMultiplier = 1 for clockwise, -1 for ccw). If shift toggles.

Need implement sticker mesh userData: normal vector in world? Since sticker plane is child of cubie, normal local axis. We can set userData.normal = new THREE.Vector3(x,y,z). In raycast, intersect.object.userData.normal. But if object is sticker plane, local normal axis. Since cubie rotation changes, world normal = object.localToWorld(normal).clone().normalize() maybe. But userData.normal local.

Need raycast. Use raycaster.setFromCamera(mouse,camera). Intersect sticker meshes. Need if animation locked no. Need ignore UI overlay maybe pointer-events none except buttons. Renderer canvas pointer events.

Need click vs drag. Track pointer start pos, current, isDown, isDragging. On pointerdown on canvas, record, capture pointer. On move, if down and movement > threshold, orbit. But if orbiting, don't rotate on pointerup. Need canvas cursor. Need update camera position based on spherical coordinates.

Need implement responsive.

Need scramble button: animate random rotations. Could use sequence 20-30 moves. Need disable during animation. Need maybe progress text. Could animate each move sequentially. Need "Scramble" button. Could also "Reset" maybe.

Need "clickable face rotations" maybe clickable UI face buttons. Add a control panel with buttons U,D,L,R,F,B and direction toggles? But if only click stickers, discoverability maybe poor. Add instructions and buttons. Buttons can be clickable face rotations: U, D, L, R, F, B. Need implement all. But "clickable face rotations" maybe means face buttons. We can include both. Need ensure no external.

Need maybe UI:
- Header: Rubik's Cube
- Buttons: Scramble, Reset
- Face buttons: U, D, L, R, F, B with "clockwise" and maybe "counter" toggle? Simpler: each button rotates clockwise as viewed from outside. Add "Reverse last?"; not necessary. Add small hint "Click any sticker to rotate its face clockwise; Shift-click reverses."
- Status "Ready".
- Maybe "Drag to orbit".

Need build in one file.

Need robust with Three version. three.min.js 603KB maybe r?? Need check. Use THREE.WebGLRenderer. Need not use OrbitControls.

Potential issue with MeshStandardMaterial and lights. Use MeshPhongMaterial for colors and MeshLambert maybe. Need black cube body. Use 27 cube meshes, add stickers as PlaneGeometry with slight offset. We need avoid z-fighting. Use cube size 0.92 with gap 0.04, sticker size 0.82. Place sticker plane at axis coordinate. The cube mesh geometry centered at cubie position. For each cubie:
- cube = new THREE.Mesh(new THREE.BoxGeometry(0.92,0.92,0.92), blackMat)
- position set (x,y,z)
- cubie.add(cube)
- for each face normal:
  sticker = new THREE.Mesh(new THREE.PlaneGeometry(0.78,0.78), colorMat)
  sticker.position.set(n.x*0.461, n.y*0.461, n.z*0.461) (half cube size + small)
  sticker.rotation? PlaneGeometry lies in XY plane with normal +Z. Need orient normal to n. Use quaternion.setFromUnitVectors(new THREE.Vector3(0,0,1), n). Then sticker.quaternion.copy(orient). If sticker is child of cubie, local.
  sticker.userData.localNormal = n.clone(); sticker.userData.face = faceName...
  cubie.add(sticker)
Need color material: maybe each face material clone? If using same material for all stickers with same color, okay. But if highlight? We can create per sticker material? To use material color? We can set emissive? Maybe not. Use MeshPhongMaterial({ color, shininess: 20 }).
Need add outlines? Could use edges? Maybe cube body black with small gaps.

Need sticker normals. For raycasting, plane material side? DoubleSide maybe to raycast from outside. Use THREE.DoubleSide.

Need face labels? Could not.

Need rotate layer:
function getLayerCubies(axis, layer) { cubies.filter(c => Math.round(c.position[axis]) === layer); }
function rotateLayer(axis, layer, angle, duration=320) {
 if animating return Promise.resolve(false);
 animating = true;
 const pivot = new THREE.Object3D();
 cubeGroup.add(pivot); // or scene?
 const targets = getLayerCubies(axis, layer);
 targets.forEach(c => pivot.attach(c));
 pivot.rotation.set(0,0,0);
 const start = performance.now();
 return new Promise(resolve => {
   function tick(now) {
     const t = Math.min(1,(now-start)/duration);
     const eased = 1 - Math.pow(1-t,3);
     pivot.rotation[axis] = angle * eased;
     renderer.render(scene,camera);
     if(t<1) requestAnimationFrame(tick); else {
       pivot.rotation[axis] = angle;
       pivot.updateMatrixWorld(true);
       targets.forEach(c => {
         cubeGroup.attach(c); // if cubeGroup is group.
         // round position
         c.position.x = Math.round(c.position.x);
         c.position.y = Math.round(c.position.y);
         c.position.z = Math.round(c.position.z);
         c.rotation.x = roundPi2(c.rotation.x);
...
         c.updateMatrixWorld(true);
       });
       cubeGroup.remove(pivot);
       animating=false;
       resolve(true);
     }
   }
   requestAnimationFrame(tick);
 });
}
Need if cubeGroup attached? pivot.add? cubeGroup.attach(c) transfers from pivot to cubeGroup. Since cubeGroup at origin no transform. Good.

Potential issue if pivot.rotation[axis] set and cubies attached to pivot; after detach, cubie's world rotation includes pivot. Object3D.attach uses world transforms. Good.

Need roundPi2:
function roundPi2(v) {
 const normalized = ((v + Math.PI) % (2*Math.PI) + 2*Math.PI) % (2*Math.PI) - Math.PI; // maybe not needed
 return Math.round(v / (Math.PI/2)) * (Math.PI/2);
}
Could round unwrapped to multiples; if v grows, okay.

Need status.

Need click:
function handleCanvasPointerUp(event) {
 if (dragDistance > 6 || !dragStarted) return;
 const hit = getIntersect(event);
 if (hit) {
   const localNormal = hit.object.userData.localNormal.clone();
   const worldNormal = hit.object.localToWorld(localNormal).normalize();
   // choose axis from largest component
   let axis, layer, faceName;
   const abs = {x: Math.abs(worldNormal.x),...}
   if abs.x largest -> axis='x'; layer=Math.sign(worldNormal.x); faceName=layer>0?'R':'L';
   ...
   let direction = event.shiftKey ? -1 : 1; // 1 clockwise as viewed from outside, -1 reverse.
   rotateLayer(axis, layer, -Math.PI/2 * direction, 320);
 }
}
Need maybe if clicked sticker belongs to interior? All stickers only outer faces, positions coordinate layer. Good.

Need face buttons:
const faceDefs = [
 {id:'U', axis:'y', layer:1, angle:-Math.PI/2}, // as viewed from top +Y, clockwise? Need sign? Need coordinate: x right? y up. Looking from +Y down to origin, axes? Need choose convention. For a face normal +Y, "clockwise as viewed from outside" corresponds to rotation angle? Need compute sign. Use formula: angle = -π/2 * direction (direction=1 clockwise). But is that always? If viewer outside looking along -n? Wait normal n points outward from cube, viewer outside on +Y looking down along -Y. But camera view from outside sees normal n pointing toward viewer? Actually if viewer is outside on +Y, the outward normal points toward viewer (up), yes. Looking at the face, n points out of face toward viewer. In screen coordinates, positive rotation around n (right-hand) is counterclockwise if n points toward viewer. So clockwise = negative around n. Thus angle = -π/2 for all faces. For reverse = +π/2. Good.
]
For buttons, rotateLayer(def.axis, def.layer, -Math.PI/2, 320)
Need maybe display "CW" maybe. Add "Reverse" checkbox? Hmm.

Need scramble:
const axes=['x','y','z']; layers=[-1,1]; dirs=[-1,1]; for i 0..24 choose random axis, layer, dir; angle=-Math.PI/2*dir; await rotateLayer(axis, layer, angle, 110); status.
Need not use too fast? 25*160 maybe. Scramble button disabled. Use scrambleBtn.disabled.

Need maybe "Reset" to reset scene. Could create new cubeGroup or remove and recreate. Simpler: resetCube() remove cubeGroup, createCube(), set status. But sticker meshes references? Need maintain stickerMeshes global. Recreate.

Need initial camera. Use perspective 45, aspect, near .1, far 100. Position maybe (4,3.2,5) or spherical radius 6.5, theta=45deg, phi=55deg. Need target 0. Orbit:
let cameraRadius=6.2, cameraTheta=0.78? Need define:
function updateCamera() {
 const phi = THREE.MathUtils.degToRad(cameraPolar); // polar from +Y? Use x = r * sin(phi) * sin(theta), y = r*cos(phi), z = r*sin(phi)*cos(theta).
 camera.position.set(r * Math.sin(polar)*Math.sin(yaw), r*Math.cos(polar), r*Math.sin(polar)*Math.cos(yaw));
 camera.lookAt(0,0,0);
}
Initialize yaw=0.7, polar=0.95 (54 deg). Drag horizontal changes yaw -= dx*0.005; vertical changes polar -= dy*0.005? Need clamp 0.15 to π-0.15. Use pointer events.

Need maybe wheel zoom? Nice. Add wheel event preventDefault, radius *= exp(deltaY*0.001), clamp.

Need background. CSS.

Need maybe no external fonts.

Need maybe ensure canvas fills.

Need maybe "clickable face rotations" robust:
- Need if click on sticker, rotate face. But if the cube is scrambled, sticker positions rotate. The face clicked is currently outer face; the sticker's world normal tells current face. Good.
- For face buttons, U/D/L/R/F/B refer to current spatial faces, not color faces. Good.

Need maybe highlight clicked face? Could implement pulse. Not necessary. But maybe "clickable face rotations" more visible if hover? Could add hover highlight by changing material emissive. But if using MeshPhongMaterial. Could implement pointermove raycast hover, set emissive for sticker? But many materials maybe. Not needed. Could add cursor pointer.

Need maybe "interactive 3D Rubik's Cube" maybe need actual cube state not solved? Need visual. Good.

Need maybe use raycaster with sticker meshes only. Need update mouse coords:
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 hits=raycaster.intersectObjects(stickerMeshes, false);
return hits[0];
Need if object is not sticker? Only stickerMeshes.

Need maybe if user clicks on sticker but object material DoubleSide? yes.

Need maybe "face rotations" by UI buttons:
Add HTML:
<div id="controls">
  <button id="scrambleBtn">Scramble</button>
  <button id="resetBtn">Reset</button>
  <label><input type="checkbox" id="reverseToggle"> Reverse</label>
  <div class="face-buttons">
    <button data-face="U">U</button> ...
  </div>
</div>
But if reverseToggle, face buttons and sticker clicks reverse. Need maybe "Reverse next turn". Good.
Need maybe "Shift-click reverses" still. For buttons, reverse checkbox.

Need maybe "clickable face rotations" means face buttons. Include both.

Need maybe prevent context menu? canvas.addEventListener('contextmenu', e=>e.preventDefault()).

Need maybe use pointer events. Need CSS user-select none.

Need maybe if page loads after script three.min.js, our script. Include script src then inline.

Need maybe no external resources. Good.

Need create index.html. Need maybe ensure file present. Let's write. Need maybe include comments? Fine.

Need be careful with three.min.js global THREE. Need if THREE undefined show message? Not necessary.

Need maybe use renderer.outputColorSpace = THREE.SRGBColorSpace if exists. But older version may not. Use if ('outputColorSpace' in renderer && THREE.SRGBColorSpace) renderer.outputColorSpace = THREE.SRGBColorSpace; else renderer.outputEncoding = THREE.sRGBEncoding if exists. Need not.

Need maybe use renderer.setPixelRatio(Math.min(window.devicePixelRatio,2)).
Need maybe scene.background = new THREE.Color(0x111827). Use fog? Fine.

Need maybe add "floor grid"? No external. Could add axes? Maybe not.

Need maybe add "ambient/directional lights".

Need maybe sticker material not too bright. Use colors:
R 0xe74c3c, L 0xf39c12? Actually standard: U white, D yellow, F green, B blue, R red, L orange.
Face normal +X red, -X orange, +Y white, -Y yellow, +Z green, -Z blue. Good.

Need maybe "cube body material" black.

Need maybe add bevel? BoxGeometry no bevel. Fine.

Need maybe "sticker" planes on black cube. Because black cube body is continuous, gaps show black. Good.

Need maybe "Rubik's Cube" title.

Need maybe "Click sticker" instructions.

Need maybe "face buttons" names:
U = Up (+Y), D = Down (-Y), R = Right (+X), L = Left (-X), F = Front (+Z), B = Back (-Z).
Need maybe "CW as viewed from that face" and reverse toggle.

Potential issue with object.attach and cubeGroup.remove(pivot) after attach. If pivot added to cubeGroup, after cubeGroup.attach(c) from pivot, pivot still has no children. cubeGroup.remove(pivot) okay.
Need if multiple rotateLayer calls sequential. animating true. For reset during animation, maybe disable buttons. Need if reset clicked during animation? Could ignore? We can set isBusy? Need maybe scramble disables. If reset while animation? Simpler reset button calls resetCube; if animating, ignore or set animating=false? Could be okay. We can disable reset during animation? Maybe not. But if reset while rotateLayer in progress, can cause issues. Better maintain busy = animating || scrambling; disable face buttons and reset? But reset maybe allowed. Simpler set busy variable. But rotateLayer uses animating. In rotateLayer if busy? Hmm.

Need maybe "scramble button" should disable all controls while scramble. Use isBusy = true/false. But rotateLayer should check busy? If animate called while busy return false. But reset needs to cancel? Hard. Simpler no reset during animation? Buttons disabled when isBusy.

Need implement:
let busy = false;
async function runTurn(axis, layer, angle, duration=320) {
 if (busy) return false;
 busy = true;
 setStatus...
 await rotateLayer(...);
 busy = false;
 updateButtons();
 return true;
}
rotateLayer itself sets animating maybe not needed. But if direct. Need maybe if called while busy, return false.
But if reset while busy? reset button disabled? In updateButtons. But if user presses reset during scramble, disabled. Good.
Need maybe if resetCube called programmatically, remove cubeGroup. Need recreate and set busy false.

Need maybe "status" text. updateButtons sets disabled = busy.
Need maybe after rotateLayer completes, busy false.

Need maybe click event asynchronous. In pointerup, if !busy runTurn(...). Need if busy ignore.

Need maybe face buttons with data-face and reverseToggle. For reverse, angle = -π/2 * (reverse ? -1 : 1). For sticker click, angle = -π/2 * (reverse ? -1 : 1). If event.shiftKey toggles reverse? Maybe:
const reversed = reverseToggle.checked || event.shiftKey;
const angle = -Math.PI/2 * (reversed ? -1 : 1);
Need set status.

Need maybe "scramble" uses random directions and not reverse toggle.

Need maybe "clicked face rotations" maybe "click on sticker to rotate its face clockwise; hold Shift or check Reverse for counter-clockwise." Good.

Need maybe "orbit-drag camera": Need implement pointerdown only if primary button. On pointermove, if pointerDown:
const dx = e.clientX - lastX; dy = e.clientY - lastY; totalDrag = Math.hypot(...);
if (totalDrag > 2) {
 cameraYaw -= dx * 0.005;
 cameraPolar -= dy * 0.005; // dragging up (dy negative) -> polar increases? Actually cameraPolar from y axis; if drag up, want camera move up? Let's think. If dy negative (move up), polar -= negative = increases, camera y = r cos(polar) decreases (lower). That seems wrong; dragging up should orbit camera up? Usually dragging up rotates view down? Actually with orbit controls, dragging up moves camera down? Hmm. It's okay. Could use cameraPolar += dy*0.005. If drag up (dy negative), polar decreases, camera y increases (up). Good. Use cameraPolar += dy*0.005.
}
Need maybe if pointer leaves. Use setPointerCapture.

Need maybe if orbiting, canvas cursor grabbing. On pointerup restore.

Need maybe if pointerdown on canvas, event.preventDefault. Need renderer.domElement.style.touchAction='none'.

Need maybe wheel event on canvas.

Need maybe resize:
window.addEventListener('resize', onResize).
Need maybe animate loop. If no busy, render continuously? Could do requestAnimationFrame(renderLoop) and render each frame. Simpler:
function animate() { requestAnimationFrame(animate); renderer.render(scene,camera); }
During rotateLayer, render loop handles. But rotateLayer also render maybe redundant. Use animate only. In rotateLayer, update pivot and render loop handles. But if render loop running. Fine. Could not call renderer.render in tick. Need requestAnimationFrame(tick) for updates. animate renders. Good.
Need if no continuous? Use animate.

Need maybe object materials. Need if resetting, dispose? Could dispose geometries/materials? Not necessary but okay. Could skip.

Need maybe "solved" after scramble? Reset. Good.

Need maybe "scramble" progress:
scrambleBtn.textContent = `Scrambling ${i+1}/${moves}`;
await runTurn(..., 120, false) maybe no status? Need runTurn sets status. Could add optional silent. Simpler:
async function scramble() {
 if (busy) return;
 const moves = 25;
 for (let i=0; i<moves; i++) { ...; busy=true; await rotateLayer(..., 120); setStatus(`Scrambling ${i+1}/${moves}`); }
 busy=false; updateButtons(); setStatus('Scrambled — click a sticker or use face buttons.');
}
But rotateLayer doesn't set busy. Need:
async function performTurn(axis, layer, angle, duration=320, message) { if (busy) return; busy=true; updateButtons(); setStatus(message || ...); await rotateLayer(...); busy=false; updateButtons(); setStatus(message || 'Turn complete.'); }
But rotateLayer doesn't know busy.
Need if performTurn used by scramble, it will update status each turn. But after rotateLayer, set busy false; then loop continues next iteration. Good.
Need maybe if performTurn returns false if busy.
Need maybe updateButtons disables buttons. But if scramble button clicked, it sets busy true before loop. Need updateButtons.

Pseudo:
function setBusy(value, text) { busy=value; scrambleBtn.disabled=value; ...; if(text) status.textContent=text; }
async function performTurn(axis, layer, angle, duration=320, message='') {
 if (busy) return false;
 busy = true;
 updateButtons();
 status.textContent = message || `Rotating ${axisName(axis)} ${layer>0?'clockwise':'clockwise'}...`;
 await rotateLayer(axis, layer, angle, duration);
 busy = false;
 updateButtons();
 status.textContent = message ? message : 'Turn complete.';
 return true;
}
But if message is "Scrambling..." and after each turn, busy false then next iteration; status set each. At end, status "Scrambled".
Need maybe rotateLayer resolves even if no cubies? But layer always.

Need maybe "round rotations": After pivot.attach/detach, if cubie.rotation components rounded. But if object.rotation order 'XYZ', rounding components after arbitrary rotation can change orientation? Since actual orientation is exactly multiple of 90 but Euler components may be e.g. [π/2,π/2,π/2]. Rounding is okay. But due gimbal, components can be values. Good.
Need maybe cubie.position after attach can be -0.000000. Round.

Need maybe "face buttons" if busy disabled. Need updateButtons.
Need maybe "reverseToggle" disabled? If busy disabled.

Need maybe "click sticker" not if busy. Good.

Need maybe "hover" to show cursor. Could implement pointermove raycast if not dragging. But pointermove also used orbit. We can if !pointerDown and !busy:
const hit = pickSticker(e); canvas.style.cursor = hit ? 'pointer' : 'grab';
But pointermove when pointer down no.
Need maybe if pointerdown, cursor grabbing.

Need maybe if raycast hit during pointermove, object local normal. Good.

Potential issue: If pointerdown and click, pointermove may not fire, but pointerup picks. Good.

Need maybe if user drags starting on canvas, pointerup if no drag triggers click. If drag small threshold. Good.

Need maybe "clickable face rotations" if user clicks sticker after cube rotated, sticker mesh is small, but planes are slightly separated with black gaps. Good.

Need maybe "orbit-drag camera" if canvas pointerdown and click on sticker, pointerup triggers rotate. Good.

Need maybe "face buttons" are disabled during busy.

Need maybe "Scramble" button. Good.

Need maybe "Reset" button. Good.

Need maybe "no external resources" satisfied.

Need maybe "single-page web app" index.html. Good.

Let's write.

Need verify maybe file present, maybe run simple syntax? Could use node? Browser not available. Need maybe inspect for issues. Potential issue cubeGroup.clear() method exists in recent three? Object3D.clear introduced r125 maybe likely. If older? three.min.js maybe 603KB maybe r? Could be r? Need check. If older, clear may not exist. Need robust. Better avoid Object3D.clear? Use while remove. But likely okay. But to be safe, use manual. Need maybe "stickerGeometry" reused; "cubieGeometry" reused. Fine.

Potential issue after resetCube, cubeGroup.rotation maybe should be zero but already. If cubeGroup has no rotation. Good.
Potential issue cubeGroup.clear() also removes children but not dispose. Fine.
Potential issue cubeGroup.attach(cubie) after pivot.attach(cubie) in rotateLayer. Since cubeGroup is parent of pivot; Object3D.attach attaches object to this while preserving world transform. Good.
Potential issue cubeGroup.remove(pivot) after pivot has no children. Good.

Potential issue during pointerup after pointercapture release, event.pointerId. Good.
Potential issue canvas.releasePointerCapture may throw if not captured? It is captured. Fine.
Potential issue pointerup if pointerDown false? Fine.

Potential issue raycaster picks sticker behind due double-sided. It may pick backside of far sticker through cube? Since black cube body occludes but raycaster doesn't consider body because only sticker meshes. It can pick stickers on far side if ray passes through cube? This is a problem: Raycaster intersectObjects(stickerMeshes) ignores body, so clicking front face could also hit backside sticker behind? Raycaster returns nearest intersection among sticker planes. Backside sticker is farther than front sticker, so front wins. But if clicking black gap, ray might hit back sticker through gap? Since front sticker planes cover most but gaps between cubies could allow ray to pass through and hit back sticker. Then clicking gap may rotate back face unexpectedly. But acceptable? Could include body mesh in raycast to block? Better include body meshes to occlude. Need add body meshes to occluder array and raycast against both, only return hit if object is sticker and no closer body? Since body is black cube, if click on body/gap, should not rotate. We can include bodyMeshes and sort. Raycaster.intersectObjects([...stickerMeshes, ...bodyMeshes], false). Then if hits[0] is sticker return; else none. But if front sticker hit and body behind, sticker closer. Good. If click black body, body closer. If click gap, body surfaces around gap maybe closer than back sticker; no rotation. Need implement. Need bodyMeshes array. In createCube, push body to bodyMeshes. raycaster intersects both. Need clear arrays. Let's edit. Need maybe bodyMeshes global.
Potential issue if body material side default FrontSide, raycaster hits front faces. Good.
Need edit.

Need maybe check file.

Need maybe consider if three.min.js version old doesn't have Object3D.clear. Need robust. Could replace cubeGroup.clear with manual remove. Also Object3D.attach maybe old? Attach introduced r71? likely. three.min.js 603KB maybe modern. But if old, okay. To be safe, maybe implement removeChildren function and use. Need edit. Also cubeGroup.rotation? Fine.
Potential issue "cubeGroup.clear()" if unsupported would crash. Let's replace with function removeChildren(group) and call. Need edit.

Need maybe "Object3D.attach" maybe if old not. Could implement own attach? But likely. To be robust, maybe use pivot.add(cubie) with world transform? Let's think. Could avoid attach by manually converting world matrices to pivot local. But attach is common. If old three lacks attach, crash. Need check version. Use node? three.min.js is browser global not module. Could maybe grep for "attach:function".

Good.

Need maybe syntax check? Could use node with vm? Need not because browser script references window, but can parse. Use node --check? It's script with window. Node --check parses. Need run.

Need maybe extract script and node --check. Use perl maybe.

No python. Use node extract.

Need final concise. Mention index.html present.