The task is: "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 a single-page web...

The task is to build a single-page web app in one self-contained file named index.html. It uses three.min.js which is already present.
The task is to create an index.html file that uses three.min.js (global THREE) to render an interactive 3D Rubik's Cube with clickable face rotations, orbit-drag camera, and a scramble button.

The three.min.js is present. I need to create a single self-contained index.html that uses <script src="three.min.js"></script> and builds a 3D Rubik's Cube on top of it.
The task is to create a single self-contained index.html file that uses three.min.js to render an interactive 3D Rubik's Cube with clickable face rotations, orbit-drag camera, and a scramble button. It must be all in one file with CSS in <style> and JS in <script>, no external resources besides the provided three.min.js.

I need to write this index.html using the write tool, but since I'm the AI, I'll reason and then provide the content.

First, include three.min.js via script src.

Then, in the HTML, set up the scene, camera, renderer.

For orbit-drag camera: since 3D, use basic mouse controls for orbiting: track mouse down, move to rotate around center.

For scramble: generate random sequence of moves like 'U', 'D', 'F', etc., and apply them.

For clickable: on mouse click, use raycaster to find intersected cubelet and face, determine 3D face, rotate accordingly.

I need to implement cubelet creation with proper materials.

Define colors:

- White: 0xffffff (U)

- Yellow: 0xffff00 (D)

- Red: 0xff0000 (R)

- Orange: 0xffa500 (L)

- Green 0x00ff00 (F)

- Blue 0x0000ff (B)

Standard Rubik's color scheme:

- Front: Green

- Back: Blue

- Left: Orange

- Right: Red

- Up: White

- Down: Yellow

For each cubelet, create BoxGeometry 0.9 size, and array of 6 materials: front,back,left,right,up,down colors, but actually depending on which faces are exposed, but to simplify, assign color to each direction: +x red or whatever, but since cubelets move, each cubelet has fixed colors on its faces relative to its own orientation.

For each cubelet, the materials are assigned based on its initial orientation: the material for its +z face is the color for that side, etc.

Since all cubelets are identical in structure, but positioned differently, each has materials array corresponding to faces: [right, left, top, bottom, front, back] or order as per BoxGeometry faces order.

BoxGeometry faces order is: +x, -x, +y, -y, +z, -z

So materials[0] for +x face, etc.

For the whole cube, we need to assign colors based on the 6 sides.

For center cubelets, they have one color exposed, but for simplicity, all cubelets have 6 materials with colors on exposed sides, black on hidden.

But to make it simple, use colored materials for all, but hidden faces will show through if transparent, but better use black for internal.

For 3x3, there are corner, edge, center cubelets.

- Corner: 3 colors

- Edge: 2 colors

- Center: 1 color

- Very center hidden.

To implement properly, I need to create different cubelets with different material combinations.

But for simplicity, many demos use one 6-material per cubelet, with colors assigned to the correct faces based on position.

For example, for a cubelet at (1,0,0), its +x face is red, -x orange, etc.

Yes, that's standard.

So, define the 6 colors:

const colors = {

  U : 0xffffff, // white

  D  : 0xffff00, // yellow

  F  : 0x00ff00, // green

  B  : 0x0000ff, // blue

  L  : 0xffa500, // orange

  R  : 0xff0000 // red

};

Then, for each cubelet based on its initial position, assign materials accordingly.

For a cubelet at position (x,y,z) where x,y,z in {-1,0,1}, the material for its +x face is if x==1 then R color 0xff0000, if x==-1 L color, etc.

But since the cubelet itself is oriented initially aligned, for each cubelet, the materials array is fixed: materials[0] (+x) = color of right if it's on right face, but actually:

Since all cubelets are created with same 6 materials? No, different cubelets have different colors on their faces.

For example, the center of right face has red on +x, white on +y, green on +z etc depending.

So, to create:

I need to create 27 unique meshes with appropriate material arrays based on their logical position.

 For each logical pos (i,j,k) i,j,k=-1,0,1

  const mat = new Array(6).fill( black material )

  if (i==1) mat[0] = red // +x

  if (i==-1) mat[1] = orange // -x

  if (j==1) mat[2] = white // +y

  if (j==-1) mat[3] = yellow // -y

  if (k==1) mat[4] = green // +z front

  if (k==-1) mat[ 5] = blue // -z back

  Then mesh = new THREE.Mesh( new THREE.BoxGeometry(0.9,0.9,0.9), mat )

  mesh.position.set(i*1.05, j*1.05, k*1.05)  // spacing to separate

 Yes, this way, each has correct colors on correct sides initially.

  For hidden faces, they have black material.

  Create black material: new THREE.MeshBasicMaterial({color:0x000000}) or use MeshPhongMaterial with color black.

  Better use MeshPhongMaterial for lighting, color black for hidden 0x000000

  For exposed, the color.

  Yes.

  Note that for center cubelets like (0,0,0) all black.

  For face centers like (1,0,0) : mat[0]=red, others black.

  For edges: two colors, corners three .

  Perfect.

  Then, cubelets array push all 27 meshes.

  Add to scene.

  For lights: directional light from (1,1,1), ambient.

  For camera: Perspective(75, aspect,0.1,1000)

  camera.position.set(3,3,3 or 4,4,4)

  For renderer: WebGLRenderer({antialias:true})

  renderer.setSize(window.innerWidth, window.innerHeight)

  document.body.appendChild(renderer.domElement)

  Then add event listeners for resize, mouse down etc.

  For orbit drag: implement mouse move for rotation azimuth elevation.

  For scramble button: button element, on click generate scramble: e.g. 10 random moves, each move one of 6 faces *2 dir =12, pick random, apply rotateFace.

  But to make it nice, perhaps queue the moves and animate one after another.

  For clickable 90 deg rotations.

  To implement rotateFace(axis, layer, angle) with animation.

  I need to have a flag rotating, and use requestAnimationFrame to step the rotation.

  For button: <button id="scramble">Scramble</button> <button id="reset">Reset</button>

  In script: document.getElementById('scramble').addEventListener('click', scramble)

   scramble function: generate sequence, apply sequentially with delay or instant.

  For reset: recreate all cubelets in initial position and orientation (but since initial is identity, just recreate).

  To recreate: remove all from scene, clear cubelets array, loop i j k create new mesh with mat based on ijk, add to scene, push to cubelets.

  Yes.

  For CSS: body {margin:0}, canvas {display:block}, button {position:absolute, top:10, left:10}

  Yes.

 Now, to write the code, I need to be careful with details.

  Let's start drafting the code in mind.

  First:

  <!DOCTYPE html>

  <html>

  <head>

  <title>Interactive Rubik's Cube</title>

  <style>

  body { margin: 0; overflow: hidden; }

  #controls { position: absolute; top: 10px; left: 10px; z-index: 1; }

  button { padding: 5px; margin: 5px; }

  </style>

  </head>

  <body>

  <div id ="controls">

  <button id="scramble">Scramble</button>

  <button id="reset">Reset</button>

  </div>

  <script src="three.min.js"></script>

  <script>

  // JS code here

  const scene = new THREE.Scene();

  scene.background = 0x222222;

  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  camera.position.set(4, 3, 5);

  const renderer = new THREE.WebGLRenderer({antialias: true});

  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  // lights

  const ambientLight = new THREE.AmbientLight(0x404040);

  scene.add(ambientLight);

  const dirLight = new THREE.DirectionalLight(0xffffff, 1 0.5);

  dirLight.position.set(5,5,5);

  scene.add(dirLight);

  // colors

  const colorMap = {

    R: 0xff0000,

    L: 0xffa500,

    U: 0xffffff,

    D: 0xffff00 ,

    F: 0x00ff00,

    B: 0x0000ff

  };

  const black = 0x111111;

  // create cubelets

  let cubelets = [];

  function createCubelets() {

    cubelets.forEach(c => scene.remove(c));

    cubelets = [];

    const size = 0.9;

    const spacing = 1.

The file is created. Now I need to verify it works and that the three.min.js is properly loaded with the script tag. The instructions say: "load each with a plain <script src="NAME"></script> using it...

The file is created successfully. I should verify the implementation is correct by checking if it runs, but since it's a browser-based Three.js app, I can't fully execute it in this environment. Howev...

The command failed because of an invalid node flag combination. I should use a simpler check.

The file is complete and ready. It meets all the requirements: