oneshotlm
Compare all models on this prompt →

3D solar system · gemini-3.5-flash-lite

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 · 16 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
bash {"command":"ls -la"}
toolResult

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

assistant
thinking
**Analyzing OrbitControls**

I'm currently checking if `OrbitControls` is bundled within `three.min.js`. If not, I'll explore custom implementation or robust alternative camera controls.


**Exploring Custom Controls**

I've confirmed `OrbitControls` isn't core. Developing custom orbit-drag controls seems straightforward and avoids external dependencies. I'm focusing on features: azimuth/altitude rotation via mouse drag, scrolling for zoom, and right-click or shift-drag for panning. This approach should be reliable, even without add-ons.

I am also considering all the features an amazing solar system can include. The Sun could be glowing emissive material, and maybe a point light emanating from it. The Planets would include Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune (and maybe Pluto!). Varied sizes, realistic relative distance/scaling (or stylized for good visuals), varied orbital speeds, tilt, textures/colors (procedurally generated canvas textures or colored materials with bump/specular simulation or nice gradients/rings). Rings will be for Saturn (and maybe Uranus). Moons will be added for Earth (Moon), Jupiter (Io, Europa, Ganymede, Callisto), etc. and last, a Starfield (Particle System)


**Expanding System's Features**

I am now focusing on features that will be critical for user experience and engagement. I'm finalizing orbit lines, UI controls, and an information panel. The UI will have speed controls, info displays, and focus modes. I'm prioritizing intuitive orbit-drag controls: left-drag for orbit, right-drag/shift-drag for pan, and scroll for zoom, with mobile touch controls. Procedural textures, Saturn's ring, and interactive raycasting will be included in the `index.html`.


bash {"command":"node -e \"const THREE = require('./three.min.js'); console.log(THREE.REVISION);\""}
toolResult

128

assistant
thinking
**Designing the App Structure**

I've decided to start the application's design in `index.html`, utilizing Three.js revision 128. My primary focus is establishing the structural components. I'm thinking of creating a full-screen canvas with an overlay HUD for UI elements like a top bar displaying the title, menus, and perhaps a side panel with more detailed user controls. I also want to separate other UI elements like the bottom and left panels.


**Defining UI Elements**

Now, I'm focusing on defining UI element functionality. The left panel will become the planet directory with quick-select options. I envision a bottom info card displaying detailed planet data when selected. Floating toggles will control orbits, labels, the starfield, and the camera reset. A crosshair will aid in target selection.


**Listing Celestial Bodies**

I'm now cataloging the celestial bodies to include: Mercury through Pluto. For each, I'm noting essential properties: name, radius, distance, speed, color/texture, tilt, moons, and detailed info. I'm considering using procedural canvas textures to uniquely represent each planet. Also, I'm working to create orbit lines, and I'm planning to use `THREE.LineLoop` with `THREE.EllipseCurve`.


write index.html (52330 bytes)
toolResult

Successfully wrote 52330 bytes to index.html

assistant
bash {"command":"node -c index.html"}
toolResult

node:internal/modules/esm/get_format:236 throw new ERR_UNKNOWN_FILE_EXTENSION(ext, filepath); ^ TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".html" for /tmp/ws/index.html at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:236:9) at defaultGetFormat (node:internal/modules/esm/get_format:262:36) at checkSyntax (node:internal/main/check_syntax:67:20) { code: 'ERR_UNKNOWN_FILE_EXTENSION' } Node.js v24.18.1 Command exited with code 1

assistant
bash {"command":"node -e \"\nconst fs = require('fs');\nconst html = fs.readFileSync('index.html', 'utf8');\nconst scriptMatch = html.match(/<scr
toolResult

Found scripts: 1

assistant
bash {"command":"node -e \"\nconst fs = require('fs');\nconst html = fs.readFileSync('index.html', 'utf8');\nconst match = html.match(/<script>([
toolResult

Script syntax OK

assistant
bash {"command":"git status"}
toolResult

fatal: not a git repository (or any parent up to mount point /) Stopping at filesystem boundary (GIT_DISCOVERY_ACROSS_FILESYSTEM not set). Command exited with code 128

assistant

I have built a complete, interactive 3D solar system web application in a single self-contained `index.html` file using the pre-provided local `three.min.js` library. ### Key Features: 1. **Procedural Celestial Bodies**: The Sun, Mercury, Venus, Earth (with Moon), Mars, Jupiter, Saturn (with rings), Uranus (with rings), Neptune, and Pluto, rendered with procedural canvas textures, distinct sizes, orbital speeds, and self-rotational speeds. 2. **Immersive Starfield**: A sparkling particle starfield of 8,000 randomized stars with color variations. 3. **Orbit-Drag Camera Controls**: Smooth custom orbit controls supporting left-click drag to orbit, right-click/shift drag to pan, scroll wheel to zoom, and smooth damping. 4. **Interactive UI / HUD**: - Time controls (Play/Pause and variable speed multiplier slider from 0x to 50x). - Planet directory sidebar and clickable 3D objects with raycasting selection. - Comprehensive info panel displaying planetary stats (radius, distance, orbital period, surface temperature, descriptions) and a "Focus Camera" tracking button. - Toggles for orbit lines and 3D floating labels. 5. **Completely Self-Contained**: All CSS, JavaScript, textures, and UI elements are inline in `index.html` with zero external dependencies or network requests.

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

modelgemini-3.5-flash-lite
vendorGoogle
harnesspi-agent
generated2026-08-01

EVALUATION

4/5 working

3D solar system with sun, orbiting planets, orbit-drag camera zoom, and info panel; planets appear small/static in these frames.

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.2%
on click0.5%
on drag1.3%
on wheel1.5%
on enter + space0.2%
on arrow keys0.2%
on w/a/s/d0.7%
frame spread29.5 / 255
console errors0
js errors none

METRICS

runtime48.5s
tokens in96k
tokens out17k
cached53k
cost / run$0.0572