oneshotlm
Compare all models on this prompt →

Rubik's Cube · glm-4.7

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 · 6 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 a single-page web app that renders an interactive 3D Rubik's Cube using Three.js. The requirements are:

1. Use the provided three.min.js file (global THREE)
2. Interactive 3D Rubik's Cube
3. Clickable face rotations
4. Orbit-drag camera
5. Scramble button
6. Everything in one self-contained index.html file
7. No external resources, CDNs, or network requests

Let me create this interactive Rubik's Cube:

1. Set up the scene, camera, and renderer
2. Create a 3x3x3 Rubik's Cube structure (27 small cubes, but we only see the outer ones)
3. Make it interactive - clicking on faces to rotate layers
4. Add orbit controls for camera rotation
5. Add a scramble button

Let me write this comprehensive HTML file.

I'll create an interactive 3D Rubik's Cube with clickable face rotations, orbit-drag camera, and a scramble button. Let me build this complete single-page application.

write /tmp/ws/index.html (19231 bytes)
toolResult

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

assistant
thinking
I've created the index.html file with a complete 3D Rubik's Cube interactive application. Let me verify it was created properly and check that it has all the required features.

The file includes:
1. Three.js loading from the local three.min.js file
2. A 3x3x3 Rubik's Cube with proper colors for each face
3. Orbit-drag camera controls (click and drag to rotate around the cube)
4. Clickable face rotations (click on cube faces to rotate layers)
5. A scramble button that randomizes the cube
6. A reset button to restore the cube to solved state
7. All CSS inline in a <style> tag
8. All JS inline in a <script> tag
9. No external CDNs or network requests

Let me verify the file exists.
bash {"command":"ls -la /tmp/ws/index.html"}
toolResult

-rw-r--r--. 1 node node 19235 Aug 2 03:24 /tmp/ws/index.html

assistant
thinking
The file was created successfully. The index.html file is 19235 bytes and is now present in the current directory. The application includes:

1. **3D Rubik's Cube** - A complete 3x3x3 cube with proper colors (Red, Orange, White, Yellow, Green, Blue)
2. **Orbit-drag camera** - Click and drag on the canvas to rotate the camera around the cube
3. **Clickable face rotations** - Click on cube faces to rotate the corresponding layers
4. **Scramble button** - Randomizes the cube with 20 random moves
5. **Reset button** - Returns the cube to its solved state
6. **All self-contained** - CSS in <style>, JS in <script>, loads three.min.js locally
7. **No external resources** - Uses only the provided three.min.js file

The implementation includes:
- Proper lighting with ambient and directional lights
- Smooth animations with easing functions
- Raycasting for accurate click detection on cube faces
- Camera controls that update spherical coordinates
- State management for tracking cube positions and rotations
- Responsive design with a gradientbackground

Done! I've created a complete interactive 3D Rubik's Cube in `index.html` with: **Features:** - 🎲 **3D Rubik's Cube** - Full 3x3x3 cube with authentic face colors (Red/Orange/White/Yellow/Green/Blue) - 🖱️ **Orbit-drag camera** - Click and drag anywhere on the canvas to rotate around the cube - 👆 **Clickable face rotations** - Click on any cube face to rotate that layer - 🔀 **Scramble button** - Performs 20 random moves to scramble the cube - 🔄 **Reset button** - Restores the cube to solved state and resets camera **Technical details:** - Uses the provided `three.min.js` (global THREE) - Smooth animations with easing functions - Raycasting for accurate click detection - Proper lighting with ambient and directional lights - All CSS and JS inline (no external files, CDNs, or network requests) - Gradient background with modern UI styling Open `index.html` in a browser to interact with the cube!

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

modelglm-4.7
vendorZ.ai · GLM
harnesspi-agent
generated2026-08-02

EVALUATION

4/5 working

3D Rubik's Cube rotates on click and drag with camera orbit; keys have no effect (not part of stated 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.0%
on click4.6%
on drag9.3%
on wheel0.0%
on enter + space0.0%
on arrow keys0.0%
on w/a/s/d0.0%
frame spread41.5 / 255
console errors0
js errors none

METRICS

runtime121.8s
tokens in13k
tokens out4.9k
cached12k
cost / run$0.0102