Rotating icosahedron · seed-2.0-mini

Got it, let's tackle this problem step by step. First, I need to create an index.html file that includes Three.js from the local three.min.js, then build the 3D scene as required.

First, the structure: HTML with a canvas (or let Three.js render to the body), style tag for full screen, then script tag for the JS.

Let's outline what's needed:
1. HTML structure: full screen body, no margins.
2. Load Three.js via the script tag: <script src="three.min.js"></script>
3. Set up the scene, camera, renderer.
4. Create an icosahedron geometry, material that responds to two point lights (different colors, like red and blue maybe).
5. Two point lights: position them.
6. Add a starfield (procedural, so in JS generate points in a sphere, far away, small size).
7. Animation loop: rotate the icosahedron on two axes, move the camera slowly around the object (so camera orbits).
8. Add Pause/Resume and Reset buttons, probably fixed on the screen.
9. Handle window resize: update camera aspect and renderer size.

Wait, the rules say all CSS and JS inline, no external assets, use local three.min.js.

Let's start writing the code for index.html.

First, the HTML boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rotating Icosahedron 3D Scene</title>
    <style>
        body { margin: 0; overflow: hidden; }
        #container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        #controls { position: absolute; bottom: 20px; left: 20px; z-index: 10; }
        button { padding: 8px 16px; margin-right: 8px; }
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="controls">
        <button id="pauseBtn">Pause</button>
        <button id="resetBtn">Reset</button>
    </div>

    <script src="three.min.js"></script>
    <script>
        // All JS here
    </script>
</body>
</html>

Now the JS part inside the script tag:

First, set up scene, camera, renderer. The renderer will be added to the container.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);

Then, create the icosahedron:
const geometry = new THREE.IcosahedronGeometry(1, 0);
const material = new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 100 });
const icosahedron = new THREE.Mesh(geometry, material);
scene.add(icosahedron);

Point lights:
const light1 = new THREE.PointLight(0xff0000, 1, 100);
light1.position.set(5, 5, 5);
scene.add(light1);

const light2 = new THREE.PointLight(0x0000ff, 1, 100);
light2.position.set(-5, -5, 5);
scene.add(light2);

Starfield: create points in a sphere far away.
const starsGeometry = new THREE.BufferGeometry();
const starsCount = 1000;
const positions = new Float32Array(starsCount * 3);
for (let i = 0; i < starsCount * 3; i++) {
    positions[i] = (Math.random() - 0.5) * 2000; // spread out
}
starsGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const starsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 1 });
const stars = new THREE.Points(starsGeometry, starsMaterial);
scene.add(stars);

Camera initial position: camera.position.z = 5;

Animation variables: let isPaused = false; let rotationSpeed = 0.01; let cameraAngle = 0; let cameraRadius = 5;

Then the animation loop:
function animate() {
    requestAnimationFrame(animate);
    if (!isPaused) {
        // Rotate icosahedron on two axes
        icosahedron.rotation.x += rotationSpeed;
        icosahedron.rotation.y += rotationSpeed * 1.5; // different speed for two axes

        // Move camera slowly around the object
        cameraAngle += 0.005;
        camera.position.x = Math.cos(cameraAngle) * cameraRadius;
        camera.position.z = Math.sin(cameraAngle) * cameraRadius;
        camera.lookAt(0, 0, 0); // look at the center
    }
    renderer.render(scene, camera);
}
animate();

Handle window resize:
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

Controls: Pause and Reset buttons.
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');
pauseBtn.addEventListener('click', () => {
    isPaused = !isPaused;
    pauseBtn.textContent = isPaused ? 'Resume' : 'Pause';
});
resetBtn.addEventListener('click', () => {
    isPaused = false;
    pauseBtn.textContent = 'Pause';
    // Reset icosahedron rotation
    icosahedron.rotation.x = 0;
    icosahedron.rotation.y = 0;
    // Reset camera
    cameraAngle = 0;
    camera.position.set(0, 0, cameraRadius);
    camera.lookAt(0, 0, 0);
});

Wait, does the material respond to the lights? Yes, MeshPhongMaterial needs lights, which we have two point lights, so that should work. The icosahedron size: initial radius 1, so it's visible. The lights are at (5,5,5) and (-5,-5,5), so they cover the object.

Starfield: 1000 points, spread out, size 1, so it's a subtle background.

Check all requirements: full screen, icosahedron, two point lights different colors, rotating two axes, camera moving, starfield, pause/resume, reset, resize handling, uses local three.min.js.

Now, put all this together into index.html. Let's write the full content using write.

Great, now the index.html is written. Next, I need to verify by running the browser tools, but wait, the task says to run the application and inspect. Wait, the available tools: there's a browser tool. Let me use the browser to check if the page loads correctly, the animation works, controls work, etc.

So first, use browser action: reload to load the page, then maybe inspect, or screenshot to see. Let's do browser action "reload" first.

Okay, the scene is loading. The icosahedron is there, but wait, it's all red? Oh because the two point lights: red and blue. Wait, maybe the blue light is behind? Or maybe I need to check. Let me test the pause functionality first. Let's click the pause button to see if it freezes. Also, check reset. Let me simulate clicks.

Oops, the viewport is 1200x800. The buttons are at bottom left, so y should be around 770. Let me correct that.

Good, the pause/resume works. Let's test reset now. Click the reset button to check if it restores the original poses.

Great! Let's check: when I clicked Reset, the icosahedron went back to initial position (redish angles) and the camera is back in front. Pause works (motion stops), resume continues. The icosahedron is rotating on two axes, camera orbits slowly, starfield is there, colored lights (red and blue) make the icosahedron's faces have different colors. All required functionality is there. Let's confirm that everything is correct: the file is written, the scene works. Let's just check if the browser shows the animation correctly, which it does. The warnings are just about WebGL, which are normal. The controls work. All required behaviors are met. So the final index.html is correct.

Final check complete. The application is working correctly as per all the requirements: rotating icosahedron with colored lights, camera orbit, starfield, pause/resume, reset, responsive. The file is saved.