We need to create index.html including three.min.js library that is present in current directory. We need to load the script. Then write 3D Rubik's cube interactive.

We need to use only three.js installed. Not external resources - no CDN. The file names: there is "three.min.js" available. We'll create a simple html with style, script. Use CSS for maybe UI button.

Approach: build cube made of 27 small cubes arranged except center cube. Or use BoxGeometry for each small cube; group them. Each face rotation via click on face: need raycasting. When user clicks a face, rotate the group of 9 cubes in that layer (for that face) by 90 degrees about appropriate axis.

Simplify: easiest is to create a Rubik's cube with 3x3x3 small cubes. Each small cube is a Mesh of BoxGeometry (size 1). Place them with offset - each has dimension 1. Use size 3 grid. For each small cube we might color each face accordingly.

We need interactive rotations: when clicking on a face, rotate that slice. Implementation: detect intersected face index via raycaster. Determine which layer: e.g., if clicked on +X face (right face), rotate Z onto Y? Let's think: coordinates system: let's centralize cubes at origin. Using cube size 1, each small cube coordinates: x, y, z ranging -1, 0, 1. Faces:

- +X right side: cubes where x=1.

- -X left side: x=-1.

- +Y top: y=1.

- -Y bottom: y=-1.

- +Z front: z=1.

- -Z back: z=-1.

So rotation target: rotate the nine cubes of that slice around the axis corresponding to face normal: e.g., for right slice rotate around y-axis? Actually to rotate that layer, we rotate around axis perpendicular to that face: For right face (x=1), rotate around z axis? Let's visualize: Usually rotating the right slice involves rotating around z? Wait: In Rubik's standard notation: R face rotates around y-axis? Let's use standard: axis y for right or left? Eh.

If each cube is built using Vector3 position (x,y,z), to rotate a slice, we rotate each of those meshes around axis. For right face slice (x=1), rotate around z-axis? No, rotation around the axis that passes through center of cube from viewer: front view along +z. Normally rotating right face corresponds to rotating slice around z? Actually if you look at cube front (+z), rotating right face clockwise should rotate cubes around z? Let's test: In coordinate system, z axis points out of screen. So rotating around z axis is a rotation in xy-plane. That brings top to right side. The right slice rotation should rotate around z? Hmm.

Simpler: Use group for layer: we can collect 9 meshes into a Group and apply rotation, then after animation detach and reattach.

Define per layer group for each possible rotation: eight groups? You need groups for each slice (x=±1, y=±1, z=±1). 6 groups but each group contains 9: for each face we need group.

When clicking: we'll determine which face normal, then target group accordingly. Rotate 90 degrees around appropriate axis: For +X face rotation, rotate around y? maybe.

Let's choose convention: If clicking +X face, we rotate slice around z axis? Actually rotate around y or z? We could pick axis perpendicular to face normal. Let's analyze: If we want to rotate +X slice such that it appears to rotate clockwise when looking from +X direction, we rotate around z axis by +90 deg. But we just need consistent functionality.

Let's pick: for each face normal, rotate around axis same as that normal: e.g., if normal +X, rotate around x-axis. But that would rotate the slice around itself, it won't change positions.

So axis must be orthogonal.

Let's choose axis: For face +X, rotate around z axis. For -X, also rotate around z axis but maybe opposite direction? We'll have same rotation but group 'x_plus' and 'x_minus'.

Similarly for +/-Y: rotate around x axis. For +/-Z: rotate around y axis.

Implementation mapping:

- +X: axis = new THREE.Vector3(0, 0, 1), sliceGroup x=1

- -X: same axis

- +Y: axis = new THREE.Vector3(1, 0, 0), sliceGroup y=1

- -Y: same axis

- +Z: axis = new THREE.Vector3(0, 1, 0), sliceGroup z=1

- -Z: same axis

Now clicking face: use Raycaster to get face normal; we need to find the normal vector in world coordinates. The face normal bits oriented.

But simpler: use is: intersect.face.normal gives normal in local coordinates of that small cube. But we need to transform to world. The small cube may not be rotated though. We'll use object3D's world matrix to transform normal. Use intersect.object.matrixWorld to transform.

But easier: we can use objects positions: For the intersected cube, we can check its position.x, y, z to determine near face distance. But you need orientation; might rely on which face is clicked: the face normal indicates which side. So we can project to nearest axis: if normal.x ≈ 1 => +X face.

Thus we can use:

const normal = intersect.face.normal.clone(); normal.transformDirection(intersect.object.matrixWorld);

Now if Math.abs(normal.x) > 0.98, it's X axis; sign determines.

Then target group accordingly.

We'll maintain groups dictionary: groups.slice; with keys 'x+' etc.

When clicking: start rotation animation over say 0.3s. We'll animate by rotating group about axis over time. On end, we need to reassign positions of internal sub cubes: finalize rotation by updating their rotation matrices and resetting groups? Another approach: after rotation we detach the 9 cubes from group and reapply identity transform but use final rotated orientations. But we might simply rotate group, then after animation, we detach each sub cube, set its position to that of the transformed group. Because we can't keep the group; we need to maintain cube positions; so I'll detach them and set positions rotated to final state.

Simpler: we can use 2-level nesting: each small cube has child? no.

Goal: interactive but simple, many typed.

Let's implement rotation by updating each cube's position vector: for each of 9 cubes, rotate its position vector around the axis using THREE.Vector3.applyAxisAngle.

Thus we don't need group. On click:

- Determine which layer and which axis.

- Get array of cubes in that layer.

- For each cube, rotate its position vector around axis by Math.PI/2 (90 deg). For each cube, also rotate its orientation maybe apply to local rotation: you might keep cube geometry; faces colors should stay with cube orientation. So we also rotate its rotation attribute accordingly; we can rotate about the same axis using .applyAxisAngle on Euler? GPU easier: use cube.quaternion.applyAxisAngle? Actually use cube.rotation? We can use cube.rotateOnAxis(angle, axis). That will rotate cube's orientation matrix.

Thus after changing position and orientation, we need to update group? We just changed each cube's matrix so fine.

All animations: we can approximate using requestAnimationFrame and use a rotation timer: apply incremental rotation each frame.

But maybe easiest: after click, we perform instantaneous rotation. That may be fine but interactive? Maybe we allow animation to show transition.

Simplify: just rotate instantly using cube.applyMatrix4? For simplicity: when click, rotate group instantly.

But requirement says interactive; we could do simple instant.

But because requirement: interactive 3D Rubik's Cube with clickable face rotations.

They didn't say animated.

I'll implement instant rotations for simplicity: each click rotates layer instantly. This would still be interactive.

Ok.

Now about orbit-drag camera: use THREE.OrbitControls library maybe not installed. But we may write simple minimal orbit controls. But we cannot load external library. But we can import OrbitControls from Three.js? However three.min.js may not include OrbitControls bundle. But we can load controls from deprecated Path? Let's check if the three.min.js includes the controls? Likely no; but we can implement minimal orbit ourselves: On mouse drag, rotate camera around target and update.

We'll implement simple orbit: maintain spherical coordinates.

Ok.

Also scramble button: a button element with click listener: generate random rotations: maybe 20 random rotations.

Implementation details:

- Create renderer: canvas fills window.

- Add lighting: AmbientLight + DirectionalLight.

- Build small cubes:

    For x in [-1,0,1], y, z:

    Create geometry BoxGeometry(0.95,0.95,0.95). Create material per face colors. For each cube, use MeshFaceMaterial or new THREE.MeshPhongMaterial? To color each face individually we create an array of 6 materials for each color arrangement: color of each face based on cube's position and orientation. But after rotating, we maintain orientation of cube's faces. So generate materials:

    For each face: color based on its normal: if cube's axis coordinate is +1 then that direction has color.

But if rotated, the color stays with cube geometry; so we should set per face based on cube's initial orientation.

So for each cube, generate materials array of 6 materials.

Define colors: For each axis: X: right=red, left=orange. Y: top=white, bottom=yellow. Z: front=green, back=blue.

When building each cube: For each face from geometry (index 0-5 correspond to ? but BoxGeometry's groups define them). We'll set materials accordingly.

Simplify: Use BoxGeometry with 6 sides; create 6 materials and assign to Mesh.

In three.js R125, BoxGeometry uses group per face. We can create array of 6 materials accordingly using standard mapping.

But easier: use 'MeshFaceMaterial' but not needed.

Set:

cube = new THREE.Mesh(geometry, materials);

Set its position new THREE.Vector3(x, y, z); If coordinates are integer coordinates from -1 to 1.

If we want spacing, we can offset by 1.1 maybe.

So final positions: x*(scale). Let's use spacing of 2 units? Actually 1 is fine.

Wait: width 1: bricks center at -1,0,1. So they will touch. Good.

Ok.

Now we need to build groups list for each layer: we can maintain arrays:

layers = { 'x+': [], 'x-': [], 'y+': [], 'y-': [], 'z+': [], 'z-': [] }

While creating cubes we push to each.

Now for rotation: on click:

- Determine normal sign: if Math.abs(normal.dot(new THREE.Vector3(1,0,0))) > 0.9: then axis 'x', sign = sign(normal.x).

Target layer key: e.g., if sign>0 => 'x+', else 'x-'.

Similarly for y and z.

Now get the layer array.

Then for each cube in layer:

- cube.position.applyAxisAngle(axisVector, Math.PI/2)

- cube.rotateOnAxis(axisVector, Math.PI/2)

Note axisVector: for x slice: z axis, for y slice: x axis, for z slice: y axis. We determined earlier.

Thus mapping:

if slice is x+: rotate around z axis.

if slice is x-: rotate around z axis.

if slice is y+: rotate around x axis.

if slice is y-: rotate around x axis.

if slice is z+: rotate around y axis.

if slice is z-: rotate around y axis.

But we need to also consider direction depending on side orientation: e.g., right side turning clockwise when viewed from outside. However we may ignore direction for the functional.

Ok.

After performing rotation, update cube positions.

However, note that cube.position.applyAxisAngle modifies world position but not geometry translation if we later recompute? We're fine.

Also we may need to keep cubes at relative positions symmetrical, after many rotations state changes.

Ok.

We also need to store layers arrays again? After rotation, the cube's position changes, so the layer group membership might be outdated. But we can recompute membership each click? Might be easier: recalc layer membership on each click by filtering by current x or y or z coordinates.

Better approach: On each rotation, after moving cubes, we rebuild layer arrays. But easier: when clicking, we compute the layer cubes by evaluating cube.position.x/y/z at nearest integer with tolerance.

Implement:

function getSlice(axis, sign) { return cubes.filter(c=> Math.round(c.position[axis]) === sign? but sign is +1 or -1; we can just check if (Math.round(c.position.x) === 1) etc. Use Math.round? coordinates might be slightly shifted due to rotation transformations but should still be integer multiples.

But after rotation, positions are exactly rotated, but maybe due to floating errors they may not be exactly integer. So we can use Math.round within tolerance to 0.5.

Alternatively, we can compute based on cube.position[axis] > 0.5 for + or < -0.5 for -. So sign >0 => >0.5 else < -0.5.

Implement:

cubes.filter(c=> Math.abs(c.position[axis]) > 0.5 && Math.sign(c.position[axis]) === sign).

Ok.

Now rotation axis mapping: For x-slice, axisVector = new THREE.Vector3(0,0,1); For y-slice: new THREE.Vector3(1,0,0); For z-slice: new THREE.Vector3(0,1,0).

We'll define mapping choices:

sliceToAxis: {x: Z, y: X, z: Y}

Ok.

Now define scramble button: click triggers e.g., 20 random rotations: choose random layer and rotate.

Implement:

function scramble() { for i in 0..20: choose random axis among ['x','y','z'], sign among [+1,-1], perform rotation; Use the same rotate function but instantly. }

Ok.

Now required: Self-contained index.html with CSS <style>, script <script>. We also must include <script src="three.min.js"></script> at beginning.

Also we need orbit controls: implement simple drag.

Simpler: use basic OrbitControls if we can from TRex? But not provided.

I will implement very simple orbit: set initial radius = 8. camera position at (8,8,8). When dragging, change spherical coordinates: theta and phi.

Implement: on mousedown store lastMouse; on mousemove compute delta, update spherical coordinates and update camera position accordingly.

Also implement wheel for zoom: event wheel to adjust radius.

During animation loop, we call renderer.render(scene, camera).

Also add event listeners to interactivity: click for selecting layer: use raycaster.

Let's build code now.

Implementation details for CSS: add simple styles: body margin 0, overflow hidden; #scramble button: position absolute, top 10px, left 10px, padding.

Ok.

Now we need to ensure we include three.min.js script first. We'll create index.html with that script.

Let's write code.

We should test code, but can't run here. Ensure no syntax errors.

In script: preload code.

Now we need to use `document.addEventListener('DOMContentLoaded', function() { ... });` In DOM ready.

But we already call script directly after loading three.min.js.

Ok.

Let's produce final index.html and write.