Skip to content
Svelte Tweakpane UI
Control Components

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

🔗

value

🔗
bindablerequired
Description

The quaternion value to control.

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

TypeRotationQuaternionValue

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
Defaultundefined

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
Defaultundefined

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
Defaultundefined

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
Defaultundefined

disabled

🔗
optional
Description

Prevent interactivity and gray out the control.

Typeboolean
Defaultfalse

label

🔗
optional
Description

Text displayed next to control.

Typestring
Defaultundefined

theme

🔗
optional
Description

Custom color scheme.

TypeTheme
Defaultundefined
Inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().

userExpandable

🔗
optional
Description

Allow users to interactively expand / contract the picker.

Typeboolean
Defaulttrue

expanded

🔗
bindableoptional
Description

Expand or collapse the input's picker.

Typeboolean
Defaultfalse

picker

🔗
optional
Description

The style of value "picker" to use in the input.

Type'inline' | 'popup'
Default'popup'

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).

ExtendsValueChangeEvent
TypeRotationQuaternionChangeEvent