Skip to content
Svelte Tweakpane UI
Control Components

RotationEuler

Integrates the euler 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.eulerToCssTransform() is also provided to easily convert a quaternion value object or tuple into a CSS transform string.

See also <RotationQuaternion> if you're feeling gimbal locked.

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

Code

🔗
RotationEulerExample.svelte
<script lang="ts">
  import {
    Button,
    RotationEuler,
    type RotationEulerValueObject,
    Utils
  } from 'svelte-tweakpane-ui';


  // Value could also be a tuple
  // e.g. [0, 0, 0]
  let value: RotationEulerValueObject = {
    x: 0,
    y: 0,
    z: 0
  };


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


<RotationEuler
  bind:value
  expanded={true}
  label="CSS Rotation"
  picker={'inline'}
/>
<Button
  on:click={() =>
    (value = {
      x: 0,
      y: 0,
      z: 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 rotation value to control.

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

See the order prop to specify the sequence in which rotations are applied. The value to control.

TypeRotationEulerValue

optionsX

🔗
optional
Description

Input parameters specific to the X dimension.

Renamed from x in the original 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 the original 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 the original 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

order

🔗
optional
Description

Order of in which rotations are applied.

Note that this is extrinsic rotations (used by Blender, Maya, and Unity). Three.js uses intrinsic rotations, so you have to reverse the order if you want to match Three.js' behavior.

TypeEulerOrder
Default'XYZ'

unit

🔗
optional
Description

Units of rotation.

TypeEulerUnit
Default'rad'

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
TypeRotationEulerChangeEvent