Rotating icosahedron · gemma-4-26b-a4b-it

The objective is to create a single-file `index.html` containing a 3D scene with a rotating icosahedron, two point lights, a procedural starfield, and UI controls (Pause/Resume, Reset).

    *   `index.html`: All-in-one (HTML, CSS, JS).
    *   `three.min.js`: Local file (provided in the environment).

    *   Full-screen 3D scene.
    *   Rotating icosahedron (continuous rotation about two axes).
    *   Two point lights (different colors).
    *   Camera moving slowly around the object.
    *   Procedural starfield.
    *   UI: Pause/Resume, Reset.
    *   Resize handling (window resize).
    *   No external assets/CDNs.
    *   Use `three.min.js`.

    *   *HTML*: `<div id="ui">...</div>`, `<canvas id="canvas">`.
    *   *CSS*: Full screen, absolute positioning for UI, styling for buttons.
    *   *JS*:
        *   Initialize Three.js scene, camera, renderer.
        *   Create icosahedron (geometry + material).
        *   Create point lights (positioned at different angles).
        *   Create starfield (using `Points` with a simple geometry and a custom material/vertex shader if needed, but a simple `Points` with `BufferGeometry` and `PointsMaterial` should suffice).
        *   Animation loop:
            *   Update rotation.
            *   Update camera position.
            *   Handle Pause/Resume state.
        *   Event listeners for resize and UI buttons.

    *   Wait, I should check if `three.min.js` exists first.

    *   *Starfield*: I can use `THREE.BufferGeometry` with random points and a `THREE.PointsMaterial`.
    *   *Lighting*: `THREE.PointLight(color, intensity, distance)`.
    *   *Camera*: `THREE.PerspectiveCamera`.
    *   *Animation*: `requestAnimationFrame`.

    *   `initialState` object to store object rotation and camera position.
    *   `isPaused` flag.
    *   `reset()` function to restore `initialState`.

    *   `window.addEventListener('resize',...)` to update `camera.aspect` and `renderer.setSize`.

    *   Create `index.html`.
    *   Load `three.min.js`.
    *   Set up scene.
    *   Add icosahedron.
    *   Add lights.
    *   Add starfield.
    *   Add controls.
    *   Test it.

    *   *Check if `three.min.js` exists.*
    *   *Write `index.html`.*
    *   *Run browser.*

Let's start by checking the directory.

Okay, `three.min.js` is present. I will now write `index.html`.

Plan for `index.html`:
- HTML:
  - `div#controls` with "Pause" and "Reset" buttons.
- CSS:
  - Body: no margin, overflow hidden.
  - Canvas: block, full screen.
  - Controls: top-left, absolute, z-index.
- JS:
  - Import `three.min.js`.
  - Scene setup.
  - Icosahedron (Wireframe + Solid material).
  - Two point lights (Red/Blue).
  - Starfield (Points).
  - Animation loop.
  - Resize handling.
  - UI interaction.

Let's refine the camera movement:
- `camera.position.x = Math.cos(time * 0.1) * 10;`
- `camera.position.z = Math.sin(time * 0.1) * 10;`
- `camera.lookAt(0, 0, 0);`

Wait, the prompt says "Independently move the camera slowly around the object while keeping it in view".
And "Rotate the object continuously about at least two axes".

Let's write the code.

Now I need to verify the functionality using the `browser` tool.
I'll check:
1.  The icosahedron is visible.
2.  The rotation is happening on at least two axes.
3.  The camera is moving.
4.  The lights are working (colors visible on the object).
5.  The starfield is visible.
6.  Pause/Resume works.
7.  Reset works.

Let's launch the browser.

The user wants to build a 3D scene with a rotating icosahedron using `three.min.js`.
The scene should include:
- A rotating icosahedron.
- Two point lights of different colors.
- A rotating camera.
- A procedural starfield.
- Pause/Resume and Reset buttons.
- Full-screen responsive design.
- All in one `index.html` file.

I'll start by checking if `three.min.js` exists in the current directory.