diff --git a/.changeset/cold-toes-warn.md b/.changeset/cold-toes-warn.md
new file mode 100644
index 00000000..e0504737
--- /dev/null
+++ b/.changeset/cold-toes-warn.md
@@ -0,0 +1,5 @@
+---
+'leva': minor
+---
+
+Add a joystick to Vector3d
diff --git a/demo/src/sandboxes/leva-busy/src/App.tsx b/demo/src/sandboxes/leva-busy/src/App.tsx
index 714947a8..74f27b7d 100644
--- a/demo/src/sandboxes/leva-busy/src/App.tsx
+++ b/demo/src/sandboxes/leva-busy/src/App.tsx
@@ -43,6 +43,8 @@ const ExtraControls = () => {
 
 function Controls() {
   const data = useControls({
+    vector2D: [10, 10],
+    vector3D: [10, 10, 10],
     dimension: '4px',
     string: { value: 'something', optional: true, order: -2 },
     range: { value: 0, min: -10, max: 10, order: -3 },
diff --git a/packages/leva/src/components/Button/Button.tsx b/packages/leva/src/components/Button/Button.tsx
index 599fb3d0..d275e100 100644
--- a/packages/leva/src/components/Button/Button.tsx
+++ b/packages/leva/src/components/Button/Button.tsx
@@ -5,7 +5,7 @@ import { Row } from '../UI'
 import { StyledButton } from './StyledButton'
 
 type ButtonProps = {
-  label: string
+  label: string | JSX.Element
 } & Omit<ButtonInput, 'type'>
 
 export function Button({ onClick, settings, label }: ButtonProps) {
diff --git a/packages/leva/src/components/UI/JoyCube.tsx b/packages/leva/src/components/UI/JoyCube.tsx
new file mode 100644
index 00000000..6177901b
--- /dev/null
+++ b/packages/leva/src/components/UI/JoyCube.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import { StyledJoyCubeFace, StyledJoyCube } from './StyledJoystick3d'
+
+export function JoyCube({
+  isTop,
+  isRight,
+  showFront = true,
+  showMid = true,
+  showRear = false,
+}: {
+  isTop?: boolean
+  isRight?: boolean
+  showFront?: boolean
+  showMid?: boolean
+  showRear?: boolean
+}) {
+  return (
+    <StyledJoyCube top={isTop} right={isRight}>
+      {showFront && (
+        <>
+          <StyledJoyCubeFace className="joycube-face--front" />
+          <StyledJoyCubeFace className="joycube-face--back" />
+          <StyledJoyCubeFace className="joycube-face--right" />
+          <StyledJoyCubeFace className="joycube-face--left" />
+          <StyledJoyCubeFace className="joycube-face--top" />
+          <StyledJoyCubeFace className="joycube-face--bottom" />
+        </>
+      )}
+      {showMid && (
+        <>
+          <StyledJoyCubeFace className="joycube-face--front-mid" />
+          <StyledJoyCubeFace className="joycube-face--back-mid" />
+          <StyledJoyCubeFace className="joycube-face--right-mid" />
+          <StyledJoyCubeFace className="joycube-face--left-mid" />
+          <StyledJoyCubeFace className="joycube-face--top-mid" />
+          <StyledJoyCubeFace className="joycube-face--bottom-mid" />
+        </>
+      )}
+      {showRear && (
+        <>
+          <StyledJoyCubeFace className="joycube-face--front-rear" />
+          <StyledJoyCubeFace className="joycube-face--back-rear" />
+          <StyledJoyCubeFace className="joycube-face--right-rear" />
+          <StyledJoyCubeFace className="joycube-face--left-rear" />
+          <StyledJoyCubeFace className="joycube-face--top-rear" />
+          <StyledJoyCubeFace className="joycube-face--bottom-rear" />
+        </>
+      )}
+    </StyledJoyCube>
+  )
+}
diff --git a/packages/leva/src/components/Vector2d/Joystick.tsx b/packages/leva/src/components/UI/Joystick.tsx
similarity index 86%
rename from packages/leva/src/components/Vector2d/Joystick.tsx
rename to packages/leva/src/components/UI/Joystick.tsx
index 20290241..127b7c07 100644
--- a/packages/leva/src/components/Vector2d/Joystick.tsx
+++ b/packages/leva/src/components/UI/Joystick.tsx
@@ -1,16 +1,16 @@
 import React, { useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react'
 import { useDrag } from '../../hooks'
 import { clamp, multiplyStep } from '../../utils'
-import { JoystickTrigger, JoystickPlayground } from './StyledJoystick'
+import { JoystickTrigger, JoystickPlayground, JoystickGrid } from './StyledJoystick'
 import { useTh } from '../../styles'
-import { Portal } from '../UI'
+import { Portal } from '.'
 import { useTransform } from '../../hooks'
-import type { Vector2d } from '../../types'
-import type { Vector2dProps } from './vector2d-types'
+import type { Vector2d, Vector3d } from '../../types'
+import type { Vector2dProps } from '../Vector2d/vector2d-types'
 
-type JoystickProps = { value: Vector2d } & Pick<Vector2dProps, 'onUpdate' | 'settings'>
+type JoystickProps = { value: Vector2d | Vector3d } & Pick<Vector2dProps, 'onUpdate' | 'settings'> & { children?: any }
 
-export function Joystick({ value, settings, onUpdate }: JoystickProps) {
+export function Joystick({ value, settings, onUpdate, children }: JoystickProps) {
   const timeout = useRef<number | undefined>()
   const outOfBoundsX = useRef(0)
   const outOfBoundsY = useRef(0)
@@ -52,13 +52,14 @@ export function Joystick({ value, settings, onUpdate }: JoystickProps) {
     if (outOfBoundsX.current) set({ x: outOfBoundsX.current * w })
     if (outOfBoundsY.current) set({ y: outOfBoundsY.current * -h })
     timeout.current = window.setInterval(() => {
-      onUpdate((v: Vector2d) => {
+      onUpdate((v: Vector2d | Vector3d) => {
         const incX = stepV1 * outOfBoundsX.current * stepMultiplier.current
         const incY = yFactor * stepV2 * outOfBoundsY.current * stepMultiplier.current
+
         return Array.isArray(v)
           ? {
-              [v1]: v[0] + incX,
-              [v2]: v[1] + incY,
+              [v1]: v[['x', 'y', 'z'].indexOf(v1)] + incX,
+              [v2]: v[['x', 'y', 'z'].indexOf(v2)] + incY,
             }
           : {
               [v1]: v[v1] + incX,
@@ -128,7 +129,7 @@ export function Joystick({ value, settings, onUpdate }: JoystickProps) {
       {joystickShown && (
         <Portal>
           <JoystickPlayground ref={playgroundRef} isOutOfBounds={isOutOfBounds}>
-            <div />
+            {children ? children : <JoystickGrid />}
             <span ref={spanRef} />
           </JoystickPlayground>
         </Portal>
diff --git a/packages/leva/src/components/UI/Joystick3d.tsx b/packages/leva/src/components/UI/Joystick3d.tsx
new file mode 100644
index 00000000..0b434283
--- /dev/null
+++ b/packages/leva/src/components/UI/Joystick3d.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import { Joystick } from './Joystick'
+import { useKeyPress } from '../../hooks/useKeyPress'
+import { JoystickButtons, KeyLabel } from './StyledJoystick3d'
+import { Button } from '../Button'
+import type { InternalVector2dSettings } from '../Vector2d/vector2d-types'
+import type { Vector3d } from '../../types'
+import type { Vector3dProps } from '../Vector3d/vector3d-types'
+import { JoyCube } from './JoyCube'
+
+type Joystick3dProps = { value: Vector3d } & Pick<Vector3dProps, 'onUpdate' | 'settings'>
+
+const joystick3dKeyBindings = [
+  { key: 'Control', keyLabel: 'ctrl', plane: 'xz', label: 'XZ' },
+  { key: '', keyLabel: '', plane: 'xy', label: 'XY' },
+  { key: 'Meta', keyLabel: 'meta', plane: 'zy', label: 'ZY' },
+]
+
+export function Joystick3d({ value, settings, onUpdate }: Joystick3dProps) {
+  const [plane, setPlane] = React.useState('xy')
+  const keyPress0 = useKeyPress(joystick3dKeyBindings[0].key)
+  // const keyPress1 = useKeyPress(joystick3dKeyBindings[1].key)
+  const keyPress2 = useKeyPress(joystick3dKeyBindings[2].key)
+
+  React.useEffect(() => {
+    if (keyPress0) setPlane(joystick3dKeyBindings[0].plane)
+    else if (keyPress2) setPlane(joystick3dKeyBindings[2].plane)
+    else setPlane(joystick3dKeyBindings[1].plane)
+  }, [keyPress0, keyPress2])
+
+  const settings2d = React.useMemo(() => {
+    const { keys, ...rest } = settings
+    return { keys: plane, ...rest } as unknown as InternalVector2dSettings
+  }, [settings, plane])
+
+  return (
+    <>
+      <Joystick value={value} settings={settings2d} onUpdate={onUpdate}>
+        <JoyCube isTop={keyPress0} isRight={keyPress2} />
+
+        <JoystickButtons>
+          {joystick3dKeyBindings.map((kb) => (
+            <Button
+              key={kb.label}
+              label={<ButtonLabel label={kb.label} keyLabel={kb.keyLabel || kb.key} />}
+              onClick={() => ''}
+              settings={{ disabled: plane !== kb.plane }}
+            />
+          ))}
+        </JoystickButtons>
+      </Joystick>
+    </>
+  )
+}
+
+function ButtonLabel({ label, keyLabel }: { label: string; keyLabel: string }) {
+  return (
+    <div>
+      <KeyLabel>{keyLabel}</KeyLabel>
+      <span>{label}</span>
+    </div>
+  )
+}
diff --git a/packages/leva/src/components/Vector2d/StyledJoystick.ts b/packages/leva/src/components/UI/StyledJoystick.ts
similarity index 69%
rename from packages/leva/src/components/Vector2d/StyledJoystick.ts
rename to packages/leva/src/components/UI/StyledJoystick.ts
index 69f40485..991c6a30 100644
--- a/packages/leva/src/components/Vector2d/StyledJoystick.ts
+++ b/packages/leva/src/components/UI/StyledJoystick.ts
@@ -31,43 +31,17 @@ export const JoystickPlayground = styled('div', {
   boxShadow: '$level2',
   position: 'fixed',
   zIndex: 10000,
-  overflow: 'hidden',
   $draggable: '',
   transform: 'translate(-50%, -50%)',
 
+  perspective: '100px',
+
   variants: {
     isOutOfBounds: {
       true: { backgroundColor: '$elevation1' },
       false: { backgroundColor: '$elevation3' },
     },
   },
-  '> div': {
-    position: 'absolute',
-    $flexCenter: '',
-    borderStyle: 'solid',
-    borderWidth: 1,
-    borderColor: '$highlight1',
-    backgroundColor: '$elevation3',
-    width: '80%',
-    height: '80%',
-
-    '&::after,&::before': {
-      content: '""',
-      position: 'absolute',
-      zindex: 10,
-      backgroundColor: '$highlight1',
-    },
-
-    '&::before': {
-      width: '100%',
-      height: 1,
-    },
-
-    '&::after': {
-      height: '100%',
-      width: 1,
-    },
-  },
 
   '> span': {
     position: 'relative',
@@ -78,3 +52,30 @@ export const JoystickPlayground = styled('div', {
     borderRadius: '50%',
   },
 })
+
+export const JoystickGrid = styled('div', {
+  position: 'absolute',
+  $flexCenter: '',
+  borderStyle: 'solid',
+  borderWidth: 1,
+  borderColor: '$highlight1',
+  width: '80%',
+  height: '80%',
+
+  '&::after,&::before': {
+    content: '""',
+    position: 'absolute',
+    zindex: 10,
+    backgroundColor: '$highlight1',
+  },
+
+  '&::before': {
+    width: '100%',
+    height: 1,
+  },
+
+  '&::after': {
+    height: '100%',
+    width: 1,
+  },
+})
diff --git a/packages/leva/src/components/UI/StyledJoystick3d.ts b/packages/leva/src/components/UI/StyledJoystick3d.ts
new file mode 100644
index 00000000..7daf43de
--- /dev/null
+++ b/packages/leva/src/components/UI/StyledJoystick3d.ts
@@ -0,0 +1,144 @@
+import { styled } from '../../styles'
+import { JoystickGrid } from './StyledJoystick'
+
+export const JoystickButtons = styled('div', {
+  $reset: '',
+  display: 'grid',
+  columnGap: 'var(--leva-space-colGap)',
+  gridAutoFlow: 'column dense',
+  alignItems: 'center',
+  padding: '0 var(--leva-space-colGap)',
+  // FIXME: StyledInput.ts and others show a fontSize of 0.8em, but setting that here doesn't work. Seem to be missing style context.
+  // Maybe App.jsx fontSizes should have a fontSize for controls: '9px' and not use 0.8em
+  // Maybe it's the reset above?
+  fontSize: 'calc(0.8 * var(--leva-fontSizes-root))',
+  position: 'absolute',
+  bottom: 'calc(-1 * var(--leva-sizes-rowHeight) - 2 * var(--leva-space-rowGap) + var(--leva-radii-sm))',
+  backgroundColor: 'var(--leva-colors-elevation2)',
+  borderRadius: 'var(--leva-radii-sm)',
+  width: 'var(--leva-sizes-joystickWidth)',
+  height: 'calc(2 * var(--leva-space-rowGap) + var(--leva-sizes-rowHeight))',
+})
+
+export const KeyLabel = styled('span', {
+  position: 'absolute',
+  top: '0',
+  right: '2px',
+  fontSize: '0.8em',
+  fontStyle: 'italic',
+})
+
+export const StyledJoyCubeFace = styled(JoystickGrid, {
+  // width: '$joystickWidth',
+  // height: '$joystickHeight'
+  width: '80px',
+  height: '80px',
+  backfaceVisibility: 'hidden',
+})
+
+export const StyledJoyCube = styled('div', {
+  '--joycube-size': '80px',
+  '--joycube-half-size': 'calc(var(--joycube-size) / 2)',
+  '--joycube-half-size-negative': 'calc(var(--joycube-size) / -2)',
+  '--joycube-opacity-mid': '0.5',
+  '--joycube-opacity-rear': '0.3',
+  position: 'absolute',
+  width: 'var(--joycube-size)',
+  height: 'var(--joycube-size)',
+  transformOrigin: 'var(--joycube-half-size) var(--joycube-half-size) var(--joycube-half-size-negative)',
+  transformStyle: 'preserve-3d',
+  transform: 'rotateY( 0deg) translateZ(var(--joycube-half-size-negative))',
+  variants: {
+    top: {
+      true: { transform: 'rotateX(-90deg) translateZ(var(--joycube-half-size-negative))' },
+    },
+    right: {
+      true: { transform: 'rotateY(-90deg) translateZ(var(--joycube-half-size-negative))' },
+    },
+  },
+  transition: 'transform 0.5s',
+
+  '> .joycube-face--front': {
+    transform: 'rotateY(  0deg) translateZ(var(--joycube-half-size))',
+  },
+
+  '> .joycube-face--front-mid': {
+    transform: 'rotateY(  0deg) translateZ(0px)',
+    opacity: 'var(--joycube-opacity-mid)',
+  },
+
+  '> .joycube-face--front-rear': {
+    transform: 'rotateY(  0deg) translateZ(var(--joycube-half-size-negative))',
+    opacity: 'var(--joycube-opacity-rear)',
+  },
+
+  '> .joycube-face--right': {
+    transform: 'rotateY( 90deg) translateZ(var(--joycube-half-size))',
+  },
+
+  '> .joycube-face--right-mid': {
+    transform: 'rotateY( 90deg) translateZ(0px)',
+    opacity: 'var(--joycube-opacity-mid)',
+  },
+
+  '> .joycube-face--right-rear': {
+    transform: 'rotateY( 90deg) translateZ(var(--joycube-half-size-negative))',
+    opacity: 'var(--joycube-opacity-rear)',
+  },
+
+  '> .joycube-face--back': {
+    transform: 'rotateY(180deg) translateZ(var(--joycube-half-size))',
+  },
+
+  '> .joycube-face--back-mid': {
+    transform: 'rotateY(180deg) translateZ(0px)',
+    opacity: 'var(--joycube-opacity-mid)',
+  },
+
+  '> .joycube-face--back-rear': {
+    transform: 'rotateY(180deg) translateZ(var(--joycube-half-size-negative))',
+    opacity: 'var(--joycube-opacity-rear)',
+  },
+
+  '> .joycube-face--left': {
+    transform: 'rotateY(-90deg) translateZ(var(--joycube-half-size))',
+  },
+
+  '> .joycube-face--left-mid': {
+    transform: 'rotateY(-90deg) translateZ(0px)',
+    opacity: 'var(--joycube-opacity-mid)',
+  },
+
+  '> .joycube-face--left-rear': {
+    transform: 'rotateY(-90deg) translateZ(var(--joycube-half-size-negative))',
+    opacity: 'var(--joycube-opacity-rear)',
+  },
+
+  '> .joycube-face--top': {
+    transform: 'rotateX( 90deg) translateZ(var(--joycube-half-size))',
+  },
+
+  '> .joycube-face--top-mid': {
+    transform: 'rotateX( 90deg) translateZ(0px)',
+    opacity: 'var(--joycube-opacity-mid)',
+  },
+
+  '> .joycube-face--top-rear': {
+    transform: 'rotateX( 90deg) translateZ(var(--joycube-half-size-negative))',
+    opacity: 'var(--joycube-opacity-rear)',
+  },
+
+  '> .joycube-face--bottom': {
+    transform: 'rotateX(-90deg) translateZ(var(--joycube-half-size))',
+  },
+
+  '> .joycube-face--bottom-mid': {
+    transform: 'rotateX(-90deg) translateZ(0px)',
+    opacity: 'var(--joycube-opacity-mid)',
+  },
+
+  '> .joycube-face--bottom-rear': {
+    transform: 'rotateX(-90deg) translateZ(var(--joycube-half-size-negative))',
+    opacity: 'var(--joycube-opacity-rear)',
+  },
+})
diff --git a/packages/leva/src/components/Vector2d/Vector2d.tsx b/packages/leva/src/components/Vector2d/Vector2d.tsx
index 4a2fec02..30b60086 100644
--- a/packages/leva/src/components/Vector2d/Vector2d.tsx
+++ b/packages/leva/src/components/Vector2d/Vector2d.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { styled } from '../../styles'
 import { Vector } from '../Vector'
 import { Label, Row } from '../UI'
-import { Joystick } from './Joystick'
+import { Joystick } from '../UI/Joystick'
 import { useInputContext } from '../../context'
 import type { Vector2dProps } from './vector2d-types'
 
diff --git a/packages/leva/src/components/Vector3d/Vector3d.tsx b/packages/leva/src/components/Vector3d/Vector3d.tsx
index c9649e74..15ba2db8 100644
--- a/packages/leva/src/components/Vector3d/Vector3d.tsx
+++ b/packages/leva/src/components/Vector3d/Vector3d.tsx
@@ -3,13 +3,18 @@ import { Vector } from '../Vector'
 import { Label, Row } from '../UI'
 import { useInputContext } from '../../context'
 import type { Vector3dProps } from './vector3d-types'
+import { Joystick3d } from '../UI/Joystick3d'
+import { Container } from '../Vector2d'
 
 export function Vector3dComponent() {
   const { label, displayValue, onUpdate, settings } = useInputContext<Vector3dProps>()
   return (
     <Row input>
       <Label>{label}</Label>
-      <Vector value={displayValue} settings={settings} onUpdate={onUpdate} />
+      <Container withJoystick={!!settings.joystick}>
+        {settings.joystick && <Joystick3d value={displayValue} settings={settings} onUpdate={onUpdate} />}
+        <Vector value={displayValue} settings={settings} onUpdate={onUpdate} />
+      </Container>
     </Row>
   )
 }
diff --git a/packages/leva/src/components/Vector3d/index.ts b/packages/leva/src/components/Vector3d/index.ts
index 3ace61bb..4798ddd3 100644
--- a/packages/leva/src/components/Vector3d/index.ts
+++ b/packages/leva/src/components/Vector3d/index.ts
@@ -1,10 +1,18 @@
 import { Vector3dComponent } from './Vector3d'
 import { getVectorPlugin } from '../Vector'
 import { createInternalPlugin } from '../../plugin'
+import type { InternalVector2dSettings } from '../Vector2d/vector2d-types'
 
 export * from './Vector3d'
 
+const plugin = getVectorPlugin(['x', 'y', 'z'])
+const normalize = ({ joystick = true, ...input }: any) => {
+  const { value, settings } = plugin.normalize(input)
+  return { value, settings: { ...settings, joystick } as InternalVector2dSettings }
+}
+
 export default createInternalPlugin({
   component: Vector3dComponent,
-  ...getVectorPlugin(['x', 'y', 'z']),
+  ...plugin,
+  normalize,
 })
diff --git a/packages/leva/src/components/Vector3d/vector3d-types.ts b/packages/leva/src/components/Vector3d/vector3d-types.ts
index ca67975d..bcd572d2 100644
--- a/packages/leva/src/components/Vector3d/vector3d-types.ts
+++ b/packages/leva/src/components/Vector3d/vector3d-types.ts
@@ -1,5 +1,8 @@
 import type { LevaInputProps, Vector3d, VectorObj } from '../../types'
 import type { InternalVectorSettings } from '../Vector/vector-types'
 
-export type InternalVector3dSettings = InternalVectorSettings<string, [string, string, string]>
+// FIXME: Should we add our keybindings here?
+export type InternalVector3dSettings = InternalVectorSettings<string, [string, string, string]> & {
+  joystick: boolean | 'invertY'
+}
 export type Vector3dProps = LevaInputProps<Vector3d, InternalVector3dSettings, VectorObj>
diff --git a/packages/leva/src/hooks/useKeyPress.ts b/packages/leva/src/hooks/useKeyPress.ts
new file mode 100644
index 00000000..463a3681
--- /dev/null
+++ b/packages/leva/src/hooks/useKeyPress.ts
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * @use const aKeyPress = useKeyPress('a')
+ */
+export function useKeyPress(targetKey: string) {
+  const [keyPressed, setKeyPressed] = useState(false)
+
+  // NOTE: consider event.getModifierState("CapsLock") etc.
+  function downHandler(e: KeyboardEvent) {
+    if (e.key === targetKey) {
+      setKeyPressed(true)
+    }
+  }
+
+  function upHandler(e: KeyboardEvent) {
+    if (e.key === targetKey) {
+      setKeyPressed(false)
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('keydown', downHandler)
+    window.addEventListener('keyup', upHandler)
+
+    return () => {
+      window.removeEventListener('keydown', downHandler)
+      window.removeEventListener('keyup', upHandler)
+    }
+  }, [])
+
+  return keyPressed
+}