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.
Type	RotationEulerValue

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
Default	undefined

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
Default	undefined

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
Default	undefined

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.
Type	EulerOrder
Default	'XYZ'

unit optional
Description	Units of rotation.
Type	EulerUnit
Default	'rad'

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

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

theme optional
Description	Custom color scheme.
Type	Theme
Default	undefined 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.
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'

---

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	RotationEulerChangeEvent