Rubik's Cube · mimo-v2.5-pro
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.
transcript · 6 messages
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.
thinking
Let me build an interactive 3D Rubik's Cube with: 1. 3D rendering using three.min.js 2. Clickable face rotations 3. Orbit-drag camera 4. A scramble button Let me create a comprehensive single-file implementation.
/workspace/index.html (13375 bytes)Successfully wrote 13375 bytes to /workspace/index.html
thinking
The file has been created. Let me verify it exists and check that three.min.js is present.
{"command":"ls -la /workspace/three.min.js /workspace/index.html"}-rw-r--r-- 1 node node 14246 Jul 22 17:59 /workspace/index.html -rw-r--r-- 1 node node 603445 Jul 22 17:57 /workspace/three.min.js
thinking
The file is ready. Let me verify it's self-contained and properly uses the local three.min.js file.
Done — `index.html` is fully self-contained alongside the provided `three.min.js`. ### What's included | Feature | Details | |---|---| | **3D Rubik's Cube** | All 26 cubies with standard colour scheme (white-top, green-front) rendered as rounded BoxGeometry with per-face materials | | **Orbit-drag camera** | Click-drag rotates the camera around the cube on a spherical track; scroll-wheel zooms in/out | | **Click to select a cubie** | Click any visible cubie — it gets a yellow wireframe highlight showing which face layer you're targeting | | **Arrow-key face rotations** | `←`/`→` rotate the selected cubie's **Y-layer**, `↑`/`↓` rotate the **X-layer**, `Q`/`E` rotate the **Z-layer**. Direction is indicated in the status bar. | | **Smooth animation** | Each 90° rotation animates at ~12 frames with eased snapping; the cube blocks input during animation | | **Logical state tracking** | After each rotation, cubie `userData.gridPos` is updated so subsequent face selections stay correct | | **🔀 Scramble button** | Queues 20 random face moves and chains them with smooth animation | | **🔄 Reset button** | Instantly rebuilds the solved cube and clears the move counter | | **Move counter** | Displayed in the top-right corner | ### Controls summary - **Drag** — orbit camera - **Scroll** — zoom - **Click** a cubie — select it - **Arrow keys** — rotate that cubie's horizontal/vertical face - **Q / E** — rotate that cubie's front/back face
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
EVALUATION
3D Rubik's cube with orbit drag/wheel rotation, clickable cubie selection, and arrow-key face rotation animating mid-turn.
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.