RotationQuaternion

Integrates the quaternion rotation control from 0b5vr's tweakpane-plugin-rotation.

Svelte Tweakpane UI extends the original API to support tuple values in addition to object values. (Useful when working with frameworks like three.js / threlte.)

A utility function Utils.quaternionToCssTransform() is also provided to easily convert a euler rotation value object or tuple into a CSS transform string.

See also <RotationEuler> if you're not into the whole w thing.

Usage outside of a <Pane> component will implicitly wrap the profiler in <Pane position="inline">.

Note that Svelte Tweakpane UI embeds a functionally identical fork of the plugin with build optimizations.

---

Example

Demo

+0.000000
+0.000000
+0.000000
+0.000000

Code

RotationQuaternionExample.svelte

<script lang="ts">
  import {
    Button,
    RotationQuaternion,
    type RotationQuaternionValue,
    Utils,
  } from 'svelte-tweakpane-ui'

  // Value could also be an object
  // e.g. {x: 0, y: 0, z: 0, w: 0}
  let value: RotationQuaternionValue = [0, 0, 0, 0]

  $: transform = Utils.quaternionToCssTransform(value)
  $: valueRows = Array.isArray(value)
    ? value.map((v) => `${v >= 0 ? '+' : ''}${v.toFixed(6)}`).join('\n')
    : ''
</script>

<RotationQuaternion
  bind:value
  expanded={true}
  label="CSS Rotation"
  picker="inline"
/>
<Button on:click={() => (value = [0, 0, 0, 0])} title="Reset" />

<div class="billboard" style:transform>
  <pre>{valueRows}</pre>
</div>

<style>
  div.billboard {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 100%;
    background: linear-gradient(45deg, magenta, orange);
  }
</style>

---

Props

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

theme optional
Description	Custom color scheme. If undefined, inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().
Type	Theme
Default	undefined

label optional
Description	Text displayed next to control.
Type	string
Default	undefined

value bindablerequired
Description	The value to control. The quaternion value to control. Tuple values are a convenience added by Svelte Tweakpane UI, and is not part of the original TweakpaneRotationPlugin API.
Type	RotationQuaternionValue

userExpandable optional
Description	Allow users to interactively expand / contract the picker.
Type	boolean
Default	true

expanded bindableoptional
Description	Expand or collapse the input's picker.
Type	boolean
Default	false

picker optional
Description	The style of value "picker" to use in the input.
Type	'inline' | 'popup'
Default	'popup'

optionsX optional
Description	Input parameters specific to the X dimension. Renamed from x in TweakpaneRotationPlugin API to clarify that it is an object of options, not a value.
Type	{ format?: Formatter<number>; keyScale?: number | undefined; max?: number | undefined; min?: number | undefined; pointerScale?: number | undefined; step?: number | undefined; } | undefined
Default	undefined

optionsY optional
Description	Input parameters specific to the Y dimension. Renamed from y in TweakpaneRotationPlugin API to clarify that it is an object of options, not a value.
Type	{ format?: Formatter<number>; keyScale?: number | undefined; max?: number | undefined; min?: number | undefined; pointerScale?: number | undefined; step?: number | undefined; } | undefined
Default	undefined

optionsZ optional
Description	Input parameters specific to the Z dimension. Renamed from z in TweakpaneRotationPlugin API to clarify that it is an object of options, not a value.
Type	{ format?: Formatter<number>; keyScale?: number | undefined; max?: number | undefined; min?: number | undefined; pointerScale?: number | undefined; step?: number | undefined; } | undefined
Default	undefined

optionsW optional
Description	Input parameters specific to the W dimension. Renamed from w in TweakpaneRotationPlugin API to clarify that it is an object of options, not a value.
Type	{ format?: Formatter<number>; keyScale?: number | undefined; max?: number | undefined; min?: number | undefined; pointerScale?: number | undefined; step?: number | undefined; } | undefined
Default	undefined

---

Events

change
Description	Fires when value changes. This event is provided for advanced use cases. It's usually preferred to bind to the value prop instead. The event.details payload includes a copy of the value and an origin field to distinguish between user-interactive changes (internal) and changes resulting from programmatic manipulation of the value (external).
Extends	ValueChangeEvent
Type	RotationQuaternionChangeEvent