Interactive Cube Visualization Demo

Test and explore all cube renderers with real-time controls

Controls

Enter WCA notation or pick a preset. All renderers update live.

2D Case View Renderer

Compact OLL/PLL case view showing top face with surrounding edges.

Controls

3D Isometric View Renderer

Interactive 3D cube using isometric projection with multiple viewing angles.

Controls

Cube Net Renderer

Complete cube state showing all 6 faces in a flat cross pattern.

Controls

Size Comparison

Different sizes for different use cases.

size=33
size=50
size=66
size=100
size=133

Three.js 3D Cube

Interactive 3D cube with real-time move animation — black plastic core with separate colored stickers.

Status:Idle|Moves queued:0|Drag to orbit

Component API

Simplified API - just pass a size parameter and the renderer calculates everything internally.

CubeView (2D Case View)

  • state - FaceletsModel object to render
  • size - Overall size (default: 100)
  • grayscaleNonYellow - For OLL visualization (default: false)
  • • Sticker size and gaps calculated automatically
  • • No borders for clean modern look

CubeView3D (3D View)

  • state - FaceletsModel object to render
  • size - Overall size (default: 100)
  • view - Viewing angle: front, back, left, right, top, bottom
  • • Automatic backface culling
  • • Automatic depth sorting
  • • Zero dependencies (pure SVG)