Using the pre-provided three.min.js (global THREE), render an interactive 3D Rubik's Cube with clickable face rotations, orbit-drag camera, and a scramble button.

Build single-page web app and write it ALL into one self-contained file named index.html in current directory: CSS in <style> tag, JS in <script> tag, inline — do not create separate .css/.js files. Use NO external resources, CDNs or network requests: artifact runs fully sandboxed with no network. End with index.html present. These library file(s) are ALREADY present in current directory — load each with plain <script src="NAME"></script> using its exact filename (never a CDN or URL), then build on top of it: three.min.js

Current working directory: /tmp/ws

We need check if three.min.js exists.

Good. Need create index.html with three.min.js loaded. Interactive 3D Rubik's Cube with clickable face rotations, orbit-drag camera, scramble button.

We need self-contained file. Use three.min.js via <script src="three.min.js"></script>. No external resources.

Need clickable face rotations. Implement 3x3x3 cube with 26 cubies? Could do 27 cubes with center hidden. Better to implement proper cubie representation with 27 small cubes, each with colored faces. Rotations by selecting face.

We need clickable face rotations: click on a face? Could have UI buttons for U D L R F B with clockwise/counterclockwise. Or raycast click on face.

Simplify: UI buttons for each face rotation. Also orbit-drag camera using OrbitControls? three.min.js may not include examples. Might need implement custom orbit drag. Could implement simple orbit controls manually: mouse drag rotate camera around target.

Alternative: use THREE.OrbitControls from examples not available. So implement custom.

Simpler: use manual camera orbit: on mousedown drag, rotate camera around y axis and pitch.

We need clickable face rotations. Could raycast intersect cubies, determine face normal, rotate that slice.

Simpler: UI buttons: U, D, L, R, F, B each with cw/ccw.

Also scramble button: random moves.

Implement cube data structure: positions [-1,0,1] for each cubie. Each cubie is Group with 6 planes? Could create BoxGeometry with MeshBasicMaterial for each face with color or white if internal.

Simpler: create 27 small cubes with BoxGeometry 0.95 size, materials array of 6 colors per cubie based on orientation.

Colors: U white, D yellow, F red, B orange, L blue, R green (standard).

For each cubie at (x,y,z), set material colors for faces: if x=1 => R green, x=-1 => L blue, y=1 => U white, y=-1 => D yellow, z=1 => F red, z=-1 => B orange. Else material transparent/white.

We need rotate slice. For a given axis and index (e.g., x=1), rotate all cubies where coord == index around axis by 90 degrees.

We need animation. Can use GSAP? No external. Use manual tween with requestAnimationFrame.

Simplify: rotate instantly? Better animate.

Implement rotation of slice: get cubies in slice, compute new positions and orientations. We can rotate group containing slice? Easier: create a Group for each slice, rotate group 90 deg, then update cubie positions in world.

Simpler approach: each cubie is Mesh with geometry. To rotate slice, we select cubies belonging to slice, create temporary Group, add them, rotate group over time, then after rotation, re-parent back and update their local positions to reflect new orientation? That gets messy with cumulative transforms.

Alternative: maintain logical cube state (array of cubies with position and orientation). On rotation, update logical positions and orientations, then animate meshes to new positions.

Simpler: instant snap rotation without smooth animation? Probably okay but better smooth.

Simpler trick: for each cubie, store its position vector and rotation quaternion. When rotating slice, we compute target position and rotation, then lerp mesh position/quaternion over ~300ms.

Implementation steps:

- Scene, camera PerspectiveCamera, renderer WebGLRenderer.
- Add ambient + directional light.
- Create cube size = 3, cubie size = 1, gap = 0.05.
- For i in -1..1 for x,y,z: create mesh if not all zero? Actually center cubie exists but invisible? We'll create all 27.
- Materials: use MeshLambertMaterial with color.
- Store cubie objects with userData: pos: Vector3, original pos? And mesh.

- Create array cubies.

- UI overlay div with buttons for faces.

- Raycasting for clicking face? Could use buttons.

Requirements: clickable face rotations. Could be clicking on face of cube. Maybe easier with buttons.

We'll provide both: buttons and click on face via raycaster.

Implement orbit-drag camera: on mousedown, track delta, rotate camera around target using spherical coordinates.

Simplify: camera at (5,5,5) looking at 0,0,0. On drag, update azimuth/elevation.

Add scramble button: do 20 random moves.

Implementation details:

Create index.html.

Write file.

Let's generate content.

Need ensure three.min.js loaded before script.

We'll use script src="three.min.js".

Use ES5? three.min.js global THREE.

We'll write HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rubik's Cube</title>
<style>... </style>
</head>
<body>
<div id="ui">...</div>
<script src="three.min.js"></script>
<script>...</script>
</body>
</html>

CSS: full screen canvas, UI top left.

Implement code.

Implementation details for cubie creation:

const size = 0.98;
const geo = new THREE.BoxGeometry(size,size,size);
For each x,y,z:
const materials = [];
for each face order: right, left, top, bottom, front, back.
Set color based on position.
If face not on outer surface, color = 0x111111 with opacity 0 (or dark). Better use MeshBasicMaterial with transparent? Could just set color to 0x222222.

Simplify: for each face, if cubie position matches outer, set color, else 0x333333 with transparent? Might still show edges. Could set material to dark gray.

Let's define colors:
const colors = {
  U: 0xffffff,
  D: 0xffff00,
  F: 0xff0000,
  B: 0xff8000,
  L: 0x0000ff,
  R: 0x00ff00
};

Materials array index mapping for BoxGeometry: 0 right (+x),1 left (-x),2 top (+y),3 bottom (-y),4 front (+z),5 back (-z). Actually BoxGeometry face order? In Three.js, BoxGeometry with materials array: right, left, top, bottom, front, back.

So:
materials[0] = x===1 ? colors.R : dark
materials[1] = x===-1 ? colors.L : dark
materials[2] = y===1 ? colors.U : dark
materials[3] = y===-1 ? colors.D : dark
materials[4] = z===1 ? colors.F : dark
materials[5] = z===-1 ? colors.B : dark

Use MeshLambertMaterial.

Create mesh, position mesh at (x*1.1, y*1.1, z*1.1) ? Use spacing.

Better spacing = 1.02.

Store cubie.userData.pos = new THREE.Vector3(x,y,z)
cubie.userData.orientation = quaternion identity.

Add to scene.

Rotation logic:

function rotateSlice(axis, index, direction) // direction = 1 for +90deg, -1 for -90deg
axis: 'x','y','z'
index: -1,0,1

Collect cubies where userData.pos[axis] === index.

For each cubie, compute new position:
If axis = 'x':
newY = y * cos - z * sin? Actually rotate around x axis. Rotation matrix:
y' = y cos + z sin? Need correct orientation.

Rotation around X axis by angle theta (right-hand rule): y' = y cos - z sin ; z' = y sin + z cos for positive rotation.

But direction maybe clockwise relative to looking at face. We'll just apply standard.

Simpler: use THREE.Matrix4 make rotation around axis, apply to position vector.

We also need to update orientation of cubie mesh (its local rotation). If we rotate mesh in world, the colors must rotate.

Simpler approach: for each cubie in slice, we compute target position and target quaternion = current quaternion * rotation quaternion.

Then animate mesh.position lerp to target position, and mesh.quaternion slerp to target quaternion.

We also need to update userData.pos to new values after animation.

Implement animation with simple tween: start time, duration 400ms.

We can have a flag isAnimating to prevent overlapping.

Better: queue rotations.

Implement rotateSliceAnimated.

Implementation steps in code:

let animating = false;
let activeAnimations = [];

function rotateSlice(axis, index, dir){
 if animating return;
 animating = true;
 const angle = dir * Math.PI/2;
 const axisVec = new THREE.Vector3(axis==='x'?1:0, axis==='y'?1:0, axis==='z'?1:0);
 const rotQuat = new THREE.Quaternion().setFromAxisAngle(axisVec, angle);
 const sliceCubies = cubies.filter(c => c.userData.pos[axis] === index);
 // compute targets
 sliceCubies.forEach(c => {
   const startPos = c.position.clone();
   const startQuat = c.quaternion.clone();
   const pos = c.userData.pos.clone();
   // rotate position around origin
   const newPos = pos.clone().applyQuaternion(rotQuat);
   c.userData.pos.copy(newPos);
   const newQuat = startQuat.clone().multiply(rotQuat); // Actually orientation should rotate with world? Hmm.
   // Better: we want mesh quaternion to reflect rotation of cubie itself.
   // If we rotate slice as rigid body, mesh quaternion should be multiplied by rotQuat.
   // But also position is updated.
   c.userData.targetPos = newPos;
   c.userData.targetQuat = newQuat;
   c.userData.startPos = startPos;
   c.userData.startQuat = startQuat;
   c.userData.t = 0;
 });
 // animate loop
 function step(){
   const delta = 0.016;
   let done = true;
   sliceCubies.forEach(c => {
     c.userData.t += 0.05;
     const t = Math.min(c.userData.t,1);
     c.position.lerpVectors(c.userData.startPos, c.userData.targetPos, t);
     // slerp
     c.quaternion.slerpQuaternions(c.userData.startQuat, c.userData.targetQuat, t);
     if(t<1) done = false;
   });
   if(!done){
     requestAnimationFrame(step);
   } else {
     animating = false;
   }
 }
 step();
}

But this rotates mesh relative to world but after rotation, the cubie positions are updated, but the next rotation's startPos is based on mesh.position, which is fine.

However, using quaternion multiplication for orientation might cause colors to rotate correctly.

Alternative method: keep cubie mesh rotation zero and only move position, and update materials? Complex.

Maybe better: we keep cubie mesh as static with local rotation, and we rotate entire group representing slice as a Group. Then after animation, we need to update userData.pos and reset group.

Simpler to use group rotation method:

Create temporary Object3D sliceGroup, add cubies to it (reparent). Rotate sliceGroup over time, then after rotation, for each cubie, compute its world position, set its position relative to scene, and reset its quaternion to incorporate rotation? Could just leave cubie as child of scene with position updated.

Alternative approach: just instant rotation without animation: compute new positions and rotate meshes instantly. Simpler, acceptable?

Requirement not specify animation smoothness.

We can do animated using THREE.Object3D rotation.

Better method: For each slice, create a group at origin, move cubies into group with local positions relative to slice center (which is zero). Then rotate group 90 deg. After rotation, re-parent cubies back to scene with world positions.

Implementation steps:
- For each cubie in slice, compute its world position (already). We'll temporarily detach from scene, attach to group.

Simpler: keep cubies in scene, but we compute target positions via matrix, then lerp.

The quaternion approach for orientation might cause cubie colors to rotate incorrectly because the mesh's own orientation relative to world changes, but the material faces are attached to mesh. Rotating mesh quaternion rotates the whole cube, so colors rotate correctly.

Yes.

Potential issue: after first rotation, cubie.position is at target, userData.pos updated. Next rotation, startPos = mesh.position, which matches userData.pos. Works.

Now clickable face rotations: we can raycast from mouse click onto cubies, determine which face was hit, determine axis and index.

Simplify: UI buttons.

Let's implement UI buttons for U U', D D', etc.

Scramble button: perform 20 random moves.

Orbit camera: implement spherical coords.

Let's implement:

let radius = 8;
let theta = 0.6;
let phi = 0.8;

camera.position set from spherical.

On mousedown, start drag, update theta/phi.

Add wheel zoom.

Implement resize.

Let's write code.

Need to ensure no external resources.

Write index.html via write tool.

Let's produce final file.

We wrote file. Should verify exists.

Done. Provide summary.