oneshotlm
Compare all models on this prompt →

Rubik's Cube · minimax-m2.1

Using the pre-provided three.min.js (global THREE), render an interactive 3D Rubik's Cube with clickable face rotations, orbit-drag camera, and a scramble button.

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

Using the pre-provided three.min.js (global THREE), render an interactive 3D Rubik's Cube with clickable face rotations, orbit-drag camera, and a scramble button.

assistant
thinking
The user wants me to create an interactive 3D Rubik's Cube using Three.js. Let me first check what's in the current directory to understand the available files.

I need to:
1. Check the current directory for files
2. Create a single HTML file with:
   - Three.js loaded from three.min.js
   - A 3D Rubik's Cube rendered
   - Clickable face rotations
   - Orbit-drag camera (OrbitControls)
   - A scramble button

Let me start by checking what files are available.
bash {"command":"ls -la /tmp/ws"}
toolResult

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

assistant
thinking
I have the three.min.js file available. Now I'll create the index.html with a fully functional Rubik's Cube. Let me design this:

1. **Rubik's Cube Structure**: A 3x3x3 cube made of 27 smaller cubies (though the center one isn't visible)
2. **Colors**: Standard Rubik's cube colors (white, yellow, red, orange, blue, green)
3. **Face Rotation**: Click on a face to rotate it clockwise, with animation
4. **Orbit Controls**: Use OrbitControls for camera manipulation
5. **Scramble Button**: Randomly scramble the cube

Let me write this comprehensive single-file application.
write /tmp/ws/index.html (18537 bytes)
toolResult

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

assistant
thinking
I've created a complete interactive 3D Rubik's Cube with:

1. **Three.js rendering** - Using the pre-loaded three.min.js
2. **Clickable face rotations** - Click on any cube face to rotate that layer
3. **Orbit-drag camera** - Custom OrbitControls implementation for camera manipulation
4. **Scramble button** - Randomly scrambles the cube with 20 random moves
5. **Reset button** - Resets the cube to solved state

The implementation includes:
- Standard Rubik's cube colors (white, yellow, red, orange, blue, green)
- Smooth animated face rotations with easing
- Animation queue system to handle rapid clicks
- Touch support for mobile devices
- Responsive design

Let me verify the file was created correctly.
bash {"command":"ls -la /tmp/ws/"}
toolResult

total 612 drwxr-sr-x. 2 node node 44 Aug 1 20:42 . drwxrwsrwx. 3 root node 16 Aug 1 20:41 .. -rw-r--r--. 1 node node 18541 Aug 1 20:42 index.html -rw-r--r--. 1 node node 603445 Aug 1 20:41 three.min.js

assistant
thinking
The file was created. Let me verify the HTML is valid by checking a snippet to make sure it's properly structured.

Done! I've created a fully interactive 3D Rubik's Cube in `/tmp/ws/index.html` with: **Features:** - **Clickable face rotations** - Click any visible face to rotate that layer clockwise (uses raycasting to detect clicked cubie and face) - **Orbit-drag camera** - Click and drag to rotate the view around the cube, scroll to zoom - **Scramble button** - Performs 20 random moves to scramble the cube - **Reset button** - Instantly resets to solved state **Technical details:** - Uses Three.js (loaded from local `three.min.js`) - Custom OrbitControls implementation (no external dependencies) - Smooth animated rotations with eased timing - Animation queue to handle rapid clicks - Standard Rubik's cube colors (white/yellow, red/orange, green/blue) - Touch support for mobile devices - Fully self-contained with inline CSS and JS

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

modelminimax-m2.1
vendorMiniMax
harnesspi-agent
generated2026-08-01

EVALUATION

4/5 working

3D Rubik's Cube renders cleanly, click rotates a face, drag/wheel orbit camera; keyboard inputs have no effect (not required).

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.0%
on click2.5%
on drag9.1%
on wheel5.0%
on enter + space0.0%
on arrow keys0.0%
on w/a/s/d0.0%
frame spread38.5 / 255
console errors0
js errors none

METRICS

runtime41.6s
tokens in2.2k
tokens out4.8k
cached13k
cost / run$0.0068