oneshotlm
Compare all models on this prompt →

3D solar system · gemma-4-31b-it

Using the pre-provided three.min.js (global THREE), build a 3D solar system with the sun and orbiting planets at varied speeds and sizes, orbit-drag camera controls, and a starfield.

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

Using the pre-provided three.min.js (global THREE), build a 3D solar system with the sun and orbiting planets at varied speeds and sizes, orbit-drag camera controls, and a starfield.

assistant
thinking
The user wants a 3D solar system built as a single-page web app (`index.html`).
Key requirements:
1.  Use `three.min.js` (already present in the directory).
2.  Sun and orbiting planets with different sizes and speeds.
3.  Orbit-drag camera controls (since I can't use external CDNs like `OrbitControls.js`, I'll have to implement a simple orbit camera or use a basic version if I can find it, but typically OrbitControls is a separate file. I will implement a custom simple orbit camera if needed, or try to see if I can simulate it with mouse events).
4.  Starfield.
5.  All-in-one `index.html` (CSS and JS inline).
6.  No external resources/CDNs.

Plan:
1.  Verify `three.min.js` is present.
2.  Create `index.html`.
3.  Implement the 3D scene:
    *   Scene, Camera (Perspective), Renderer.
    *   Sun at center (emissive material).
    *   Planets:
        *   Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune.
        *   Each planet needs a mesh and a pivot object (for rotation around the sun).
        *   Different sizes and orbit speeds.
    *   Saturn's rings.
    *   Starfield: A large sphere or many points distributed randomly.
4.  Implement orbit controls manually since `OrbitControls.js` is likely not provided as a separate file (the prompt only mentioned `three.min.js`).
    *   Mouse drag to rotate.
    *   Mouse wheel to zoom.
5.  Animation loop for planetary motion.

Let's check if `three.min.js` is there.
bash {"command":"ls -F"}
toolResult

three.min.js

assistant
thinking
Okay, `three.min.js` is present. Now I will write the `index.html`.

I'll use simple colors for planets since I can't use external textures.

Orbit controls implementation:
- Store `theta` (horizontal angle) and `phi` (vertical angle).
- On mouse move (while clicking), update `theta` and `phi`.
- Update camera position based on `theta`, `phi`, and `radius`.

Planetary data (relative):
- Mercury: size 0.4, dist 5, speed 0.04
- Venus: size 0.9, dist 8, speed 0.015
- Earth: size 1.0, dist 11, speed 0.01
- Mars: size 0.5, dist 14, speed 0.008
- Jupiter: size 2.5, dist 20, speed 0.004
- Saturn: size 2.1, dist 26, speed 0.002
- Uranus: size 1.5, dist 32, speed 0.001
- Neptune: size 1.5, dist 38, speed 0.0008

I'll make the sun glow using a basic material and maybe a point light inside it.

Wait, if I can't use OrbitControls.js, I can implement a basic one.
Actually, I can just use `THREE.PerspectiveCamera` and update its position based on spherical coordinates.

Let's write the code.
write index.html (7092 bytes)
toolResult

Successfully wrote 7092 bytes to index.html

assistant
thinking
I have created the `index.html` file. It includes:
- A `three.min.js` script reference.
- A 3D scene with a Sun, 8 planets with relative sizes and speeds.
- Orbit lines for planets.
- Saturn's rings.
- A starfield created with `THREE.Points`.
- Custom orbit controls (drag to rotate, scroll to zoom).
- Responsive resizing.
- Basic lighting.

I should verify that the logic is sound and the orbit controls work as expected. Since I cannot run the code and see it visually in this environment, I'll double check the math for the camera position.

`camera.position.x = radius * Math.sin(phi) * Math.cos(theta);`
`camera.position.y = radius * Math.cos(phi);`
`camera.position.z = radius * Math.sin(phi) * Math.sin(theta);`

This is standard spherical coordinates mapping to Cartesian coordinates.
- $\phi$ is the angle from the positive Y-axis (polar angle).
- $\theta$ is the angle in the XZ plane (azimuthal angle).
This should work correctly.

One minor detail: `THREE.MeshPhongMaterial` requires light to be visible. I have a `PointLight` at (0,0,0) and an `AmbientLight`. This should be sufficient.

The `THREE.RingGeometry` for orbits and Saturn's rings might need `side: THREE.DoubleSide` to be visible from both directions. I've included that.

Final check on the requirements:
- "single-page web app": Yes.
- "all into one self-contained file named index.html": Yes.
- "CSS in <style> tag, JS in <script> tag": Yes.
- "NO external resources, CDNs": Yes.
- "three.min.js" loaded as local script: Yes.
- "3D solar system with sun and orbiting planets at varied speeds and sizes": Yes.
- "orbit-drag camera controls": Yes (custom implementation).
- "starfield": Yes.

Everything seems to be in order.

I have created a comprehensive 3D solar system simulation in a single `index.html` file. The application includes: - **Planetary System**: All 8 planets with relative sizes, distances, and orbital speeds. - **Visual Enhancements**: - An emissive Sun at the center. - Saturn's planetary rings. - Orbit paths for each planet for better spatial orientation. - A dense starfield generated with 10,000 particles. - **Custom Camera Controls**: - **Rotation**: Left-click and drag to orbit around the system. - **Zoom**: Use the mouse wheel to zoom in and out. - **Technical Implementation**: - Utilizes `three.min.js` for 3D rendering. - Implements spherical coordinates for the orbit camera. - Uses a combination of `PointLight` (emanating from the Sun) and `AmbientLight` for realistic shading. - Fully responsive layout that adapts to window resizing. The file `index.html` is now present in the current directory.

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

modelgemma-4-31b-it
vendorGoogle
harnesspi-agent
generated2026-07-22

EVALUATION

4/5 working

Solar system with sun, orbiting planets, rings, starfield, and functional drag/wheel camera controls.

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 motion0.8%
on click0.5%
on drag0.8%
on wheel1.1%
on enter + space0.4%
on arrow keys0.5%
on w/a/s/d0.6%
frame spread14.4 / 255
console errors0
js errors none

METRICS

runtime100.6s
tokens in6.0k
tokens out3.6k
cached1.9k
cost / run$0.0022