We need to build a single-page web app in index.html, using three.min.js already present in current directory. Need to load it with <script src="three.min.js"></script>. Then write CSS and JS inside style and script tags. Must be self-contained. No external resources.

We need a 3D solar system: sun and orbiting planets at varied speeds and sizes, orbit-drag camera controls, and a starfield.

We'll need to create a scene, camera, renderer, add OrbitControls (but need to include OrbitControls from three examples? Not provided. We could implement simple drag controls ourselves? Or maybe three.min.js includes OrbitControls? Typically three.js core doesn't include OrbitControls; it's in examples/jsm/controls/OrbitControls.js. However we only have three.min.js provided. Possibly they expect us to use three.min.js which might be a full build that includes OrbitControls? Actually three.min.js from three.js repository is just the core. OrbitControls is separate. But we can implement simple trackball controls ourselves or use PointerLockControls? But we can approximate with simple mouse drag to rotate camera.

Alternatively, we can assume that three.min.js includes OrbitControls (maybe they bundled). Safer to implement simple orbit-drag camera: on mouse down, track movement, rotate camera around a target.

We'll also need starfield: could be a bunch of particles or a sprite texture. Since we cannot load external textures, we can create small white spheres or use Points with random positions.

Plan:

- HTML with <div id="container"></div> for renderer.
- CSS: body margin 0, overflow hidden, background black.
- JS: init three.js scene, perspective camera, WebGLRenderer.
- Add sun: sphere with yellow texture? We can use MeshBasicMaterial with color.
- Planets: array of objects with distance, size, speed, color.
- Create each planet as sphere mesh, add to scene, also maybe create orbit rings? Not required.
- Animation loop: update planet positions based on angle += speed * delta.
- Camera controls: implement orbit-drag: on mouse down, store start coords, on mouse move, rotate camera around target (maybe using spherical coordinates). Use mouse drag to change theta and phi.
- Starfield: create a BufferGeometry with many vertices (e.g., 5000) random positions within a cube, assign Points material with white color.

We need to ensure we use three.min.js global THREE.

Let's first check if three.min.js exists. Use bash to list files.

Now we have three.min.js. We'll create index.html.

We need to write the file. Use write tool.

Let's craft the HTML.

We'll include script src="three.min.js". Then style, then script.

We'll write the JS.

Implementation details:

- Scene: new THREE.Scene()
- Camera: new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); position z = 150.
- Renderer: new THREE.WebGLRenderer({antialias:true}); setSize; append to container.

- Orbit-drag controls:
   variables: isDragging = false; previousMouseX, previousMouseY;
   spherical coordinates: theta (horizontal angle), phi (vertical angle), radius.
   On mousedown: set isDragging true, store clientX/Y.
   On mousemove: if dragging, compute delta, update theta += deltaX * 0.005, phi += deltaY * 0.005 (clamp phi).
   On mouseup: set false.
   On wheel: adjust radius (zoom).
   Update camera position each frame: 
        camera.position.x = target.x + radius * Math.sin(phi) * Math.cos(theta);
        camera.position.y = target.y + radius * Math.sin(phi) * Math.sin(theta);
        camera.position.z = target.z + radius * Math.cos(phi);
        camera.lookAt(target);
   target = new THREE.Vector3(0,0,0) (sun).

- Sun: sphere geometry radius 20, mesh with MeshBasicMaterial color 0xffdd00.

- Planets: define array:
   const planetsData = [
      {name: "Mercury", size: 2, distance: 40, speed: 0.04, color: 0x888888},
      {name: "Venus", size: 3, distance: 55, speed: 0.03, color: 0xccaa66},
      {name: "Earth", size: 3.5, distance: 70, speed: 0.02, color: 0x2233ff},
      {name: "Mars", size: 2.5, distance: 85, speed: 0.015, color: 0xff2222},
      {name: "Jupiter", size: 8, distance: 120, speed: 0.008, color: 0xcc8844},
      {name: "Saturn", size: 7, distance: 150, speed: 0.006, color: 0xeeaa22},
      {name: "Uranus", size: 4, distance: 180, speed: 0.004, color: 0x22ccff},
      {name: "Neptune", size: 4, distance: 200, speed: 0.002, color: 0x2222ff}
   ];
   For each, create sphere geometry with size, material color, add to scene, store object with mesh, distance, speed, angle (init random 0-2π).

- Starfield: const starCount = 5000; const starGeometry = new THREE.BufferGeometry(); const positions = new Float32Array(starCount * 3); for i: positions[i*3] = (Math.random()-0.5)*2000; etc. starGeometry.setAttribute('position', new THREE.BufferAttribute(positions,3)); const starMaterial = new THREE.PointsMaterial({color: 0xffffff, size: 1, sizeAttenuation:true}); const stars = new THREE.Points(starGeometry, starMaterial); scene.add(stars);

- Animation loop: function animate(){ requestAnimationFrame(animate); update planet positions: mesh.position.x = distance * Math.cos(angle); mesh.position.z = distance * Math.sin(angle); angle += speed * delta; (assuming orbit in XZ plane). Renderer.render(scene, camera); }

- Handle window resize.

Now write to index.html.

Let's do it.

We have written index.html. Should verify it's correct and works. Could do a quick test by opening? Not needed but we can check that file exists and content is as expected. Let's do a quick read to ensure no missing tags.

The file seems fine. We should ensure that we didn't miss closing tags. Let's view the tail.

All good. The file is complete.

Now we need to ensure that the task is complete: "End with index.html present." It is.

We can optionally run a quick test to ensure no syntax errors, but we can't actually run a browser. However we can run node? Not needed.

Thus we can consider the task done.

We'll respond with final.