We need to create an index.html file with full code. Four-matter: The user instructions: "Using the pre-provided three.min.js (global THREE), build a 3D solar system with the sun and orbiting planets at varied speeds and sizes, orbit-drag camera controls, and a starfield."

The details: we have three.min.js present; we must load it using <script src="three.min.js"></script>.

Goal: Build a self-contained HTML page. Use inline CSS and JS.

We need 3D solar system: sun at center, planets orbiting around at some varied speed and radii; also starfield background. Use orbit controls (drag camera). Since we use three.min.js only, we might need to load OrbitControls manually. But the requirement says "pre-provided three.min.js (global THREE)". It may include OrbitControls? Three.min.js alone does not include OrbitControls; but we can create simple custom controls or write minimal control using THREE.OrbitControls url? It's likely not included. But we can cheat by creating simple drag orbit controls ourselves; but easiest is to use built-in OrbitControls if included. However the instruction states "pre-provided three.min.js (global THREE)" and "load each with a plain <script src="NAME"></script>", but we can also load other libs? They say "These library file(s) are ALREADY present in the current directory — load each with a plain <script src="NAME"></script>" So there may be other library files like OrbitControls.js maybe present? It says "these library file(s) are ALREADY present" meaning there might be other libraries present. But we don't know file list. Let's run a bash ls.

Only three.min.js present. So we don't have OrbitControls. We'll need to create or import minimal drag orbit functionality ourselves. We'll implement custom mouse drag to rotate camera around target. Or simpler: use 'TrackballControls'? but not present. So we implement our own simple: on mouse down, track movement, angle change; then compute camera position using spherical coordinates.

Also include starfield: create points, small stars.

Define sun at sphere radius maybe 5, emissive material. Planets: Earth radius 1, Mars 0.5, Jupiter bigger 2, etc. Orbit distances: 10, 13, 20, etc. Each planet's orbit speed variable. Use animation tick to update.

Implement starfield by generating many points with random positions far away, e.g., sphere of radius 100.

Simplify: We'll set camera distance far, maybe 50. Use rotation around Y.

Implement custom Orbit-like controls: On mouse down, record initial position. On mouse move, update theta and phi angles of camera spherical coordinates, restrict phi. Update camera position, lookAt sun.

Also handle touch events for mobile? Not required.

Implementation: create 'camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);'

Set initial angles: theta=0, phi= Math.PI/4. Then compute camera position: radius 60 maybe. object = new THREE.Vector3(0,0,0). On update, camera.position.set( radius * sin(phi)* cos(theta), radius * cos(phi), radius * sin(phi)* sin(theta) ). Then camera.lookAt(target).

Add event listeners to document for mousedown, mousemove, mouseup, similar for touch.

We'll also implement wheel to zoom.

Implement starfield: geometry = new THREE.BufferGeometry(); positions = new Float32Array(numStars*3); for each star random x,y,z in range -200..200. Then PointsMaterial, color white, size 0.5 or 1. Use Points = new THREE.Points(geometry, material); Add to scene.

We need to load three.min.js before our script. Provide inline <script> at end.

Add CSS to style body: margin 0; overflow hidden.

We need to ensure the page fills viewport. Use requestAnimationFrame loop for animation of planets.

We'll define an array of planet objects: each has mesh sphere (material maybe MeshStandardMaterial), orbitRadius, orbitSpeed, distance from sun, ring? Not essential.

Define sun: Mesh with SphereGeometry(5, 32,32), MeshBasicMaterial( color 0xffaa00, emissive 0xffaa00). In addition, could add light: PointLight at sun position.

Add ambient light for general.

Implement planets spheres with appropriate sizes: Earth radius 1.5 maybe, color blue/green. We'll also orient them by rotation but not necessary.

Add rotation of orbits: for each frame, angle += speed*deltaTime.

Set time: use clock.getDelta().

Add sun rotation to spin slowly.

Implement local rotation of each planet.

Simulate speeds: Earth speed = 0.02 rad/s, Mars 0.018, Jupiter 0.012, etc.

Define an array:

planets = [
 {name: 'Mercury', radius: 0.5, distance: 8, speed: 0.04, color: 0xaaaaaa},
 {name: 'Venus', radius: 0.7, distance: 10, speed: 0.035, color: 0xffcc66},
 {name: 'Earth', radius: 0.8, distance: 12, speed: 0.03, color: 0x00aaff},
 {name: 'Mars', radius: 0.6, distance: 14, speed: 0.025, color: 0xff6600},
 {name: 'Jupiter', radius: 1.8, distance: 18, speed: 0.02, color: 0xff9966},
 {name: 'Saturn', radius: 1.6, distance: 20, speed: 0.019, color: 0xffff99},
];

Add orbit with Simple: For each planet, maintain angle property. In update loop, angle += speed*deltaTime; compute position relative to sun: x = dist * cos(angle), z = dist * sin(angle); sets mesh.position.set(x,0,z).

Ok.

Also add small 'moon' to Earth? Not necessary. Keep simple.

Now implement render.

Add event listeners: We'll compute radius variable for camera. We'll use 'distance from target'; perhaps variable like camRadius = 60. On wheel, mod camRadius.

Implement simple controls.

Implementation details:

```
let camTheta = Math.PI / 4; // horizontal angle
let camPhi = Math.PI / 4; // vertical
const camRadius = 60;

function updateCameraPos() {
  const x = camRadius * Math.sin(camPhi) * Math.cos(camTheta);
  const z = camRadius * Math.sin(camPhi) * Math.sin(camTheta);
  const y = camRadius * Math.cos(camPhi);
  camera.position.set(x, y, z);
  camera.lookAt(0, 0, 0);
}
```

On mouse events, modify camTheta, camPhi.

In mousedown:

```
isDragging = true;
lastX = event.clientX;
lastY = event.clientY;
```

mousemove when dragging:

```
const dx = event.clientX - lastX;
const dy = event.clientY - lastY;
camTheta -= dx * 0.005;
camPhi -= dy * 0.005;
camPhi = Math.max(0.01, Math.min(Math.PI-0.01, camPhi));
lastX = event.clientX;
lastY = event.clientY;
```

Also add wheel event for distance:

```
camRadius += event.deltaY * 0.1;
camRadius = Math.max(10, Math.min(200, camRadius));
```

We need to handle device orientation? Not necessary.

Finally, on window resize adjust camera aspect and renderer size.

Implement starfield: create 2000 stars.

```
const starGeo = new THREE.BufferGeometry();
const starCount = 20000;
const starPositions = new Float32Array(starCount*3);
for(let i=0;i<starCount;i++) {
  const x = (Math.random() - 0.5) * 2000;
  const y = (Math.random() - 0.5) * 2000;
  const z = (Math.random() - 0.5) * 2000;
  starPositions[i*3] = x;
  starPositions[i*3+1] = y;
  starPositions[i*3+2] = z;
}
starGeo.setAttribute('position', new THREE.BufferAttribute(starPositions,3));
const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size:1, sizeAttenuation: true});
const stars = new THREE.Points(starGeo, starMaterial);
scene.add(stars);
```

Better to also add far background gradient. But we can just use starfield plus canvas background black.

Add ambient light: low intensity.

Add PointLight at sun.

Ok.

Also also optionally use shadow mapping? Not necessary.

We need a quick animation loop using requestAnimationFrame.

We'll write all to index.html. Let's create file. We'll use 'write' tool. Write content accordingly.

Let's confirm that the three.min.js file is present. If we load <script src="three.min.js"></script> it will be found.

Let's build index.html content.

Use DOCTYPE html, head with meta viewport, style to set body margin 0, overflow hidden, background black.

Let's craft.

We'll write the HTML file using write function.

The tool name might be 'write'. Let's use.

Potential issue: The correct tool may be simply 'write' or maybe 'write' function inside namespace functions. We used earlier the tool "write". However earlier we used "write" defined as type ... So we should call "write" not "functions.write". In earlier usage guidelines, we used 'write' and they used 'write' directly. The "you have ..." We need to call correct. Let's call "write" now.{"path":"index.html","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>3D Solar System</title>\n<style>\n    body { margin:0; overflow:hidden; background:black; }\n    canvas { display:block; }\n</style>\n</head>\n<body>\n<script src=\"three.min.js\"></script>\n<script>\n// --- Setup basic scene ---\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 2000);\nconst renderer = new THREE.WebGLRenderer({antialias:true});\nrenderer.setSize(window.innerWidth, window.innerHeight);\nrenderer.setPixelRatio(window.devicePixelRatio);\ndocument.body.appendChild(renderer.domElement);\n\n// --- Lighting ---\nconst ambient = new THREE.AmbientLight(0x222222);\nscene.add(ambient);\nconst sunLight = new THREE.PointLight(0xffffff, 1, 0, 2);\nscene.add(sunLight);\n\n// --- Sun ---\nconst sunGeometry = new THREE.SphereGeometry(5, 32, 32);\nconst sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffaa00, emissive: 0xffaa00 });\nconst sunMesh = new THREE.Mesh(sunGeometry, sunMaterial);\nscene.add(sunMesh);\nsunLight.position.copy(sunMesh.position);\n\n// --- Planets ---\nconst planetData = [\n    { name: 'Mercury', radius: 0.5, distance: 8, speed: 0.04, color: 0xaaaaaa },\n    { name: 'Venus', radius: 0.7, distance: 10, speed: 0.035, color: 0xffcc66 },\n    { name: 'Earth', radius: 0.8, distance: 12, speed: 0.03, color: 0x00aaff },\n    { name: 'Mars', radius: 0.6, distance: 14, speed: 0.025, color: 0xff6600 },\n    { name: 'Jupiter', radius: 1.8, distance: 18, speed: 0.02, color: 0xff9966 },\n    { name: 'Saturn', radius: 1.6, distance: 20, speed: 0.019, color: 0xffff99 },\n];\nconst planets = [];\nplanetData.forEach(p => {\n    const geom = new THREE.SphereGeometry(p.radius, 32, 32);\n    const mat = new THREE.MeshStandardMaterial({ color: p.color });\n    const mesh = new THREE.Mesh(geom, mat);\n    scene.add(mesh);\n    planets.push({ mesh, distance: p.distance, angle: Math.random()*Math.PI*2, speed: p.speed });\n});\n\n// --- Starfield ---\nconst starCount = 20000;\nconst starGeo = new THREE.BufferGeometry();\nconst starPos = new Float32Array(starCount*3);\nfor (let i=0;i<starCount;i++){\n    const x = (Math.random() - 0.5) * 2000;\n    const y = (Math.random() - 0.5) * 2000;\n    const z = (Math.random() - 0.5) * 2000;\n    starPos[i*3] = x;\n    starPos[i*3+1] = y;\n    starPos[i*3+2] = z;\n}\nstarGeo.setAttribute('position', new THREE.BufferAttribute(starPos,3));\nconst starMat = new THREE.PointsMaterial({ color: 0xffffff, size: 1, sizeAttenuation: true });\nconst starField = new THREE.Points(starGeo, starMat);\nscene.add(starField);\n\n// --- Camera Control ---\nlet camRadius = 60;\nlet camTheta = Math.PI / 4;  // azimuthal angle\nlet camPhi = Math.PI / 4;    // polar angle\nconst target = new THREE.Vector3(0,0,0);\n\nfunction updateCamera(){\n    const x = camRadius * Math.sin(camPhi) * Math.cos(camTheta);\n    const z = camRadius * Math.sin(camPhi) * Math.sin(camTheta);\n    const y = camRadius * Math.cos(camPhi);\n    camera.position.set(x,y,z);\n    camera.lookAt(target);\n}\nupdateCamera();\n\nlet isDragging = false;\nlet lastX = 0, lastY = 0;\n\nfunction onMouseDown(e){\n    isDragging = true;\n    lastX = e.clientX;\n    lastY = e.clientY;\n}\nfunction onMouseMove(e){\n    if(!isDragging) return;\n    const dx = e.clientX - lastX;\n    const dy = e.clientY - lastY;\n    camTheta -= dx * 0.005;\n    camPhi   -= dy * 0.005;\n    camPhi = Math.max(0.01, Math.min(Math.PI-0.01, camPhi));\n    lastX = e.clientX;\n    lastY = e.clientY;\n    updateCamera();\n}\nfunction onMouseUp(){ isDragging = false; }\nfunction onWheel(e){\n    camRadius += e.deltaY * 0.01;\n    camRadius = Math.max(20, Math.min(200, camRadius));\n    updateCamera();\n}\ndocument.addEventListener('mousedown', onMouseDown);\ndocument.addEventListener('mousemove', onMouseMove);\ndocument.addEventListener('mouseup', onMouseUp);\ndocument.addEventListener('wheel', onWheel, {passive:false});\n\n// Touch support\n\ndocument.addEventListener('touchstart', e=>{ isDragging=true; lastX=e.touches[0].clientX; lastY=e.touches[0].clientY; });\ndocument.addEventListener('touchmove', e=>{ if(!isDragging) return; const x=e.touches[0].clientX; const y=e.touches[0].clientY; const dx=x-lastX; const dy=y-lastY; camTheta -= dx*0.005; camPhi -= dy*0.005; camPhi=Math.max(0.01,Math.min(Math.PI-0.01,camPhi)); lastX=x; lastY=y; updateCamera(); });\ndocument.addEventListener('touchend',()=>{ isDragging=false; });\n\nwindow.addEventListener('resize', () => {\n    camera.aspect = window.innerWidth/window.innerHeight;\n    camera.updateProjectionMatrix();\n    renderer.setSize(window.innerWidth, window.innerHeight);\n});\n\n// --- Animation ---\nconst clock = new THREE.Clock();\nfunction animate(){\n    const delta = clock.getDelta();\n    // Sun spin\n    sunMesh.rotation.y += delta * 0.1;\n    // Planets orbit\n    planets.forEach(p=>{\n        p.angle += p.speed * delta * 10; // speed adjustment\n        const x = p.distance * Math.cos(p.angle);\n        const z = p.distance * Math.sin(p.angle);\n        p.mesh.position.set(x,0,z);\n        // optional self-rotation\n        p.mesh.rotation.y += delta * 0.5;\n    });\n\n    renderer.render(scene, camera);\n    requestAnimationFrame(animate);\n}\nanimate();\n</script>\n</body>\n</html>\n"}