We need create single index.html using three.min.js present in current directory. Need interactive Rubik's cube with clickable face rotations, orbit-drag camera, scramble button. Need implement Rubik's 3D. We can use plain Three.js. Need clickable faces: raycast on cubies? We should arrange 27 cubies into cube. Clicking a face of the cube selects face (based on normal/position) and rotates that face 90 deg clockwise (or maybe with modifiers for counter). Need orbit controls. We can use built-in OrbitControls? three.min.js only includes core library, not examples/jsm/controls/OrbitControls. We can implement simple orbit controls ourselves or load OrbitControls? The prompt says only library file(s) already present: three.min.js. Use plain <script src="three.min.js"></script>. There is no OrbitControls.js. Need implement camera orbit drag ourselves.

Need single file, self-contained. No external CDNs. Need complete.

We need design scene: camera perspective, renderer, lighting, cube group. Build cubies: 27 Mesh each of BoxGeometry with different colored face materials. For Rubik, each cubie may be black on internal faces and colored stickers on external. Approach: create BoxGeometry and apply arrays of materials per face: for each face index: px, nx, py, ny, pz, nz. For each cubie coordinate x,y,z in {-1,0,1}, determine color per face based on whether coordinate on outer side:colors[r,purple? standard Rubik colors: right (x=1) red, left (x=-1) orange, top (y=1) white, bottom (y=-1) yellow, front (z=1) green, back (z=-1) blue. Internal faces black.

Interactive face rotation: Need detect click on cube. Raycaster against cubies. Get point, normal world. Determine face axis and layer index based on normal and intersection point. But if user clicks any visible sticker, normal tells face. For a Rubik face rotation, the face is the layer at max/min coordinate along axis. Using cubie positions in cube group local coordinates. Ray normal indicates face normal; e.g., normal approx (1,0,0) => Right face x=1; (-1,0,0) left; y => top/bottom; z => front/back. Then rotate layer 90 degrees around that axis.

Need queue moves to animate one at a time. Need animation: group rotated cubies in a temporary pivot group, rotate, reparent to main cube group. Or update cubie positions/quaternions. Group around center.

Need camera orbit drag: implement mouse events: left drag rotates around center, wheel zoom, maybe right pan. Use spherical coordinates.

Need UI overlay scramble button and instruction. Use simple CSS.

Need ensure no external fonts? okay.

Implement in JS with global THREE. Use import? No. Use script.

Need decide sizes. Cubie size 1 with small gap 0.05 maybe geometry 0.95. Cube coords 0/±1.1. Use box with materials. Add black edges using LineSegments? Could add black edges per cubie using EdgesGeometry. Fine.

Need handle animations: duration 300ms. Use requestAnimationFrame. Queue. Scramble: sequence of 20 random face moves.

Need clickable without camera drag conflict. Only rotate on pointer click if not dragging. Set flag.

Need face rotation direction: clockwise when looking at face? In Three.js coordinate system: y up. For Right face (x=1), looking from +x, clockwise is negative angle? We can fix. Important intuitive. We'll determine sign based on axis and clockwise default. For a face, "clockwise 90°" looking from outside along normal toward cube. Right-hand rule: positive angle rotates CCW when looking from positive axis toward origin. So clockwise = -Math.PI/2 around normal vector. But the normal vector maybe world +x. For Right face, clockwise => -90° around +x. Top face (y+): clockwise looking from above downward? Need define. Actually if looking from +y down at top, clockwise rotation equals positive angle around -y? Let's derive: right-hand rule positive around +y is CCW when looking from +y down. So clockwise = -90° around +y. Back face (z=-1) with normal -z: looking from -z toward origin. Positive around -z is CCW in view? We can do just rotate -PI/2 around the axis = normal vector. That yields clockwise when looking along the normal (from outside toward cube). For negative axis normals, positive angle around -z is opposite of around +z. Since -PI/2 around normal. Fine.

But to make intuitive maybe just use -PI/2 around world axis. We can invert via Shift+click.

Need clicking on face: We cannot get exact face color due to multimaterial. Raycaster gives faceIndex; we can map material index using face.materialIndex? Actually each face in geometry has materialIndex 0..5 (two triangles per material). But for face detection, the normal of intersection face in world coordinates is simpler. But normals are per face, can use intersection.face.normal transformed. Could also use intersection.point and normal. Since cubies have box geometry and are axis aligned before moves (queries after rotations need world positions). We can compute cubie world positions each time; but for face selection, normal alone gives face axis. Then layer index: we can compute max/min dot product. For normal (positive x), choose cubies with x near max. Better to gather all cubies world positions, compute max dot along normal, threshold. Use a small epsilon.

Implementation: Each cubie mesh has userData with logical coordinate maybe not accurate after rotations. We can rely on actual world positions. For a rotation axis (normal as world axis ± unit), compute dot = position.dot(axis). Find the layer with dot near max (or min depending sign). For axis normal not exact due to accumulated transforms (after 90 deg increments positions are integers). Compute using rounded dot.

Temporary pivot approach: create a THREE.Group pivot at scene center? Actually rotating around cube center (0,0,0). For face rotation, rotate around axis through cube center. Since layer at offset along axis (distance 1.05 say). Wait a face layer includes cubies at x=1.05. Rotating around x-axis through origin will keep their x coordinate constant. That works. They rotate in 3D around central x axis. The pivot should be at origin. We can create a Group at origin, add selected cubies, rotate group, then reattach to main group. But if main group has no rotation, fine.

However we also want to rotate whole cube? We can rotate main group? Maybe not needed. We can attach cubies to mainGroup and leave it identity. Temporary pivot at origin.

Algorithm rotateLayer(axis, angle):
- Determine selected cubies: for each cubie in mainGroup.children, position in world (cubie.getWorldPosition). dot = position.dot(axis). If Math.abs(dot - layerPos) < eps (0.5?) where layerPos = sign * unit. Simpler: round dot to nearest multiple of spacing (1.05). layerIdx = Math.round(dot / spacing) maybe -1,0,1. For face normal axis, we want idx = max if positive normal else min. But if normal has negative components, e.g., (-1,0,0), idx=-1. So axis unit * spacing (layerPos). Actually dot range; for axis (1,0,0), positions.x = -1.05,0,1.05. For face right (axis +x), idx=1. For left (axis -x), idx=-1.
- Get actual dot rounded: let layerRef = Math.round(dot/s)*s. Compare with target. But we can choose normal direction and the max layer. Simpler: compute layer = Math.round(dot/spacing). For axis +x, we want layer 1. For axis -x, we want layer -1. But we can determine by click: axis = normal rounded. Then layer = Math.round(dot/spacing). Since axis equals normal, and cubie at face has layer equal sign of axis? For axis -x, face cubies have x=-1.05 => layer=-1. Good. So layer index equals dot/spacing sign matching axis. For internal? No, we use face normal. Then select cubies with layer == targetLayer.
- Create pivot group at (0,0,0); scene add pivot. Detach each selected cubie from mainGroup and attach to pivot preserving world transform via attach method: pivot.attach(cubie) handles transform preserving.
- Animate pivot.rotation[component] from 0 to angle (but pivot rotation accumulated each frame). Use tween variable t from 0 to 1; pivot.quaternion.setFromAxisAngle(axis, currentAngle). At end remove pivot and reattach to mainGroup: mainGroup.attach(cubie).
- During animation block interactions (isAnimating). But maybe allow scramble queue building.

Potential issue: using WorldTransform after multiple rotations because cubies are children of mainGroup (identity), pivot at origin, attach preserves. Fine.

Need clickable anywhere on cube, not just stickers? Raycaster normal from geometry face; if click on internal? all cubies external. Fine.

Need initial camera position: (5,4,6) looking at origin. Orbit controls target 0.

Need orbit drag: implement. Listen canvas pointerdown, pointermove, pointerup, pointerleave, wheel. On pointerdown if primary only. Calculate delta. Rotate spherical: theta around Y (azimuth), phi around X (polar). Limit phi to avoid flip. Zoom via radius. Left drag rotate, right drag pan maybe. We can just rotate.

Need distinguish click vs drag: track moved distance; if pointerdown to pointerup movement < 3px and no drag, treat as click. But also if click on cubie triggers cube rotation. We should not rotate cube if dragged. Use raycaster on pointerup if not dragging and not moved.

Potential issue: raycaster on pointerdown/up after animation? fine.

Need scramble button: generate 20 random moves with axis and angle ±90. Add to queue.

Need UI: button, status. CSS absolute overlay.

Need color scheme. Use face colors:
- +x Right: #b90000 red
- -x Left: #ff5900 orange
- +y Up: #ffffff white
- -y Down: #fcd400 yellow
- +z Front: #009b48 green
- -z Back: #0045ad blue
Internal: #111111 black.

Need lighting: ambient + directional.

Need renderer with antialias, shadows maybe.

Need device? No.

Need code robustly self-contained.

Let's build index.html.

Plan file contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>3D Rubik's Cube</title>
<style> body margin0 overflowhidden... UI absolute. button style. </style>
</head>
<body>
<div id="ui"><h1>Rubik's Cube</h1><button id="scramble">Scramble</button><p>... Shift+click...</p></div>
<script src="three.min.js"></script>
<script>
...
</script>
</body>
</html>

JS details.

Initialize container = document.body.
scene = new THREE.Scene(); background #222.
camera = new THREE.PerspectiveCamera(45, width/height, .1, 100); pos (5,4,6).
renderer = new THREE.WebGLRenderer({antialias:true}); setSize, append.
lights: ambient 0.4, directional white from (10,20,10) cast shadow maybe. Add.
mainGroup = new THREE.Group(); scene.add(mainGroup).

Constants: N=3, spacing=1.05, cubieSize=0.95, stickerSize? Faces colored via materials.

Create materials array per direction: order for BoxGeometry is right (px), left (nx), top (py), bottom (ny), front (pz), back (nz). Colors accordingly.
let rightMat = new THREE.MeshStandardMaterial({color: COLORS.right, roughness:..}); etc; black internal.
For each coordinate x,y,z in [-1,0,1], create geometry = new THREE.BoxGeometry(cubieSize,cubieSize,cubieSize). materials = [ x==1?R:black, x==-1?L:black, y==1?U:black, y==-1?D:black, z==1?F:black, z==-1?B:black ]. mesh= new THREE.Mesh(geom, materials); mesh.position.set(x*spacing,y*spacing,z*spacing); cast shadow=true; mainGroup.add(mesh). Maybe add edges line: new THREE.LineSegments(new THREE.EdgesGeometry(geom), lineMat). Edges local 0,0,0, add to mesh. That avoids need separate edges.

OrbitControls code: Need radius = 8; theta = Math.atan2(camera.position.x, camera.position.z)? In spherical, theta is angle from +z? But implement simple manual: spherical coords theta/yaw, phi/pitch. Camera position = target + spherical. Use target = (0,0,0). pos.x = radius * sin(phi)*sin(theta); pos.y = radius * cos(phi); pos.z = radius * sin(phi)*cos(theta); phi clamp [0.1, PI-0.1]. theta += deltaX * sensitivity, phi += deltaY * sens.

On pointerdown set dragging=false, startX,startY, pointer active. On pointermove if active: dx,dy; if distance >2 set dragging=true; rotate. On pointerup: if !dragging and distance small, do click raycast. But pointerup can happen outside but fine.

Raycasting: On pointerup. Compute pointer coords normalized. raycaster.setFromCamera. Intersect mainGroup children. If intersects[0], get face normal world: normal = intersection.face.normal.clone(); apply mesh.matrixWorld transform; normal.round maybe. Need convert to axis unit. But mesh can rotate? Main group identity. Face normal after many rotations may have small errors; round to nearest integer then normalize. axis = new THREE.Vector3(Math.round(n.x), Math.round(n.y), Math.round(n.z)).normalize(). Since normals are ±axis. If n component near 0, round. 
Then we need determine layer index based on intersection point. We can compute point world and dot product with axis; layerIdx = Math.round(point.dot(axis)/spacing). If normal points outward of face. For clicked face, layerIdx is ±1. Use sign.
Then angle: default -Math.PI/2 (clockwise looking along normal). Shift = inverse. Add move to queue.

However, if user clicks on a cubie on the face (front sticker), normal will be world +z. Good. If they click edge/corner, normal will be one of faces. Good.

Queue manager: array moves. isAnimating flag. process queue recursively. rotateLayer takes axis, angle. During rotate, maybe store selected cubies etc.
Implementation rotateLayer(axis, angle):
- let selected=[]; for each child in mainGroup.children (meshes only, but edges children? edges are child of mesh, not mainGroup). The mainGroup children are cubie meshes. Good.
- let layerIdx; Use first child's world position? Need target layer: compute dot for each, round to nearest. Since axis normal. We can find max dot? Actually for face at axis's positive side select max; for negative select min. Equivalent round sign. We can compute layerIdx = Math.round(cubie.getWorldPosition(temp).dot(axis)/spacing). For all cubies, there are -1,0,1. For right face axis +x, face cubies layerIdx=1. For left axis -x, layerIdx=-1. Since axis direction aligns with layer location. So determine from any cubie. But if normal +x and click front face? normal is +x, axis +x, face cubies x=1 => layerIdx=1. Good. If normal +z but click front right edge, normal +z, face cubies z=1 => layerIdx=1. Good.
- if (axis.x|| Math.abs(axis.x?)) to determine comp.
- Add pivot to scene. For each selected cubie, pivot.attach(cubie).
- Animate using startTime = performance.now(), duration = 250ms. function animate(now): elapsed = now-start; t = Math.min(1, elapsed/duration); Use easing. angleCur = angle * easeInOutQuad(t). pivot.quaternion.setFromAxisAngle(axis, angleCur). At t>=1: set final? pivot.quaternion.setFromAxisAngle(axis, angle); for selected reattach to mainGroup: mainGroup.attach(cubie). remove pivot. isAnimating=false; processQueue().
- Need ensure quaternion accumulation: set directly each frame; final angle. Good.
- Need add edges continue attached to cubie? Since edges are child of mesh, pivot.attach(mesh) moves mesh and its children. Fine.

processQueue: if !isAnimating and queue.length >0: move=queue.shift(); isAnimating=true; rotateLayer(move.axis, move.angle).

Scramble: for 20 moves: pick random axis among [+/- x, +/- y, +/- z]. Actually random face normal one of 6. angle = random ±PI/2. But avoid opposite moves? Not necessary. Add to queue. But to scramble quickly, we can animate each. User can click already a move when queue empty; scramble fills.

Need maybe use Move class {axis, angle}.

Camera orbit process: Need update camera.lookAt target.

CSS for UI overlay: <div id="ui"> with pointer-events: none? But button needs pointer. We can allow event propagation? We should stop pointer events on UI except button. Set #ui pointer-events:none; button pointer-events:auto. But text won't block. Fine.

Alternatively overlay top-left.

Edge lines: use THREE.LineSegments with basic black material. We'll add to each cubie via mesh.add(lineSegments). Or create with geometry. Need ensure raycaster doesn't hit edges? Lines are not pickable for Mesh? Raycaster against Line needs line set; default intersectObjects includes all types. Since we raycast mainGroup.children, edges are not children of mainGroup; child meshes only. The line segments are children of mesh; raycaster intersectObjects(mainGroup.children) will test mesh and recursively? It will test mesh only because LineSegments is child; Raycaster with intersectObjects traverses descendants but only those matching current raycaster params (set line? no). By default Raycaster tests Mesh, Line, Points. If we didn't call raycaster.linePrecision; It might intersect lines? It traverses and checks line intersection if line objects. Since line descendants inside mesh are tested. That could cause clicks on edges returning face normal weird? Actually line intersection returns point and no face normal maybe. To avoid, add edges as mesh child but set raycast to null? Or style lines via EdgesGeometry and add with no raycast. Simpler: don't add edges; use black material internal faces, and each cubie has a thin black outline effect? Could use BoxGeometry with slightly larger black outline? Or just use black gaps via spacing. Without edges cube still looks fine. We can avoid edges to keep simple. But visual needs maybe okay with black internal/gaps. We can add thin border using separate slightly larger black box as outline child? That might be heavy. We'll add edges but disable raycast on lines: lineSegments.raycast = () => {}. Add to mesh. Then raycaster intersect children includes line object but raycast empty returns nothing. Fine.

Maybe use MeshStandardMaterial with metalness. Good.

Need coordinate handling after reattach: mainGroup.attach(cubie) preserves world transform and resets pivot transform. Since mainGroup is identity, cubie position/quaternion updated to world. Good.

Potential issue: mainGroup.attach modifies world transform? attach preserves when parent changes. Attach method in THREE.Object3D attaches child maintaining world transform. Since pivot at origin and final orientation set, attaching to mainGroup yields same. Good.

Need define target object for camera orbit. Use Vector3(0,0,0). Update camera.position and camera.lookAt(target). on resize update.

Need pointer event capture: document.addEventListener pointermove/up maybe to handle drag outside canvas. Use renderer.domElement.addEventListener pointerdown etc; but up should be window. Fine.

For click detection: use pointerdown coordinates and on pointerup check distance and dragging flag. But we also need ignore if dragging camera. We'll capture in renderer.domElement. Use pointerId? not necessary.

Need handle shiftKey at click time to reverse angle.

Potential problem: clicking UI button triggers raycast if UI overlays canvas? We set #ui pointer-events none, button auto, pointer events on canvas under? Since UI pointer-events none, event passes through? Actually button has pointer-events auto, so button will block. If user clicks text, passes through to canvas and might rotate. But text area small outside. Maybe set #ui pointer-events none and button. ok.

Need animations smooth.

Add a condition: if isAnimating and user clicks, ignore or queue? We'll just ignore click during animation maybe queue? The prompt says clickable face rotations; let's queue user move if not dragging. That may feel good. But raycasting while animation still fine; queue move. We'll allow queue.

Scramble while animating add moves. Good.

Need add local axis comp detection for pivot rotation component: Already use quaternion setFromAxisAngle.

Need ensure performance.

Need maybe import OrbitControls from three.min.js? Not available, so implement.

Potential issue with pivot.attach: It adds to pivot and removes from mainGroup. But we must include only meshes, not helper objects. mainGroup.children maybe exactly cubie meshes.

Need also recompute layer index robustly after multiple rotations: world positions are rotated. For target layer, compute for all selected? e.g., after rotating layer, the cubies on selected face may be at x=0? No, face layer rotation preserves layer coordinate; only within layer positions change. So world positions still on same axis layer. dot/spacing = -1,0,1. Good.

Could the use of spacing cause dots not exact due to floating after many rotations? After 90-degree rotations, rounding handles. But if accumulator float drift, use 0.5 tolerance. We'll select with Math.abs(layer - targetLayer) < 0.5.

Let's write code.

Need determine comp for vector within constrain. Use get component sign.

Implementation details in code:

const SPACING = 1.05;
const CUBIE_SIZE = 0.95;
const AXIS_NAMES = [ 'x','y','z' ];

function createCubie(x,y,z){
  const geometry = new THREE.BoxGeometry(CUBIE_SIZE, CUBIE_SIZE, CUBIE_SIZE);
  const matR = ...; etc. Let's create materials globally to reuse.
  const materials = [
    x===1 ? materialsByDir.px : blackMat,
    x===-1 ? materialsByDir.nx : blackMat,
    y===1 ? materialsByDir.py : blackMat,
    y===-1 ? materialsByDir.ny : blackMat,
    z===1 ? materialsByDir.pz : blackMat,
    z===-1 ? materialsByDir.nz : blackMat
  ];
  const mesh = new THREE.Mesh(geometry, materials);
  mesh.position.set(x*SPACING, y*SPACING, z*SPACING);
  mesh.castShadow=true;
  mesh.receiveShadow=true;
  const edges = new THREE.LineSegments(new THREE.EdgesGeometry(geometry), edgeMat);
  edges.raycast = ()=>{};
  mesh.add(edges);
  return mesh;
}

Build loop.

Queue:
let moveQueue=[], isAnimating=false;
function enqueueMove(axis, angle){ moveQueue.push({axis, angle}); processQueue(); }
function processQueue(){ if(isAnimating || moveQueue.length===0) return; const move=moveQueue.shift(); rotateLayer(move.axis, move.angle); }
function rotateLayer(axis, angle){ ... }

In rotateLayer, need axis clone: const normal = axis.clone(); Determine comp: Since normal is ±unit. const comp = Math.abs(normal.x) > .5 ? 'x' : Math.abs(normal.y) > .5 ? 'y' : 'z'; const targetLayer = Math.round((normal[comp] > 0 ? SPACING : -SPACING)/SPACING); Actually normal[comp] is +1 or -1. targetLayer = normal[comp]; because SPACING/spacing=1. So targetLayer = Math.round(normal[comp]); Simpler.

Then selected = mainGroup.children.filter(c => { const p = new THREE.Vector3(); c.getWorldPosition(p); const layer = Math.round(p[comp]/SPACING); return Math.abs(layer-targetLayer) < 0.5; });

Pivot:
const pivot = new THREE.Group(); scene.add(pivot);
selected.forEach(c => pivot.attach(c));
const startTime = performance.now(); const duration = 250;
function step(now){ const t = Math.min(1, (now-startTime)/duration); const a = angle * easeInOutQuad(t); pivot.quaternion.setFromAxisAngle(axis, a); renderer.render(scene,camera); if(t<1){ requestAnimationFrame(step); } else { pivot.quaternion.setFromAxisAngle(axis, angle); selected.forEach(c => mainGroup.attach(c)); scene.remove(pivot); isAnimating=false; processQueue(); } }
requestAnimationFrame(step);

But we also have main animation loop. If we requestAnimationFrame step in parallel with render loop, there could be double render. Better integrate into main loop: Use pivot global and animate in render loop. Or keep in step that renders only during animation. But main loop runs continuously, we can handle animation in main loop. Simpler: in rotateLayer set current animation state (activePivot, startTime, duration, angle) and the render loop checks and updates. But need isAnimating. Let's integrate in render loop:

let currentAnim = null;
function rotateLayer(axis, angle){
 ... pivot created, selected. currentAnim={pivot, start:performance.now(), duration:250, angle, selected, done:false, axis};
 isAnimating=true;
}
In animate(now): if currentAnim: t ease, set quat, if done: finalize and set currentAnim=null, isAnimating=false, processQueue(); renderer.render.

This avoids duplicate.

Main animate loop: function loop(){ requestAnimationFrame(loop); const now=performance.now(); updateCamera(); if currentAnim update; renderer.render(...); }.

But if camera needs update only when drag or resize; still fine.

Need camera orbit update: apply spherical after drag; no need per frame but we can call lookAt each frame.

Let's implement camera via spherical with persistent values:
let cameraState={ radius:9, theta: -Math.PI/4? initial pos? Let's compute theta/phi from initial. Could just set initial radius and theta/phi. Use initial pos (5,4,6). Compute radius = sqrt(77)=8.775. phi = acos(y/r)=acos(4/8.775)=1.093 rad. theta = atan2(x,z)=atan2(5,6)=0.6947. Use those. On drag update.

Camera update: pos = spherical. camera.position.set(...). camera.lookAt(0,0,0).

Pointer down: store start pointer and initial cameraState? no need.
Pointer move: if active: dx,dy; dragging=true if distance > 3; if dragging: theta -= dx*0.005; phi -= dy*0.005; phi = Math.max(.1, Math.min(Math.PI-.1, phi)); updated.
Pointer up: if !dragging and small dist, raycast. 

Need on window resize.

Edge material: LineBasicMaterial({color:0x000000, linewidth:2}) (linewidth webgl only 1).

Button scramble: function scramble(){ const axes=[new THREE.Vector3(1,0,0), new THREE.Vector3(-1,0,0), new THREE.Vector3(0,1,0), new THREE.Vector3(0,-1,0), new THREE.Vector3(0,0,1), new THREE.Vector3(0,0,-1)]; for(i=0;i<20;i++){ const axis=axes[Math.floor(Math.random()*axes.length)]; const angle = (Math.random()<0.5? -1:1)*Math.PI/2; enqueueMove(axis, angle); } }

Instruction.

Potential issue: Color of left face orange #ff5900 may be too bright. Fine.

Now need check syntax. We'll write actual file. Before final, maybe test file generation and quick syntax? We can write file, then maybe use node to validate? Since no external, but can run a grep/head.

Need ensure no separate files. index.html single.

Let's produce file with these contents.