Rotating icosahedron · hy4

We need build index.html. Need inspect files. Need use browser tools. Need likely need robust implementation with test hooks perhaps internal global state for inspect. Need think through requirements and verification. Need use three.min.js plain script exact. Need likely version, check global API. Let's list.

Version r? Need detect.

Likely r131 maybe. Need design satisfying. Need perhaps use MeshPhongMaterial or MeshStandardMaterial responding to two point lights different colors. Point lights e.g. magenta and cyan placed either side. Need visible colored lighting distinguish. Use MeshStandardMaterial with roughness .45 metalness .1 perhaps enough. Use flatShading true to make facets obvious. IcosahedronGeometry radius 1.5 detail 0 or maybe 1? Rotating icosahedron centered. Point lights different colors; could also include tiny emissive spheres to mark lights? requirement "Keep lights, object, and stars distinguishable without external textures." Means likely visually distinguish lights perhaps use small emissive spheres plus helper? We should show colored point light markers as small glowing spheres near edges / behind object perhaps. Need be careful "lights, object, stars distinguishable". Could use visible emissive spheres representing point lights, with maybe larger translucent halos using sprites generated procedurally? But no external textures. Core only. Could create small emissive spheres and thin rings or lens via CanvasTexture (procedural texture is allowed? "without external textures" means procedural texture okay but perhaps avoid entirely). Use colored emissive sphere with additive transparent halo meshes (sphere with BackSide?). Could create PointLight plus small sphere marker (MeshBasicMaterial) at light positions; and perhaps a larger sphere with transparent MeshBasicMaterial, depthWrite false. Use no external asset. Stars: subtle procedural starfield behind object. Could generate BufferGeometry Points with vertices in a spherical shell behind object (or broad box with z negative) and PointsMaterial with vertexColors, sizes. Need random deterministic seeded RNG so consistent reset and screenshot. Keep subtle and behind object. Camera moves around object while looking at origin; stars perhaps shell around stage at radius 20-50. Need ensure "behind object" and perspective make colors. Could use a static large spherical starfield, mostly distributed on back hemisphere relative to initial camera. Or a planar field at z=-15 plus camera orbit modestly. Camera slowly around object keeping it in view. Camera can orbit from initial angle e.g. initial position (0,0,7), then azimuth ±0.4 rad, elevation ±0.2. Stars at z=-16 in a broad plane, would remain behind object from camera orbit. Could create randomized stars in a rectangle x/y [-20,20], z from -25 to -12, with size maybe 0.03-0.08, subtle colors. Points material with
sizeAttenuation true or false. Need possibly different brightness, use vertexColors and opacity .7. Since point coordinates and camera orbit slight, okay.

Need buttons Pause/Resume and Reset. Pause freezes both object and camera animation. Reset restores initial transforms. Ambiguity: Reset should also resume? Not specified. Could restore initial transforms and reset clock/animation time to zero, perhaps preserve paused/running state? Common reset likely set initial transforms and resume maybe but pause state perhaps preserve. Test likely clicks pause, then reset and compares; if reset preserves paused state, fine. Could design reset to restore initial transforms and internal elapsed time to 0, while keep current pause state; perhaps ensure animation stays frozen if paused. Need provide UI and possibly semantic status. Better perhaps reset restores initial transforms and sets animation running? Most standard reset means start over, but requirement only transforms. To allow "reset and compare ... initial poses", if immediately resumes, pose moves after click by time of screenshot, not exact. So preserving paused state is ideal if reset after pause. But if reset while running, it would move right after. Could set reset to pause? Hmm. We can make Reset restore initial transforms and set paused=true? Then clearly compare exact initial poses but may be surprising. Could have reset pause always, so user can compare, then Resume. But requirement only Reset restore initial transforms, not necessarily animation status. Better expose state in UI and custom verification hooks. We can have a "Reset" that resets transforms then keeps current pause state; if running, next frame continues. To inspect exact pose, screenshot immediately may occur after frame. But browser verification can read internal state. Could add a little `window.__sceneState` API with getPose etc, perhaps useful for automated checks. Avoid overengineering but helpful. Need perhaps browser tool can inspect DOM/console but likely not execute arbitrary JS? Browser action inspect perhaps DOM and console; maybe screenshot. Could use data attributes or visible HUD state updated each frame, e.g. `data-paused`, `data-object-x`, etc. Also define `window.sceneTest` with methods to get pose and perhaps set time. But actual behavior via buttons.

Need full-screen scene, no scroll, overlay UI. Need handle resize. Need renderer setPixelRatio maybe min(devicePixelRatio, 2), setSize. Camera aspect = innerWidth/innerHeight and updateProjectionMatrix. Need full-screen canvas fixed. Need render loop via requestAnimationFrame. Need time deltas to avoid jumps; pause must freeze both object and camera. Use simulation `elapsed` advancing only if !paused using delta. Then deterministic transforms based on elapsed. Need camera orbit and maybe camera slight bob while looking at origin. Initial camera position e.g. (0, 0.2, 7.5) maybe if camera lookAt origin then initial camera has rotation not zero. "initial transforms" could be object rotation and camera position/rotation/quaternion. Need maintain exact initial. Set camera at initial position and lookAt origin. Determine initial quaternion after lookAt. On reset set position.copy(initialCameraPosition), quaternion.copy(initialCameraQuaternion), perhaps update matrix. Object rotation set (0.15, 0, 0?) Need exact initial orientation. Could use quaternion initial maybe set rotation (0.25, 0.35, 0.1). Rotation continuously about at least two axes: set `rotation.x = initial.x + elapsed*0.35`, `rotation.y = initial.y + elapsed*0.52`, perhaps z = initial.z + elapsed*0.17. Need uses Euler order and deterministic. "Rotate object continuously about at least two axes" yes. Maybe use quaternion with incremental rotations about world X/Y to ensure independent axes, but Euler x/y/z is visibly multi-axis and straightforward. Use rotation.x/y, maybe z. Need clear front facets and colored lighting. Could use IcosahedronGeometry(1.55, 1) with flatShading? Detail 1 creates subdivided icosahedron with 80 faces, still maybe recognizable but rounded-ish. For true icosahedron use detail 0 (20 faces). MeshPhongMaterial spec shininess, flatShading true. With point lights and radius. Could perhaps use MeshStandardMaterial({color:0xaaaeba, roughness:0.35, metalness:0.15, flatShading:true}). Need ambient light low. Point lights at e.g. (-3.4,2.4,3.2) warm coral/magenta and (3.4,-1.8,2.6) cyan/blue, both strong, with distance/decay appropriate for Three r131 physically correct? In r131, renderer.physicallyCorrectLights default false, intensity 2 maybe enough. PointLight(color, intensity=2.2, distance=18, decay=2). Need maybe add colored surfaces/point markers. Could set light positions slowly? Not required. Need lights visibly respond. Could add subtle neutral ambient to preserve form but not wash out. AmbientLight(0x121a2a, 0.45). Maybe use light markers near positions, but if lights are in front and off to sides, markers can be visible around object. Need details.

Let's identify three revision.

Minified variable e maybe `"131"`. Could use browser later to inspect THREE.REVISION. Need know outputEncoding maybe `renderer.outputEncoding = THREE.sRGBEncoding`; supported. Maybe use `THREE.ColorManagement` not in old version. Keep simple.

Need consider functionality of browser tool: likely Chromium with screenshots and DOM inspect. We can call browser reload, inspect, screenshot, click, motion perhaps. Need use after write.

Let's plan UI:
- body margin 0, overflow hidden, background #040713, color #eef3ff, font system.
- #scene canvas appended to #stage or renderer.domElement directly. full viewport.
- `#controls` fixed top/left perhaps bottom center; glass panel. Buttons with IDs pauseButton and resetButton, keyboard shortcuts optional.
- A small title/legend perhaps top left: "Prismatic Icosahedron", hints colored dots "rose key / cyan rim" maybe. But don't clutter. Could show state indicator maybe time. Need make lights distinguishable maybe provide labels? The light markers themselves colors. Could add legend with two colored swatches matching lights. Stars subtle.
- Buttons accessible, hover/focus, `aria-pressed`. Pause/Resume button text changes.
- status `#status` with "Running"/"Paused" and `#clock` maybe elapsed time, updated each frame. Could expose `data-*` attributes on body for pose. For verification perhaps a hidden `#telemetry` element with text containing rotations and camera coords. Could be visible as small monospace panel bottom right; useful. But visual styling unspecified. Maybe show compact "Simulation t: ...". Need expose exact pose values perhaps not necessary but supports checking. We can set `window.__icosahedronScene` object with `getState()` that returns paused, elapsed, object rotation/position/quaternion, camera position/quaternion, initial pose. This is safe. Also set `document.body.dataset` values, maybe easier via browser inspect. Could hidden `pre` with JSON state. We can add `<pre id="telemetry" aria-hidden="true"></pre>` hidden via CSS; browser inspect might see DOM text. But updating hidden DOM each frame okay. We can use a `<div id="diagnostics">` with `data-state`, `data-rotation-x`, etc. Need not be visible. Better explicit global debug API. Browser `inspect` perhaps can evaluate no custom JS? Tool description "inspect DOM/console" maybe does snapshots; no evaluate field. Could click coordinates, screenshot, motion frames. It may report computed DOM. We can add visible telemetry small bottom right so screenshots can show numeric readings, but not required. Could be tasteful as HUD. Maybe show "t 00:00.00 • orbit 0.0°" but not exact poses. For checking initial vs reset we can compare screenshots or data attributes. A hidden telemetry won't show screenshot but browser inspect may output. We can use DOM attributes on `<main id="app" data-paused="false" data-object-rotation="..." data-camera-position="...">`. Browser inspect likely returns DOM tree including attributes, so good.

Need perhaps initial screenshot with no animation elapsed (render once before RAF), then at several moments tool's `motion` likely captures frames. Need determine browser tool behavior. We'll use.

Scene details:
- Renderer antialias true, alpha false. setClearColor(0x030611, 1). Maybe fog? not needed.
- Camera PerspectiveCamera(48, aspect, 0.1, 120), position (0, 0.25, 7). lookAt(0,0,0). camera movement around object: use camera angle from elapsed: `azimuth = 0.38 * Math.sin(elapsed * 0.22)`, `elevation = 0.18 + 0.14 * Math.sin(elapsed * 0.17 + 0.7)`, radius = 7.2 + 0.22*Math.sin(elapsed*0.13)`. Position x = radius*sin(azimuth)*cos(elevation), y = radius*sin(elevation), z = radius*cos(azimuth)*cos(elevation). Initial angle at t=0: azimuth 0, elevation = 0.18 + 0.14*sin(0.7)=0.2702, giving position (0,1.92,6.94), not initial (0,0.25,7). We can set initial camera position from orbit function at t=0 and lookAt origin. That's fine, though object high-ish view. Want initial centered. We can choose elevation base 0.04 and amplitude 0.14 with sin at t=0 =0 by no phase: `elevation = 0.04 + 0.14 * Math.sin(elapsed*0.17)`; azimuth = 0.38*Math.sin(elapsed*0.22), radius = 7.2 + .25*sin(elapsed*.13). At t=0: (0, 0.288, 7.194), lookAt origin. Nice. Camera movement about both azimuth/elevation/radius, but "slowly around object" at angular speed max derivative 0.38*0.22=0.084 rad/s, so over 10s ~0.6 rad. good. Camera always lookAt(0,0,0). Object centered. Need maybe leave camera up default.

Could also rotate light markers maybe stars no. Need colored lighting realize from camera all sides. Put lights at positions relative to world: left/front top warm (e.g. #ff3b8d) and right/front lower cyan (#35d7ff). If camera orbits up to 0.38 rad (22°), still light positions in front. To make colored lighting obvious, use strong point lights with decay=1? In older Three r131 point lights intensity based on distance and decay. MeshStandardMaterial with base color maybe 0xb8c1d9, roughness .42, metalness .12. PointLight intensity maybe 3.4 and 2.8, distance 12, decay=1.5. The lights at (-3.4,2.0,3.5), (3.4,-1.8,3.0), distance ~5 from object so attenuation maybe significant with decay 2. For non-physically correct lights, attenuation formula maybe `1 / max(pow(lightDistance, decay), .01)` times something? Need check r131 shader. With decay 2 and distance 12, attenuation = pow(saturate(1 - pow(distance/cutoff,4)),2) / max(pow(distance, decay), 0.01). At d=5, 1/25 = .04; intensity maybe 30 needed. In old three, PointLight intensity default 1 with distance 0 results no attenuation? Actually getDistanceAttenuation uses cutoff and `pow(saturate(-lightDistance/cutoffDistance + 1.0), decayExponent)` when cutoff > 0, not physically correct? Need verify. Could set distance=0 and decay=1 maybe then no attenuation but point light direction still. Yet intensity perhaps strong. Let's inspect minified chunk or use simpler known behavior: Typical Three.js examples use `new THREE.PointLight(0xff0000, 1, 100)` with MeshPhongMaterial and works. In r131, point light intensity likely okay at distance 100. For near position 3 units, intensity 2 bright. Could set distance 0, decay 1 and intensity 2.2. MeshPhong uses direct lighting with no attenuation if distance=0? Let's see source. Could instead use `MeshPhongMaterial` with `shininess: 55, specular: 0xffffff, flatShading:true`, plus point lights. It visibly responds to colors (diffuse and specular). We'll use distance 18, decay 1 maybe. Need possibly renderer.outputEncoding sRGB to get right colors. Use `THREE.sRGBEncoding` if available.

Need perhaps support `THREE.PointLight` and shadow? no. Need add small emissive spheres:
```
function addLightMarker(light, color) {
 const group = new THREE.Group();
 const core = new THREE.Mesh(new THREE.SphereGeometry(0.07,16,12), new THREE.MeshBasicMaterial({color, transparent: true, opacity:1}));
 const halo = new THREE.Mesh(new THREE.SphereGeometry(0.17,16,12), new THREE.MeshBasicMaterial({color, transparent:true, opacity:0.16, blending:THREE.AdditiveBlending, depthWrite:false}));
 group.add(core,halo); group.position.copy(light.position); scene.add(group);
}
```
But sphere markers could be behind object if z=3? Camera z=7, so markers in front of object and around side, visible. Need ensure they don't overlap object edges. At x ±3.3, y ±1.8, radius .1; likely clear. Add thin orbital rings around markers? Maybe no. Could create small colored "bulb" using `SphereGeometry` plus a few concentric transparent spheres (0.13, .23, .34) additive, depthWrite false. This gives a glow without textures. Keep lights distinguishable from stars by larger size, distinct warm/cyan colors, and maybe halo. Need perhaps mark added light marker groups as not affected by lights because MeshBasicMaterial. Good.

Need starfield:
```
const starCount = 700;
const positions = new Float32Array(count*3);
const colors = new Float32Array...
const sizes? PointsMaterial has global size, but can vary via per-point color brightness; no per-point size in core PointsMaterial. Could make multiple Points groups with different sizes. Use 3 layers:
  - far small: 650 points, size .035, color dim white/blue
  - medium: 90 points, size .06
  - bright sparse: 30 points, size .095
Positions on rectangular plane/slab with x [-18,18], y[-12,12], z[-14,-30] maybe. Need convert perspective: camera at z=7, plane z=-18 => distance 25. FOV 48, at 25 units visible height 22.3, width ~40 for 16:9. So x [-24,24], y[-13,13] enough. Use x [-24,24], y[-14,14], z [-15,-35]. With camera orbit slight, fine. Need stars behind object: z < -3. Use depthTest true, depthWrite false. PointsMaterial sizeAttenuation true gives points smaller with distance. If size in world units .08 at 25 distance, pixel size = .08 / (2*25*tan24°)*800 ≈ 1.44 px. Need maybe .16 for 3px. Far points .10 = 1.8px, medium .18 = 3.2px, bright .3 = 5.4px. Hmm. Could use sizeAttenuation false with sizes in pixels (1,2,2.8) but Three's non-attenuated points size maybe fixed. Use three separate Points with `size: 1.4, 2.0, 3.0` and sizeAttenuation:false; subtle. Need could be deterministic. PointsMaterial `vertexColors: true`, `transparent:true`, `opacity` maybe .65, `depthWrite:false`, fog false. With sizeAttenuation false, stars remain stable relative to screen, but camera movement gives parallax because geometry positions rotate via perspective. Good. `size` values are pixels. Color values per vertex, but in old Three, vertexColors with linear/sRGB? We set colors from THREE.Color and copy to array; output encoded. Nice.
- Need perhaps avoid stars center? They are behind object and object occludes (depth test). Fine.
- Add maybe background gradient via CSS? Renderer clear color dark, and maybe procedural large plane with ShaderMaterial? Could create radial gradient via CanvasTexture (procedural) but no external textures; not necessary. Could use scene.background as a Color. Need maybe visually appealing: create a large sphere with vertex colors or a plane with ShaderMaterial gradient. But core THREE only. Could use `THREE.Scene.background = new THREE.Color(0x030511)` and CSS behind. No need.
- Add subtle grid? not required and could distract.

Need object perhaps wireframe overlay to distinguish facets. Use a second mesh with `THREE.EdgesGeometry(geometry)` and `LineBasicMaterial({color:0xc9d8ff, transparent:true, opacity:0.25})` attached to same group. But if detail 0, edges highlight icosahedron. Need rotate group rather than mesh? If group holds mesh + edge lines, group rotation changes both. Requirement "Rotate the object" yes group can be object. Could set mesh rotation and edges as child of mesh. Better:
```
const geometry = new THREE.IcosahedronGeometry(1.65, 0);
const mesh = new THREE.Mesh(geometry, material);
const wire = new THREE.LineSegments(new THREE.EdgesGeometry(geometry), lineMat);
mesh.add(wire);
scene.add(mesh);
```
EdgesGeometry available. Need line depth maybe with polygonOffset? Could z-fight. Set material depthTest true and `wire.scale.setScalar(1.003)` to avoid. Since wire child of mesh and mesh scale unaffected. Add subtle edges in light neutral color. Great. Maybe add an inner glow or transparent polyhedron? Not necessary.

Could use `MeshStandardMaterial` with `flatShading:true`, `roughness:0.38`, `metalness:0.15`; two lights. To ensure both colors visible, perhaps assign base color near-white. Add a faint AmbientLight(0x4c5b80, 0.2) and maybe HemisphereLight(0x1d345e,0x080b15,0.35) not point lights but requirement "material visibly responds to two point lights of different colors." Additional ambient okay. Use AmbientLight low. Could also add small white specular. Standard material with metalness might depend on environment for reflections; use MeshPhongMaterial more reliable. `MeshPhongMaterial({color:0xb9c3d6, specular:0xffffff, shininess:70, flatShading:true})`. Point lights color tint diffuse; specular highlights white-ish perhaps colored depending light. Use strong lights. Let's understand three.js r131 color output with outputEncoding. `MeshPhongMaterial` direct lighting:
```
reflectedLight.directDiffuse += irradiance * BRDF_Lambert(diffuseColor)
```
irradiance = getPointLightInfo().color; pointLight.color intensity. So colored. Good. Use `emissive: 0x05070e` minimal.

Could add a small secondary object? Not required. Keep focused.

Need camera orbit independent of object animation. Both driven by same `elapsed` but different frequencies. "Independently move camera slowly around object" perhaps means separate from object rotation, not parented. We compute separately. Good. Pause freezes both because elapsed doesn't increment. Need use frame delta cap to avoid huge jump and reset. Need perhaps requestAnimationFrame still runs when paused to allow UI and render but no transform changes. Requirement freeze both animations; rendering same pose okay. Could avoid re-render when paused after one frame, but no need. Need set `lastTime = performance.now()` each frame even while paused. On resume, no time jump. Need robust:
```
let lastFrame = performance.now();
let elapsed = 0;
function animate(now) {
 requestAnimationFrame(animate);
 const dt = Math.min((now-lastFrame)/1000, 0.05);
 lastFrame = now;
 if (!paused) elapsed += dt;
 updateScene(elapsed);
 renderer.render(...)
 updateTelemetry maybe throttle to 10Hz
}
```
Pause click sets paused and lastFrame=performance.now(); button text. Reset:
```
elapsed=0;
paused maybe maintain; lastFrame=performance.now();
updateScene(0);
renderer.render(...)
updateTelemetry(true)
```
Initial transforms captured:
```
camera.position.copy(initialCameraPos);
camera.quaternion.copy(initialCameraQuat);
camera.updateMatrixWorld();
```
But `updateScene(0)` computes camera pos via formula and lookAt origin; equivalent to initial. Need capture after initial `updateScene(0)`. For object, `object.rotation.set(initialX...); object.updateMatrixWorld()`.
```
const initial = {
 rotation: object.rotation.clone(),
 position: object.position.clone(),
 scale: object.scale.clone(),
 cameraPosition: camera.position.clone(),
 cameraQuaternion: camera.quaternion.clone()
}
```
On reset set exactly these, not recompute maybe. Need calling `camera.lookAt(0,0,0)` after copy could alter quaternion minimally but consistent. Use copy exact. `camera.updateMatrixWorld(true)` and object update. Then if running, next frame with elapsed >0 will move. If paused, exact. We can have Reset also set `paused = true`? Let's think verification likely from a script using DOM and screenshots, maybe clicks reset after pause, then compares object and camera with initial poses. If it resets while paused (they may click pause then reset), preserving paused works. If reset while running, they might click reset and screenshot quickly; slight movement. Could design reset to always restore initial transforms and set paused=true, with button prompt "Reset" and status "Paused at start". Then Resume available. But requirement might expect reset to "restore initial transforms" only, not necessarily start running; a paused reset is valid. Yet typical reset might be expected to resume from initial. We can perhaps implement reset with a hold period: set elapsed=0 and paused=true so pose exact regardless; user can Resume. That's arguably "reset" meaning return to initial pose and pause. But if user clicks reset while running, animation stops unexpectedly. Could mention in tooltip "Reset to initial pose (pauses)" perhaps. Hmm.

Alternative: `Reset` sets elapsed=0, preserves running state, but also sets `holdUntil = performance.now()+800` during which `elapsed` stays 0; gives enough time to compare while still visually "running" status. But that's hidden weirdness. Could define reset to restore initial transforms, set paused to true only if it was paused; if running start from t=0. Automated verification likely can use global state to sample immediately maybe. But robust browsing screenshot may have slight movement. We can add a `data-pose` updating and browser inspect. Need not overcomplicate.

Could implement reset with toggle behavior: clicked once restores pose and pauses. Pause/Resume button then says "Resume". This explicitly makes comparison easy. But user didn't ask that reset should pause. It might be viewed as a regression if expected running after reset. Wording "Pause freezes both object and camera animation; Reset restores their initial transforms." It separates concerns: pause state likely should not be changed by reset. So preserve pause state is safest semantics. To verify initial pose while running, we can use internal state and maybe an exact render at click. We'll likely check via global API with browser perhaps. We can also expose a `Reset` that restores exact initial transforms and zeroes internal simulation time; if running, it continues from initial pose. That's correct. We'll preserve paused state. To compare after pause, pause first then reset. Browser testing can do that. Need maybe status shows "Paused" and t=0.00, making it clear.

Need perhaps support keyboard: Space toggles pause, R resets, prevent default for buttons? Nice but not required. Could add `window.addEventListener('keydown')` but avoid interfering with button focus. Good.

Need high-DPI. `renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));`
Handling resize:
```
function resize(){
 const w=window.innerWidth,h=window.innerHeight;
 camera.aspect=w/h;
 camera.updateProjectionMatrix();
 renderer.setPixelRatio(...);
 renderer.setSize(w,h,false);
}
```
Canvas style width 100%, height 100%; initial setSize. WebGL renderer uses canvas width/height. Need maybe if no WebGL? Could gracefully show message. Three.WebGLRenderer creation should work in browser tool. If context unavailable, catch and show error. But no need maybe. Could include fallback to show "WebGL unavailable". Yet requirement full-screen 3D scene. Browser likely supports software WebGL. Need maybe browser tool can render. We'll test.

Need procedural starfield perhaps use seeded RNG:
```
function mulberry32(a){return function(){a|=0;...}}
const rand=mulberry32(0x1C0SA...);
function createStarLayer(count,size,opacity,bright) {
 let pos=[], col=[];
 for... x=(rand()*2-1)*28; y=(...)*16; z=-12-rand()*28;
 // avoid too close to center? Actually behind object no need.
 const tint = rand();
 const color = new THREE.Color().setHSL(0.58+..., 0.15..., 0.55+...);
 color.toArray(col,i*3);
 const g=new THREE.BufferGeometry();
 g.setAttribute('position', new THREE.Float32BufferAttribute(pos,3));
 g.setAttribute('color', new THREE.Float32BufferAttribute(col,3));
 const m=new THREE.PointsMaterial({size, sizeAttenuation:false, vertexColors:true, transparent:true, opacity, depthWrite:false, blending:THREE.AdditiveBlending});
 const stars=new THREE.Points(g,m);
 scene.add(stars)
}
```
Need ensure stars behind object from camera orbit. Camera z around 7, star z -12 to -40. yes. x/y spread wide enough. With FOV 48 and at z=-12 distance 19, visible width for 1200x800 = 2*19*tan24°*1.5 = 25.4, so x ±28 covers. At z=-40 distance 47, visible width =62.8, x ±28 leaves edges dark. Could populate x based on depth to fill frustum: `span = (cameraZ - z)*tan(fov/2)*aspect*1.2`, but aspect changes on resize; could just x ±45, y ±30 with density lower. At z=-12, many points outside viewport, effectively fewer stars. Could use a large sphere shell around origin instead, but then stars may be in front of object and camera. "behind object" can still be world sphere with z negative only. We can make stars in a "backdrop slab" with positions scaled by distance: for each star with random depth z, choose x,y within a normalized frustum at that depth:
```
const distance = 7 - z;
const halfY = distance * Math.tan(THREE.MathUtils.degToRad(24)) * 1.15;
const halfX = halfY * 1.8; // assume widescreen
x = (rand()*2-1)*halfX; y=(...)*halfY;
```
On portrait aspect could need wider relative? Actually halfX=halfY*aspect. Use current aspect at creation; on resize stars could no longer cover, but can generate based on max aspect 2.2 to cover. Or set stars as a sphere of radius 45 around origin with only negative z hemisphere; camera at z=7 inside sphere, star positions behind origin mostly. But camera orbit still look at origin; some stars near z=0 and x large could be behind object due to depth direction? point behind origin relative to camera if dot(pos, camera_dir) negative; with z <= -10 and x/y large, fine. Spherical shell gives more natural starfield and parallax. Need guarantee stars behind object by z < -10. Generate positions in a spherical shell radius 25-55, with z negative, maybe projected x/y. Use rejection:
```
const theta=rand()*2π, u=rand()*2-1...
x,y,z sphere; if (z > -radius*0.25) z=-abs(z)-...;
```
But camera at z=7, stars at z maybe -5 could still behind object. Better use slab as above.

Could update starfield positions on resize to fill aspect, but that would change star distribution; not necessary. Could use CSS gradient background plus stars. Need subtle. Let's pick slab with z=-14 to -38, and for each star compute half extents based on depth and a fixed `maxAspect=2.4`:
```
const halfHeight = (7.2 - z)*Math.tan(THREE.MathUtils.degToRad(48/2))*1.25;
const halfWidth = halfHeight*2.2;
x=(rand()*2-1)*halfWidth; y=(...)*halfHeight;
```
At near z=-14 distance 21.2 halfH=9.45*1.25=11.8; halfW=26; covers 1200x800 (aspect 1.5 halfW needed 14.2). At far z=-38 d=45.2 halfH=20.1*1.25=25.1; halfW=55; covers. For portrait aspect .6 halfW needed = halfH*.6, so covered. Fine. Many stars outside viewport, so use count ~1200 to get visible ~400. Need "subtle"; 300 visible maybe. We can use 3 layers with 700 far, 120 medium, 35 bright; visible fraction ~0.4 maybe 340. Good. Could add color variety. Need perhaps star points render in front of object? z negative and object radius 1.65, all behind. Depth test handles occlusion.

Camera orbit paths: if camera rotates, starfield remains static in world. Fine; visible perspective changes.

Need maybe add light rings that pulse? Not required; no animation except object/camera. Pause requirement says freeze both object and camera animation; if light markers pulse independently that might be okay but avoid.

Need perhaps animate via `requestAnimationFrame` and update body data:
```
const app=document.getElementById('app');
function setTelemetry(force=false) {
 if (!force && performance.now()-lastTelemetry<100)return;
 const state = {...};
 app.dataset.paused=String(paused);
 app.dataset.elapsed=elapsed.toFixed(3);
 app.dataset.objectRotation = [...].map(...)
 app.dataset.cameraPosition...
 ...
 readout.textContent = `t ${...} · orbit ${...}`;
}
```
Need avoid exposing huge internal state perhaps okay. `window.__icosahedronScene = { getState, pause, resume, reset }` could be useful. This is internal, no addons. Need maybe deterministic time setting for tests? Could expose `setElapsed(seconds)` to sample moments, but that modifies simulation and might be considered hidden test hook; not harmful. Yet task says "Sample several moments to inspect" we can just wait via browser motion. Need no need setElapsed. But for our own browser tests perhaps use `window.__...` with console? Browser tool may not evaluate JS. Could use visible HUD values. We'll likely use browser `motion` to sample frames and screenshot. Could set `data-pose` and inspect for changes. We can perhaps use browser actions with `key` and click. Need understand tool output. Let's first write then use.

Need ensure no network requests. Only `<script src="three.min.js"></script>` and inline script. No fonts. CSS no `@import`. Good.

Potential issue: the runner will inline three.min.js into final artifact, but our local script tag plain. Yes.

Need perhaps include fallback if THREE not loaded. Could show error. Not necessary but okay. Need script order: `<script src="three.min.js"></script>` then inline script. Since runner may inline, okay. Use `defer`? No, straightforward at end of body. Need ensure script executes after DOM elements. Put scripts at bottom. Good.

Need use core global only. `THREE.MathUtils.degToRad` maybe core. Could manually use Math.PI/180. Need avoid `THREE.BufferGeometry` etc all core. Good.

Need maybe support old Three outputEncoding:
```
if (THREE.sRGBEncoding !== undefined) renderer.outputEncoding=THREE.sRGBEncoding;
```
Set `renderer.toneMapping = THREE.ACESFilmicToneMapping` if available; `renderer.toneMappingExposure = 1.15`. But with MeshPhong and colored lights, ACES could desaturate; maybe avoid. Could set `renderer.outputEncoding` only. In r131 ColorManagement not converting hex automatically perhaps output encoding handles. Fine.

Need likely verify with screenshot; perhaps need tune lighting based on screenshot. Let's construct.

Detailed HTML:
```
<!DOCTYPE html>
<html lang="en">
<head>... style ...
</head>
<body>
<div id="app" data-paused="false" data-elapsed="0"...>
  <div id="scene" aria-hidden="true"></div>
  <div class="vignette" aria-hidden="true"></div> // CSS radial overlay pointer-events none; need be careful overlay dims canvas edges but nice.
  <header class="hud">
    <div class="eyebrow">THREE.JS / CORE</div>
    <h1>Prismatic Icosahedron</h1>
    <div class="legend">...</div>
  </header>
  <div class="readout" id="readout">...</div>
  <div class="controls" role="group" aria-label="Animation controls">
    <button id="pauseButton"...><span class="icon">❚❚</span><span id="pauseLabel">Pause</span></button>
    <button id="resetButton">↺ Reset</button>
    <span id="status" aria-live="polite">Running</span>
  </div>
  <div class="hint">Space pause · R reset</div>
  <div id="webglError" hidden>...</div>
</div>
<script src="three.min.js"></script>
<script>...</script>
</body>
</html>
```
Need avoid Unicode icons maybe okay; no external fonts. Use CSS icons perhaps. Button text "Pause" / "Resume". Need `aria-pressed` false/true.

Vignette CSS overlay could reduce star visibility at edges. Fine. Need pointer-events none on HUD except controls. Maybe header pointer-events none, controls pointer-events auto.

CSS:
```
html,body,#app {width:100%;height:100%; margin:0; overflow:hidden;}
body{background:#03050e;...}
#scene, #scene canvas {position:absolute;inset:0;display:block;width:100%;height:100%;}
.vignette {position:absolute;inset:0;background:radial-gradient(circle at 50% 45%, transparent 35%, rgba(...,.5) 100%); pointer-events:none;z-index:1;}
header z-index:2; etc.
```
Need ensure no CSS network. fine.
- responsive @media(max-width:600px): title smaller, controls bottom etc.
- buttons focus visible.

Need perhaps `renderer.domElement.setAttribute('aria-label', ...)` but canvas can be aria-hidden if parent. Fine.

JS:
```
(function(){
 'use strict';
 const app=...
 const sceneHost=...
 const pauseButton=...
 ...
 let renderer, scene, camera, object, pointLights = [];
 let paused = false, elapsed=0,lastFrame=performance.now(),lastTelemetry=0;
 const initial = {};
 const tmpColor=new THREE.Color();
 try { renderer = new THREE.WebGLRenderer({antialias:true, powerPreference:'high-performance'}); } catch(err){... return;}
 ...
})();
```
Need perhaps check `typeof THREE === "undefined"` and show error. Use global.

Renderer:
```
renderer.setPixelRatio(Math.min(window.devicePixelRatio||1,2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x030612,1);
if (THREE.sRGBEncoding) renderer.outputEncoding = THREE.sRGBEncoding;
sceneHost.appendChild(renderer.domElement);
```
`renderer.setSize(w,h)` sets canvas style. Since CSS also `#scene canvas` absolute width 100%, height 100%; okay.
`renderer.setPixelRatio` maybe call in resize.
`renderer.outputColorSpace` not available. Fine.

Scene:
```
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x030612,0.012); 
```
Fog could affect star PointsMaterial if fog defaults true; maybe stars far get fogged to invisible. No fog. Maybe background color. Good.
Camera initial:
```
camera = new THREE.PerspectiveCamera(48, aspect, .1, 120);
applyCameraOrbit(0);
```
`applyCameraOrbit(t)` uses camera and lookAt target. Need initial transforms after this.
```
const lookTarget = new THREE.Vector3(0,0,0);
function applyCameraOrbit(t){
 const radius=7.2 + .22*Math.sin(t*.13);
 const azimuth=.42*Math.sin(t*.21);
 const elevation=.04+.15*Math.sin(t*.17);
 camera.position.set(radius*Math.sin(azimuth)*Math.cos(elevation), radius*Math.sin(elevation), radius*Math.cos(azimuth)*Math.cos(elevation));
 camera.lookAt(lookTarget);
}
```
At t=0 radius 7.2, elevation .04, position y .288, z 7.194. Fine.
Need maybe camera roll? no.
Object:
```
const geometry = new THREE.IcosahedronGeometry(1.7,0);
geometry.computeVertexNormals()? already non-indexed? flatShading uses derivatives or normals? In r131 flatShading shader uses dFdx/dFdy, no need. EdgesGeometry works.
const material = new THREE.MeshPhongMaterial({
 color:0xbcc6d9,
 specular:0xf6f7ff,
 shininess:65,
 flatShading:true,
 emissive:0x070912,
 emissiveIntensity:0.28 // property maybe in MeshPhong? r131 has emissiveIntensity perhaps. Could skip.
});
object = new THREE.Mesh(geometry,material);
object.rotation.set(0.22,-0.35,0.08);
const edges = new THREE.LineSegments(new THREE.EdgesGeometry(geometry,1), lineMaterial);
edges.scale.setScalar(1.004);
object.add(edges);
scene.add(object);
```
Need ensure `EdgesGeometry` with thresholdAngle default 1 works.
Could add a transparent outer shell? Avoid.
Point lights:
```
const lightSpecs=[{color:0xff4f9a, intensity:3.2,pos:[-3.6,2.2,3.4]}, {color:0x35d8ff,intensity:2.9,pos:[3.5,-1.8,3.2]}]
for ...
const light=new THREE.PointLight(spec.color, spec.intensity, 18, 1.1); // decay parameter can be non-integer.
light.position.set...
scene.add(light);
...
```
Need determine brightness. Add ambient:
```
scene.add(new THREE.AmbientLight(0x364466, 0.22));
```
Maybe HemisphereLight could introduce blue ambient, but point lights enough. Use 0.2.

Could add cross-shaped light rays or rings as sprites. Core only. Markers:
```
const bulbGroup = new THREE.Group();
const bulbGeometry = new THREE.SphereGeometry(.075,20,14);
const core = new THREE.Mesh(... MeshBasicMaterial({color: spec.color}));
bulbGroup.add(core);
[[.16,.14],[.28,.06],[.42,.025]].forEach...
```
Additive blending may make glow visible. But transparent sphere surfaces with additive and depthWrite false can look like solid circles; okay. Need maybe use `side: THREE.BackSide`? A sphere from outside shows front surface, additive low opacity; multiple surfaces maybe okay. Use `depthWrite:false`, `depthTest:true`, `transparent:true`, `blending:THREE.AdditiveBlending`. Since light markers at z=3.4 and camera z=7, they are in front of object but x outside, no occlusion. They might be too large and look like stars; but with concentric glows and color, distinct. Could add a thin torus ring around each marker facing camera? It would need orientation update to camera each frame, another animation (but only camera-dependent, not independent). Not necessary. A colored dot plus tiny halo is enough. Need perhaps avoid interpreting as object lights? legend helps.
- Maybe connect light markers with subtle line to object? That could clutter. no.

Star layers:
```
function seededRandom(seed) {...}
function makeStarLayer(count,size,opacity,brightness,saturationSeed){
 const rand=... maybe shared seeded RNG to avoid layers same patterns
 ...
 const positions = new Float32Array(count*3);
 const colors = new Float32Array(count*3);
 for i:
   const z=-14-rand()*26;
   const dist=7.2-z;
   const halfY=dist*Math.tan(24deg)*1.2;
   const halfX=halfY*2.2;
   positions[...] = ...
   const hue = .56 + (rand()-.5)*.16; // blue-white
   const sat = rand()*.25;
   const lum = (0.35+rand()*.45)*brightness; // subtle
   const c=new THREE.Color().setHSL(hue,sat,lum);
   // Need with outputEncoding maybe colors.
   colors[...] = c.r...
 ...
 const material = new THREE.PointsMaterial({size,sizeAttenuation:false,vertexColors:true,transparent:true,opacity,depthWrite:false,blending:THREE.AdditiveBlending});
 const points = new THREE.Points(geometry,material);
 points.frustumCulled=false; // because huge geometry bounding sphere maybe robust; set computeBoundingSphere maybe. With generated coords, bounding sphere okay; but ensure no culling issue when camera moves. Set false.
 scene.add(points);
}
```
Need maybe use `THREE.Float32BufferAttribute` available. yes.
`THREE.Color().setHSL` values are linear? okay.
Could make one layer with per-point color and no varying sizes; then multiple layers. Need maybe avoid too many visible points. Use:
```
makeStarLayer(700,1.15,.5,.7)
makeStarLayer(150,1.9,.7,.8)
makeStarLayer(35,2.8,.85,1.0)
```
Since visible fraction maybe ~0.5, ~440 points. Subtle. Use large stars perhaps.
Need maybe set colors of some stars slightly pink/cyan to echo lights but mostly white. Hues .54-.66 (blue), occasional .92? no.

Could add a distant wireframe-like backdrop? Not needed.

Initial state:
```
function applyObjectRotation(t) {
 object.rotation.x = initialRotation.x + t*0.37;
 object.rotation.y = initialRotation.y + t*0.53;
 object.rotation.z = initialRotation.z + t*0.17;
}
const baseRotation = object.rotation.clone();
```
Need define baseRotation before `applyObjectRotation`. At t=0 no change. Full transforms perhaps include object position/scale; always same. Need capture initial:
```
applyObjectRotation(0);
applyCameraOrbit(0);
camera.updateMatrixWorld(true);
object.updateMatrixWorld(true);
const initialState = { rotation: object.rotation.clone(), position: object.position.clone(), quaternion: object.quaternion.clone(), cameraPosition: camera.position.clone(), cameraQuaternion: camera.quaternion.clone() };
```
On reset:
```
object.rotation.copy(initialState.rotation);
object.position.copy(...);
object.quaternion.copy(initialState.quaternion); // Euler and quaternion consistency: setting rotation updates quaternion; then copying same should be okay. But setting rotation and then quaternion same values. Could just rotation.copy; quaternion derived.
camera.position.copy(...);
camera.quaternion.copy(...);
camera.updateMatrixWorld(true);
```
Need perhaps ensure object.matrixWorld updates. yes.
- Better avoid capturing both rotation and quaternion; use `object.matrix.clone()` and `camera.matrix.clone()`? Camera matrix from lookAt. But restore position/quaternion enough. To guarantee exact initial pose, use `matrixAutoUpdate` default true; setting position/quaternion yields same matrix. Could just copy. Need scale unchanged.
```
const initialObjectMatrix = object.matrix.clone() after updateMatrix();
const initialCameraMatrix = camera.matrix.clone();
```
Then reset:
```
object.matrix.copy(initialObjectMatrix);
object.matrix.decompose(object.position,object.quaternion,object.scale);
...
```
But Euler rotation would be out of sync with quaternion? `decompose` sets quaternion but doesn't update Euler maybe rotation is linked via onChange so yes. But simpler with position, quaternion, scale. Need no scale changes anyway. Use initial rotation and camera quaternion.

Initial camera quaternion after `lookAt` includes orientation. Reset exact. Good.

`updateScene(t)`:
```
object.rotation.set(baseRotation.x + .37*t, baseRotation.y + .53*t, baseRotation.z + .19*t);
applyCameraOrbit(t);
```
Need camera orbit independent from object rotation; direct formulas. At t=0 this reproduces initial. Good.
Need maybe `camera.updateProjectionMatrix()` only resize. Fine.

Telemetry:
```
function numbers(v){ return [v.x,v.y,v.z].map(n=>n.toFixed(3)).join(',')}
function getState(){
 return {
  paused, elapsed:Number(elapsed.toFixed(4)),
  object:{position:..., rotation:{x:object.rotation.x...}, quaternion:...},
  camera:{position:..., quaternion:...},
  initial:{objectRotation..., cameraPosition..., cameraQuaternion...}
 };
}
window.__icosahedronScene = {
 getState,
 pause:()=>setPaused(true),
 resume:()=>setPaused(false),
 reset:reset
};
```
Need maybe avoid returning THREE objects (not serializable). Use plain numbers. Good.
`updateReadout`:
```
const seconds = elapsed.toFixed(2).padStart(5,'0');
const orbitDeg = (cameraOrbitAngle(t)*180/Math.PI).toFixed(1);
readout.textContent = `t ${...}s  |  orbit ${...}°  |  rotation x... y...`;
app.dataset.paused=...
app.dataset.elapsed=...
app.dataset.objectRotation=...
app.dataset.cameraPosition=...
app.dataset.cameraQuaternion=...
app.dataset.initialObjectRotation=...
...
```
Maybe don't update `initial...` each frame, set once after capture. Need getState available.
Need status text:
```
function setPaused(value) {
 paused = value;
 lastFrame = performance.now();
 pauseButton.textContent? We have label span.
 pauseLabel.textContent = paused ? 'Resume' : 'Pause';
 pauseButton.setAttribute('aria-pressed', String(paused));
 status.textContent = paused ? 'Paused' : 'Running';
 status.dataset.state = ...
 updateReadout(true);
}
```
`aria-pressed` semantics: button is Pause/Resume toggle; if paused true then pressed. Fine.
Pause click toggles.
Reset click:
```
function reset(){
 elapsed=0;
 lastFrame=performance.now();
 updateScene(0); // or exact copies
 restoreInitialTransforms();
 renderer.render(scene,camera);
 updateReadout(true);
}
```
Need initial exact capture after `updateScene(0)`. `restoreInitialTransforms` set exact. use that.
Need maybe preserve pause status. yes.
Need perhaps flash button or status? no.
Need keyboard:
```
window.addEventListener('keydown', e=>{
 if (e.target instanceof HTMLButtonElement && (e.key===' '||e.key==='Enter')) return; // browser handles.
 if(e.code==='Space'){e.preventDefault();togglePause();}
 else if(e.key.toLowerCase()==='r'){reset();}
});
```
But if button focused and Space, browser click triggers; returning avoids double. Good. Need maybe include `e.repeat` guard. no.
Need consider reset while paused: lastFrame updated but animate loop also updates lastFrame each frame; no jump. Good.
Need on visibilitychange perhaps cap dt; dt clamped .05 already. Good.

`animate(now)`:
```
const dt = Math.min(Math.max((now-lastFrame)/1000,0),0.05);
lastFrame=now;
if(!paused) elapsed+=dt;
updateScene(elapsed);
renderer.render(scene,camera);
if(now-lastTelemetry>100){ updateReadout(); lastTelemetry=now; }
requestAnimationFrame(animate);
```
Need render loop always. At initial call, maybe `updateScene(0); renderer.render(...); updateReadout(true); requestAnimationFrame(animate);`. `lastFrame=performance.now()` then request. Fine.
Need maybe camera rotation when paused: `updateScene(elapsed)` recomputes same values and `lookAt`; quaternion should be numerically same. Fine.
Need object rotation at t=0 and initial rotation exact. Good.

Potential issue with camera orbit when t gets huge; sin fine.
Potential issue with object rotation Euler angles huge over long durations; fine.
Potential issue with point light markers' halo transparent sorting. Could set `renderOrder=2` maybe. Not needed.
Potential issue `MeshBasicMaterial` with AdditiveBlending on dark background and transparent spheres might render as filled circle; okay.
Potential issue `EdgesGeometry` line material opacity and no `depthWrite`, okay.
Potential issue with `scene.background` clean. Add `renderer.setClearColor`. Good.

Need maybe create a soft procedural "glow" behind object to separate from stars: can use a large `THREE.Sprite` with CanvasTexture generated from radial gradient. But "without external textures" allows procedural, but might be interpreted as using textures. Avoid. Could use a large transparent sphere with vertex color? no. CSS vignette enough. Maybe add a `THREE.Mesh` disk with `ShaderMaterial` radial gradient using GLSL; that's procedural and core. But complexity not needed. Could create a simple `THREE.RingGeometry` around object? Maybe no.

Need perhaps differentiate stars from light bulbs: stars small static white/blue points, light bulbs larger colored spheres with halos. Legend. Good.

Need perhaps add subtle light cone/line from each light to object using `Line` with opacity .08. Could show association but not needed. Maybe a thin semi-transparent line from light marker toward origin, colored. This helps distinguish lights and shows lighting source. But can clutter and be interpreted as stars? no. Could use `THREE.Line` with `BufferGeometry.setFromPoints([light.position.clone(), light.position.clone().multiplyScalar(.35)])` and `LineBasicMaterial({color, transparent:true, opacity:.1, blending:AdditiveBlending})`. Yet lines may be behind object and not visible. Skip.

Need maybe add small colored spheres at lights and a key/rim legend. Fine.

Let's write file.

Need run browser. First reload, inspect, screenshot perhaps parallel? Tool actions likely independent but need reload first. Let's do reload then inspect/screenshot maybe.

We need continue. Screenshot shows object large and strongly colored. But light markers not visible! They may be outside viewport? Positions ±3.55, y ±2.15, z 3.4. Camera z 7.2, FOV 48; at depth from camera 3.8, visible half height = 3.8*tan24=1.69, half width at 1.5 aspect=2.54. So markers at x±3.55 and y±2.15 are outside view. Need bring them closer to center or farther back so visible. Requirement "lights, object, stars distinguishable" perhaps point lights themselves need distinguishable. We should make markers visible near edges by placing them farther away z maybe 0 or -1 (behind/around object). But point light positions affect lighting directions. Could put light markers at z=1.5? Need visible: camera z ~7.2, depth 5.7, half height=2.54, half width=3.8. x=3.2, y=1.8 fits. Place rose (-3.2,1.8,1.5), cyan(3.2,-1.6,1.3). At distance from object sqrt(10+3.2+2.25)=3.9, still strong. Need perhaps markers not overlap object silhouette radius 1.68 projected maybe 220 px; at x 3.2 near edge may be okay. But light markers might be occluded by object if behind? z=1.5 means in front of object relative camera, but x outside. good. Need perhaps lighting colors still strong; currently strong washed-out bright. Maybe adjust intensities down a bit to avoid clipping white/cyan. Screenshot is pretty, but object facets mostly pink/cyan/white. Good.

Need also note screenshot initial at t=0.25 due to reload latency, object rotation changed. Fine. Need check object and stars distinguishable (yes). Light marker spheres currently not visible, so fix. Could perhaps add CSS legend identifies lights, but actual glow markers should show. Need perhaps also see stars subtle, yes. Need maybe specimen appearance. Need use browser motion to sample multiple moments, pause/resume, reset. We can inspect data attributes via `inspect` likely returns DOM text only; maybe can use screenshots and readings. Need perhaps tool supports `motion` frames. Let's understand. We'll call `browser action=motion` perhaps captures some frames over duration. But first fix markers and maybe tune lighting.

Need maybe use `readout` text from inspect showing t 0.25 while screenshot t 0.13, weird because tool output may combine at different times. Fine.

Need calculate point light positions and object colors. Move lights to visible points. Need perhaps point marker halo sizes 0.42 world at depth 5.7 -> projected radius ~0.42/(2*5.7*tan24°)*800? Actually pixel radius = 0.42*800/(2*5.7*0.445)=66px, huge. Because sphere radius .42 makes 66px halo. At current z 3.4 depth 3.8, radius .42 gives 99px. If visible near edge, huge glows might be okay but perhaps too dominant. Need reduce halo radii or move farther. At z=1.5 depth 5.7, .42 gives 66px radius; that's large. Three translucent concentric spheres could create noticeable 66px glow. Good maybe. Core 0.075 gives 12px radius. Need perhaps use 0.13,0.22,0.34 => 20px,34px,54px. "subtle." Could reduce. Also actual sphere marker could look like colored dot; legend dots are 8px, visible markers ~10px. Fine.

Could instead place light markers at z=0 or -1, around object plane. At depth 7.2, half height=3.2, half width=4.8, so x±3.4,y±2.1 fits. Point lights at z=0 might light side surfaces differently; still visible and color response maybe stronger from sides. Light markers are at same depth as object center; if x outside silhouette, visible. Depth test compares object's front surface at x maybe around 1.5 with z up to 1.68, but x=3.4 has no overlap. Good. Put at `(-3.4,2.0,0.6)` and `(3.4,-1.8,0.6)`. Camera depth 6.6; halfH=2.94, halfW=4.4, fits. Halo radius .34 gives ~46px. Nice. Point light distance from object ~4.0. Might create more side lighting and less frontal white fill; perhaps colored facets stronger. Need maybe intensities adjust. Current with z=3.4 lights front side, dist ~4.6? Actually distance sqrt(12.6+4.6+11.9)=5.4. At z=.6 dist sqrt(11.6+4+0.36)=4, closer, brighter. Could reduce intensity from 3.1/2.8 to 2.4/2.2. But attenuation could be complicated. Need perhaps test screenshot after change.

Need visible light markers and colored lights. Let's edit positions and halos. Could maybe set marker positions at `(-3.35, 2.0, 0.6)` and `(3.35,-1.75,0.6)` and keep intensity 2.7/2.5. Add a thin outer ring? no. Need perhaps calculate exact screen positions: initial camera y=.288 looking slightly down, so perspective projection perhaps center. x ±3.35 at depth ~6.6; screen half width 4.4 -> x ~0.76 of half width = 456px from center? Actually canvas 1200 half=600, x normalized .76 => 456px, so x~144 and 1056; y ±2 perhaps ~0.68 of half height => 272px from center, y~128 or 672. Rose at top-left near title perhaps; cyan bottom-right near readout. Could overlap UI but maybe okay. Need choose x ±2.9,y ±1.7 to be closer and less edge: normalized x .66 => 395px -> x=205,995; y ~.58 => 232 -> y=168,632. Fine. Object radius projected ~1.68/(2*6.6*.445)*800=229px? Wait radius in pixels = 1.68*800/(2*6.6*.445)=229? compute denominator 5.874, 1344/5.874=229px. Screenshot object radius ~200px, yes. Markers x ±3.0 at depth 6.6 = 409px from center, clear. y 1.8 = 245px from center. At diagonal distance ~3.5, clear of object radius 1.68. Good.
But marker z=0.6 means depth from camera slightly less than object center, so projected radius relative center maybe 1.68 / 6.6 vs 3.0/6.6; clear.
Need perhaps markers end up x around 190 and 1010, y 160 and 640. Nice.

Let's edit light positions and halo radii maybe. Also maybe reduce opacity to avoid huge glows. Current halos at .16/.27/.42 opacity .19/.085/.033; with 3 transparent spheres this might be subtle enough. Keep radius maybe reduce outer to .34. Let's do:
- rose (-3.05, 1.9, 0.75)
- cyan (3.05,-1.65,0.75)
- intensity 2.6/2.4 perhaps.
- halo .14/.23/.34 opacity .17/.075/.028.
Need test.

Also object currently very bright with pastel colors, perhaps okay "visibly responds". Could reduce ambient maybe 0.18. But color response is clearly visible. Need maybe point lights markers themselves as bulb with glow. Good.

Need perhaps use a soft "ray" line from each marker to object so obvious. Could add a thin line with opacity 0.12 and additive; but may cross object. Maybe no.

Need perhaps fix issue `window.__icosahedronScene` API not accessible via browser tool; no matter. Need use data attributes. Browser `inspect` output only DOM text, not attributes perhaps. Could perhaps put a hidden `<output id="poseJson">` with JSON state text, which DOM snapshot might show? It currently only returns text content maybe not hidden? The screenshot shows readout. We can rely on readout values for object and camera. Good. Need perhaps include quaternion too in readout? For camera movement, xyz enough. For initial compare after reset, object xyz and camera xyz enough; initial values known from t=0. Need pause check: t and coordinates freeze; readout displays exactly. Great. We can sample screenshots over time and read readout. Need perhaps call `motion` to get frames with t values. Need find tool action semantics. Let's edit first.

Need reload and screenshot.

Now markers visible. But cyan marker overlaps readout somewhat (readout right bottom at x 995.., y 650..) and halo at x 1018,y632, so overlapping. Could move readout to top right or cyan light higher/left. Need perhaps visual styling not critical, but could improve. Also lighting now has dark facets (blue ambient) but clearly rose/cyan mix. Nice. Need "lights, object, stars distinguishable" yes. Need maybe marker halos too large? They look like glowing rings around little sphere, good. Need perhaps move readout to top right under hint or set cyan marker at x=2.9,y=-1.3 to avoid readout. But we can simply move readout to top right below hint (top 72px) or bottom left. However header left top, hint top right; maybe readout top right at y=68px. Then no overlap. But readout currently subtle bottom right. Could move to bottom left (above controls maybe) and no overlap with cyan; top left header extends to y=115, bottom left free. But on mobile etc. easiest top right at top 62px. Could set `.readout { top: max(64px,...); right: ...; bottom:auto; }`. On mobile hint hidden, top 74px maybe. Need adjust media query. Or move cyan marker more center/up so no overlap. Maybe place cyan at `(2.8,-1.15,0.75)`: screen right ~900, y ~570, clear of readout at y650. Still diagonal clear of object? distance sqrt(7.84+1.32)=3.0 > object radius ~1.7. It may be near right-lower edge of object projected boundary ~200px; screen x offset 380, y offset 150; object polygon bounding radius 200, so marker at 408 diagonal from center, clear. Good. Could adjust cyan marker to y -1.2. But then light direction more horizontal, perhaps okay. Rose at top-left could also overlap legend? Rose marker at x170,y135 just below legend (y108), okay. Cyan at x1018,y632 overlaps readout. Move to `(2.9,-1.1,0.75)` -> screen x ~970? Need projection x maybe if x=3.05 yields x=1018; x=2.7 => 960; y=-1.1 => 550. readout starts around x

995,y650; no overlap. Still nice. But light y negative less strong lower facet? cyan center-right still. fine. Need perhaps ensure marker not too close to object silhouette: screen center (600,400), projected x maybe 970-600=370, y=550-400=150, distance 399 > object radius 200. Fine.

Could also move readout to top right to preserve light positions. I think better readout at bottom left? But then user can see numbers near controls. Hmm. Visual styling unspecified; overlap is a clear problem, fix. Let's move readout to top right with hint above. Need check readout text x range 995-1170, y ~650 currently. At top right y~70, no overlap with rose (left). hint at y35. Good. On mobile, title/legend top left, readout at top right might overlap. But can hide readout on small screens perhaps. Maybe place cyan marker higher instead. Simpler and avoids CSS changes. Let's move cyan spec to `(2.9, -1.05, 0.75)`. Maybe light color still visible on lower-right facets? likely. Need screenshot after reload. Also perhaps the dark facets are too dark but still colored. Could increase ambient from .24 to .32 to brighten dark facets. Yet current screenshot dark blue facets show cyan influence, object is distinguishable. Better to slightly brighten with ambient 0.35 perhaps, but too much reduces lighting contrast. The original with frontal lights looked very bright/washed. Current looks more dramatic. Keep.

Need sample several moments. Browser `motion` likely gives sequence. Let's first edit cyan position and maybe readout location? We can move cyan. Also maybe point marker at x~2.9,y~-1.05 would be ~? let's do.

Need reload and perhaps motion. Could call reload then motion perhaps separate. Let's reload.

Looks good. Need now verify moments, pause, reset. Need understand browser motion action. Could call `motion` with maybe no params; perhaps captures 3 frames over some time. Let's do.

Motion frames show orientation changes and camera coordinates. Good. Need pause and check both freeze. Need click pause button coordinates ~494,740. Then inspect/readout + motion perhaps. We need use browser click. Need perhaps note t around 8+ seconds now. Click pause. Then use motion to see frames freezing. Could call click then motion. Need maybe explicitly inspect after. Let's do click.

Need motion while paused to verify freeze.

Pause verified: all four frames identical, readout fixed. Need reset while paused and compare initial pose. Need initial exact pose values. We can derive from base rotation (0.24,-0.38,0.09), camera position at t=0 (0,7.2*sin .04=.2879,7.2*cos .04=7.1942). Initial orbit 0°, readout after reset should t0, object xyz .240,-.380,.090, camera xyz 0,.288,7.194. Need click Reset at x615,740. Then inspect and motion while paused to ensure stays exact. Need perhaps compare initial screenshot from fresh reload at t~0; but initial screenshot at t=.27 shows values 0.339 etc. We can reset while paused then screenshot. Need perhaps capture initial pose from reload with pause before time elapses? Could reload and immediately pause via keyboard maybe difficult. But getState initial data attributes available; DOM inspect output doesn't show attributes. Could perhaps use `readout` after reset and compare to mathematically expected initial. Need maybe use browser `inspect` with more detail perhaps outputs `data-*`? It gave only text. Could add visible initial pose line in readout? Or use global API via console? Browser tool doesn't have evaluate. Could perhaps use `key` action with `text`? There's `type` maybe would type into focused element, not JS console. Could use browser `inspect` maybe tool internally captures DOM attributes separately? Output only `dom` text. Could maybe use `screenshot` and use data from initial `getState` via DOM hidden element. We can add a hidden element with text of initial pose; but hidden text may not appear in DOM text output if CSS hidden? Could add a small visible "initial pose" line in readout perhaps. That would help direct comparison after reset. But not necessary for user; requirement says reset and compare object and camera with initial poses. We can use the `initial*` data attributes perhaps if we expose them visibly via text or aria-label. Need actually verify perhaps tool's inspect doesn't show attributes but could use `screenshot` of a small diagnostics panel containing initial and current values. We can add to readout:
```
initial  object ... / camera ...
```
But that adds a third/fourth line, could be okay. Maybe use hidden JSON element with text and inspect DOM; because DOM output might include text even if hidden. We can add `<script type="application

/json" id="initialPose">`? DOM text maybe inspect includes script text? likely not. Could use `<output id="poseReport" hidden>` but hidden elements might be excluded from accessibility tree/dom text. Better add a visible small line in readout:
```
initial object 0.240, -0.380, 0.090
initial camera 0.000, 0.288, 7.194
```
Then screenshot after reset can compare current vs initial directly. But it adds clutter bottom right, overlapping cyan marker if too many lines. Could move readout to top right or make it a compact diagnostic panel. Yet not required by task; visual styling is choice. Could perhaps add a hidden visual element that is `aria-hidden` but `display:none` with current and initial; browser inspect's `innerText` may ignore display:none. Could use `position:absolute; left:-9999px` still text in DOM; inspect may include it. But no need.

Could use global API and maybe browser tool's `inspect` can execute something if path? Tool doesn't have custom JS. We can use browser `key` to press R while focused? no console evaluation. Could perhaps use `click` on a button that triggers a data URL? no.

We can compare after reset to initial values computed from code, plus initial screenshots from first reload. Need also perhaps reset while running and verify clock restarts. We can test. But first click reset while paused and inspect.

Reset exact. Need perhaps confirm initial screenshot from reload matches orientation. We can reload and click pause immediately maybe tool click after reload has delay. Could perhaps use keyboard R immediately to reset then pause quickly. But we already know initial transformations from code and reset uses exact capture. Need perhaps add `data-initial-*` attributes and use browser inspect maybe perhaps can access custom DOM attributes through tool? The `dom` output only text but maybe `inspect` action gives more detail. Let's call browser `inspect` maybe it returns a DOM summary with attributes? Maybe action with no params. Could perhaps use `inspect` with x/y? Let's try.

Need perhaps resume and verify movement, then reset while running to ensure reset works. Could click Resume x500,740 then motion. Need perhaps clock increments from 0. Then maybe reset and check. Need perhaps also test resize. Browser viewport fixed 1200x800; cannot resize with tool perhaps `scroll` no. Could perhaps use `browser` action maybe no viewport resize. Need mention resize present but unverified. Need maybe check console errors: only WebGL performance warnings; no JS errors. Good.

Need maybe verify Pause/Resume semantics after reset. Click Resume and motion perhaps.

Resume works. Need maybe test reset while running: click Reset and inspect immediate output. Since tool click may wait ~? It reported t0.2 after resume; click reset likely t maybe 0.0 with slight after. Could click and inspect. Need maybe also test keyboard pause/reset? Not required. Could maybe test resize by using browser action? no. Need perhaps test representative behavior focused on time. We have 15 minutes but likely enough. Need maybe check reset while running returns t~0 then continues. Let's click reset after letting time run a bit maybe motion first then click. Could issue motion (2 sec) then click reset.

Images confirm. Need perhaps note starfield subtle. Great.

Need perhaps check reset while running.

Reset while running works—clock back to ~0 and orientation near initial. Good.

Need maybe consider reset's preservation of running state. Fine.

Need perhaps check resize behavior. Browser tool maybe can simulate viewport by setting `window.innerWidth`? no JS execution. But perhaps with `browser action=scroll` no. Could use browser tool `key`? no. We can inspect code manually. Need maybe run a headless test with custom JS? Could perhaps use node with jsdom? no WebGL. Could use Chrome DevTools command line? Tool perhaps not. We can perhaps create a second temporary HTML with an iframe and script to resize? But runner uses fixed viewport. Could use browser tool `click` on an element that triggers `window.resizeTo(...)`, but that would require adding a test button. Not needed. We can mention resize implemented but not directly exercised by browser tool. Need perhaps verify no console errors besides GPU warnings. Done.

Need perhaps ensure `index.html` is final, self-contained (except local three.min.js). Need maybe check there are no external URLs. Use grep. Need perhaps check file has plain script tag exact. Do.

Python3 absent; can use node to extract. Need syntax check to ensure no issue. Browser already executed, so okay, but let's do node properly.

Need perhaps check subtle potential problem: `camera.quaternion.copy(initial.cameraQuaternion)` after setting position, then updateMatrixWorld. Fine. But `restoreInitialTransforms` sets object.rotation.copy(initial.objectRotation) then object.quaternion.copy(initial.objectQuaternion): Euler's onChange callback updates quaternion when rotation copied, then quaternion copy updates Euler via quaternion's onChange callback. In Three.js, Euler and Quaternion have reciprocal onChange callbacks. Need verify consistency: In Object3D constructor:
```
rotation._onChange(onRotationChange) => quaternion.setFromEuler(rotation,false)
quaternion._onChange(onQuaternionChange) => rotation.setFromQuaternion(quaternion,undefined,false)
```
Setting rotation triggers quaternion set; then setting quaternion triggers rotation set from quaternion. Could result in slightly different Euler representation but same orientation. Initial rotation at (0.24,-0.38,0.09) should be in range, so same values. Reset readout showed exact initial. Good.

Need maybe check initial camera quaternion after reset. `camera.lookAt` at t=0 creates quaternion; reset copies exact, so yes. Could perhaps expose initial vs current quaternion in DOM data attributes; browser tool might not. But reading reset output from initial after paused and reloading could compare via `window.__icosahedronScene` if tool had evaluation; not needed. We can perhaps add diagnostic text to `readout` with initial pose values to make explicit. But visual already good. Need perhaps avoid adding more complexity. Need perhaps final report mention actual checks and unverified aspects. Need maybe include final file present.

Before final, perhaps need re-check after last click that page is currently running and `index.html` still file. Fine. Could perhaps do a final reload and screenshot to ensure no errors, but already done. Need maybe consider browser inlining runner could inline script library into `<script>` tag and our code's `THREE` global still works. yes.

Need perhaps mention we used provided core global library only, no addons. yes.

Need maybe verify "full-screen 3D scene" responsive. CSS absolute full. good.

Need perhaps check camera moving slowly around object while keeping it in view: motion screenshots show object centered and camera xyz changes. good.
Need "Rotate object continuously about at least two axes": x/y/z constants all change. yes.
Need "material visibly responds to two point lights of different colors": screenshots show magenta and cyan facets. yes.
Need "

Add subtle procedural starfield behind object": yes.
Need "Keep lights, object, and stars distinguishable without external textures": yes visible light markers.
Need "Pause/Resume and Reset": yes.
Need "Pause freezes both object and camera animation": verified with frozen motion frames and readout.
Need "Reset restores initial transforms": verified paused reset to t0 and exact initial coords; running reset restarts from t0.
Need "Resize renderer and camera aspect": code includes. Not directly tested.
Need "Sample several moments to inspect orientation, camera movement, colored lighting": done via motion frames.
Need "End with index.html present": yes.
Need "briefly report what actually checked and which behaviors remain unverified": final should mention checked and unverified. Need perhaps say resize handler not exercised with actual viewport change, keyboard shortcuts maybe untested. Could mention no JS console errors (only harmless WebGL driver performance warnings). Need maybe mention final file path clearly.

Need maybe perhaps make one more code improvement: check `renderer.setSize(width,height,false)` on resize with CSS `#scene canvas { width:100%;height:100%; }`. Since we call initial `setSize(w,h)` with updateStyle default true, inline style is width:1200px,height:800px. On resize call `setSize(w,h,false)` does not update inline style, so CSS `width:100%;height:100%` might be overridden by inline style from initial setSize! Important. In Three.js `renderer.setSize(width,height,updateStyle)` sets canvas.width/height; if updateStyle !== false, sets `domElement.style.width = width + 'px'`. Initially updateStyle default true -> inline style `width:1200px;height:800px`. On resize with `false`, inline styles remain at old dimensions; CSS stylesheet `width:100%` is lower specificity than inline style, so canvas will display old CSS size while drawing buffer is new size. That is a bug! Need fix. Either call `renderer.setSize(width,height)` in resize (update inline style) or remove inline styles after initial set and use CSS. We should update to `renderer.setSize(width,height);` in resize. Or use false consistently and ensure initial inline style isn't set by calling `renderer.setSize(width,height,false)` initially. Then CSS width/height 100% governs display size. Better: initial `renderer.setSize(window.innerWidth, window.innerHeight, false);`, resize `renderer.setSize(width,height

,false);`; canvas CSS width/height 100% from stylesheet. Since canvas has no inline dimensions style then CSS applies. Need also setPixelRatio. Yes. We should fix initial call. Could also call `setSize(w,h)` on resize to update inline style, simpler and robust. With CSS absolute full and inline style fixed to current px, it matches viewport exactly on resize. either. Need consider mobile CSS maybe fine. Let's use `renderer.setSize(window.innerWidth, window.innerHeight, false);` initial and `false` on resize, relying on CSS. This keeps full-screen on any resize. Need maybe browser direct resize verification then likely correct. Could perhaps test by adding a temporary script that sets viewport? Can't. But can inspect CSS and code. Need edit. Good catch.

Also `camera.aspect = width/height` if height 0 could be Infinity, but viewport height never zero. fine.
Need perhaps `window.visualViewport` resize? not required.
Need maybe set `renderer.domElement.style.width='100%'; style.height='100%'` after initial to override inline. Could simply call setSize(..., false) and CSS handles. Let's edit initial call.

Need reload and check still full-screen. Use browser reload then screenshot/inspect.

Good. Need perhaps maybe test actual resize by using browser tool? Could perhaps use `browser action=scroll` with `delta` maybe causes viewport resizing? no. Could perhaps use `key` with Ctrl+- zoom? Browser tool likely sends keyboard event to page, not browser chrome, so no. Could perhaps use CSS media emulation? no. We can maybe use a data attribute or call `window.dispatchEvent(new Event('resize'))` via injected script—not possible via browser tool. But perhaps can embed a temporary test button in file and click it to invoke `window.resizeTo`; no. Could use browser `type` into address bar? no. So unverified.

Need perhaps final syntax check after edit and file present. Already syntax unchanged. Could do quick `node --check` again and grep. Fine. Need maybe maybe final reload left app running; okay. Need perhaps report that resize handler was code-reviewed but not viewport-tested. Maybe mention keyboard shortcuts not explicitly tested (space/R), mobile layout not tested, actual device resize not tested. Need perhaps mention no JS errors; only WebGL GPU warnings. Good.

Need perhaps consider that report says "which behaviors remain unverified" plural. Include resize behavior and keyboard shortcuts/mobile, maybe actual WebGL on other browsers. But concise.

Need maybe final response with clear file path and checks. Could say:
"Saved `/tmp/job-WV2Nk6/index.html` (single HTML file, local `three.min.js` only)."
"Checked in browser: initial full-screen render and no JS errors; motion captures at t~0.3–7.9s showed x/y/z object rotation, changing camera position while object stayed centered, magenta/cyan facets, visible markers and starfield; Pause froze all four subsequent frames and telemetry t/object/camera; Reset while paused returned t=0.00 and exact initial object `(0.240,-0.380,0.090)` and camera `(0.000,0.288,7.194)`; Resume and Reset while running restarted from t~0; no external references; inline JS syntax check."
"Unverified: actual viewport resize/aspect change, keyboard shortcuts and mobile layout; no JS errors, only WebGL driver performance warnings."

Need ensure no mention that "exact initial" from code but we did compare with initial state. Fine.

Need maybe include that renderer/camera resize handler is present; not exercised due fixed browser viewport. Good.

Need maybe mention file has script tag plain local. fine.

Need perhaps ensure final file not modified after last reload