oneshotlm
Compare all models on this prompt →

Rotating icosahedron · grok-build-0.1

Using the pre-provided three.min.js (global THREE), render a full-screen scene with a rotating icosahedron lit by two colored point lights, orbit-style auto-rotation, and a subtle starfield background.

⛨ sandboxed Open in new tab ↗
transcript · 8 messages
user

Using the pre-provided three.min.js (global THREE), render a full-screen scene with a rotating icosahedron lit by two colored point lights, orbit-style auto-rotation, and a subtle starfield background.

assistant
thinking
The task is: Build a single-page web app and write it ALL into one self-contained file named index.html in the current directory. CSS in a <style> tag, JS in a <script> tag, inline — do not create sep...
bash {"command":"ls -la /tmp/ws"}
toolResult

total 592 drwxr-sr-x. 2 node node 26 Aug 1 20:51 . drwxrwsrwx. 3 root node 16 Aug 1 20:51 .. -rw-r--r--. 1 node node 603445 Aug 1 20:51 three.min.js

assistant
thinking
The task is to build a single-page web app in one self-contained file named index.html. It must use the pre-provided three.min.js, which is in the current directory as a global THREE.
The task is to create an index.html file that uses three.min.js to render a full-screen scene with a rotating icosahedron lit by two colored point lights, with orbit-style auto-rotation, and a subtle starfield background. It must be self-contained, inline CSS and JS, no external resources.

I need to write the complete index.html content.

Key elements:

- DOCTYPE html

- html tag

- head with title, style for full screen

- body

- script src="three.min.js"

- script with the three.js code

- end body html

For full-screen: body { margin:0; overflow:hidden; background:black; }

In script:

Initialize scene, camera, renderer.

Add lights: two point lights with different colors, say red and blue.

Add icosahedron: geometry and material.

For auto-rotation: use requestAnimationFrame to rotate the mesh around its axis or orbit the camera.

"Orbit style auto-rotation" likely means the camera orbits around the object automatically, like in orbit controls but without controls, just auto.

I can position camera at distance, and rotate its position around y-axis.

Rotate the object.

I think rotating the object is simpler.

For starfield: points in a large sphere.

Let's 10000 stars for density, size 0.05, opacity 0.3.

Radius 100.

Icosahedron radius 1, camera distance 5.

Colors: light1 0xff0000 red, light2 0x0000ff blue.
write /tmp/ws/index.html (5836 bytes)
toolResult

Successfully wrote 5836 bytes to /tmp/ws/index.html

assistant
thinking
The user asked to build a single-page web app and write it ALL into one self-contained file named index.html. It should use the pre-provided three.min.js (global THREE), render a full-screen scene wit...
bash {"command":"ls -la /tmp/ws && head -30 /tmp/ws/index.html"}
toolResult

total 600 drwxr-sr-x. 2 node node 44 Aug 1 20:51 . drwxrwsrwx. 3 root node 16 Aug 1 20:51 .. -rw-r--r--. 1 node node 5836 Aug 1 20:51 index.html -rw-r--r--. 1 node node 603445 Aug 1 20:51 three.min.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rotating Icosahedron</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: #000000; font-family: sans-serif; } canvas { display: block; } .info { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.4); font-size: 12px; letter-spacing: 1px;

assistant
thinking
The file is created successfully. It's a single self-contained index.html that loads three.min.js via a plain script tag and implements everything inline.

Done. Created `/tmp/ws/index.html` — a fully self-contained single-file Three.js app using the provided `three.min.js`. Features: - Full-screen canvas with black background - Icosahedron with `MeshPhongMaterial` (subtle wireframe overlay) - Two colored point lights (cool blue + warm pink) - Slow orbit-style auto-rotating camera + independent icosahedron rotation - 2800-point subtle starfield with slight color/size variation and slow drift - Responsive resize handling - Zero external dependencies or network calls

TAKE IT TO CODE

A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.

RUN

modelgrok-build-0.1
vendorxAI · Grok
harnesspi-agent
generated2026-08-01

EVALUATION

4/5 working

Rotating icosahedron with two colored point lights (blue/pink) and subtle starfield; rotates automatically, unclear if inputs change behavior beyond rotation.

Vision grade · anthropic/claude-sonnet-5

MEASUREMENTS

Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.

idle motion3.9%
on click4.7%
on drag5.1%
on wheel5.4%
on enter + space5.4%
on arrow keys4.7%
on w/a/s/d5.6%
frame spread27.8 / 255
console errors0
js errors none

METRICS

runtime24.3s
tokens in4.7k
tokens out3.9k
cached5.6k
cost / run$0.0137