Props
| Prop | Type | Default | What it does |
|---|---|---|---|
orientation | { pitch, yaw } or { quaternion } or { matrix, order? } | required | Current camera. Pitch 0 is the top view, 90 a side view, 180 the bottom; yaw 0 looks at Front, 90 at Right. The quaternion (x, y, z, w) and 3x3 matrix (column-major by default) are the camera's world rotation, so rolled and upside-down views show correctly. |
convention | { up, front, handedness } | { up: 'z', front: '-y', handedness: 'right' } | World axes: which axis is up, which axis the Front face looks along, right- or left-handed. Y_UP_CONVENTION is exported for three.js style scenes. |
features | partial ViewCubeFeatures | all on except axisArms, compass | faceClick, edgeClick, cornerClick, drag, snap, doubleClick, homeButton, faceLabels, axisArms, compass. |
snapAngle | degrees | 12 | Magnetic pull range around each 90 degree step while dragging. |
clickAction | action or { face, edge, corner } | 'view' | 'view', 'view-and-fit', 'fit' or 'none'. |
doubleClickAction | action or { face, edge, corner } | faces 'view-and-fit', edges and corners 'view' | As above. |
poleHeading | { click, doubleClick } | { click: 'keep', doubleClick: -90 } | Heading for Top and Bottom: 'keep' snaps the current heading to 90 degrees, a number sets it. |
home | { pitch, yaw, fit } | { pitch: 45, yaw: 45, fit: true } | The home view. |
homePlacement | 'below', 'above', 'left', 'right' | 'below' | Side of the cube the home button sits on. It is always outside the cube's face, edge and corner zones. |
renderHomeButton | (activate, label) => ReactNode | built-in button | Replace the home button; it is placed by homePlacement like the built-in one. |
transitions | per kind { duration, easing } | face and home 250 ms cubicOut; edge, corner and snap 0 | Kinds: face, edge, corner, home, snap. Easing is a name or a function. |
animate | boolean | true | false reports every duration as 0. |
respectReducedMotion | boolean | true | prefers-reduced-motion: reduce reports every duration as 0. |
size | px | 64 | Face edge length. |
scale | number | 0.65 | Display scale of the cube. |
perspective | px | 300 | CSS perspective. |
hitZones | { mouse, pen, touch } of { edge, corner } px | mouse and pen 10 / 20, touch 14 / 26 | Edge band thickness and corner disc size. Wider zones also move the home button further out. |
minTouchTarget | px | 44 | A touch anywhere within this target picks the nearest part, however small the cube. |
pitchLimits | { min, max } | none (0 to 180) | Clamps drag and targets. |
dragDegreesPerPixel | number | 0.5 | Drag speed. |
labels | { faces, edge, corner, home, cube } | English | Face text and accessible names, for translation. |
className, style | On the root; style may set CSS variables. |
Defaults
The defaults reproduce a desktop CAD cube: 64 px faces at 0.65, a 350 ms double-click window, 200 ms single-click delay, 6 px drag threshold, 12 degree magnetic snap, 250 ms cubic ease-out for faces and home, edges and corners instant.