module Controls3D

type TransformModfier: Record<TransformType, number>

No description.

type KeyboardModifier<Axes extends string>: Record<Axes, Array<string[]>>

No description.

class Controls3D

Controls3D(
eventTarget?: EventTarget,
config?: Partial<Controls3DConfig>
): Controls3D

Parameters

  • eventTarget: The DOM Element to receive the pointer, wheel and touch events. If left unspecified, use changeTarget.

  • config: A subset of the possible configuration options.

hasGamepad: boolean

No description.

gamepads: Record<number, Gamepad>

No description.

touchIsActive: boolean

If true, a touch action is currently underway.

config: Controls3DConfig

No description.

readonly target: EventTarget

No description.

readonly state: State3D

No description.

readonly callback: (data?: DrawData) => void

No description.

static MODIFIER_KEYS: readonly ["shiftKey", "ctrlKey", "altKey", "metaKey"]

No description.

changeTarget(newEventTarget: EventTarget): void

Assign a new event target. This removes currently attached events and attaches them to the new target.

changeState(newState: State3D): void

No description.

changeCallback(newCallback: Function): void

No description.

assignNewConfig(newConfig: Partial<Controls3DConfig>): void

No description.

removeTargetEvents(eventTarget: EventTarget): void

No description.

addTargetEvents(eventTarget: EventTarget): void

No description.

touchDown(e: TouchEvent): void

No description.

touchMove(e: TouchEvent): void

No description.

touchUp(e: TouchEvent): void

No description.

touchTransformTranslate(usedTouches: UsedTouchList): void

No description.

touchTransformScale(usedTouches: UsedTouchList): void

No description.

getTouchesFromIDs(
targetTouches: TouchList,
touchIDs: TouchIDList
): UsedTouchList

No description.

initializeTouchData(touchList: TouchList): void

No description.

updateTouchData(touchList: TouchList): void

No description.

preventContext(e: PointerEvent): void

No description.

wheelAction(e: WheelEvent): Promise<void>

No description.

pointerMove(e: PointerEvent): void

No description.

pointerDown(e: PointerEvent): void

No description.

pointerUp(): void

No description.

pointerTransformTranslate(
e: PointerEvent,
usedAxes: Array<"x" | "y">
): void

No description.

pointerTransformRotate(
e: PointerEvent,
usedAxes: Array<"x" | "y">
): void

No description.

gamepadConnected(e: GamepadEvent): void

No description.

gamepadDisconnected(e: GamepadEvent): void

No description.

gamepadLoop(): void

No description.

handleJoystick(
axes: [number, number],
resetButton: GamepadButton,
type: TransformType
): void

No description.

assignNewTransformAndDraw(
transform: {
scale: {
x: number,
y: number,
z: number
},
tran: {
x: number,
y: number,
z: number
},
rot: {
x: number,
y: number,
z: number
}
}
): void

No description.

static getEligibleAxesFromKeyMap<Axes extends string>(
keyMap: KeyboardModifier<Axes>,
e: MouseEvent
): Axes[]

No description.

static getTouchesDistance(
touch0: Touch,
touch1: Touch
): number

Compute the distance between two supplied Touch objects.

static getTouchesMidpoint(
touch0: TouchData,
touch1: TouchData
): [number, number]

Compute the midpoint vector of two supplied Touch objects.

namespace Touch

type TouchData:

No description.

type TouchIDList: [number, number]

No description.

type UsedTouchList: [Touch, Touch]

No description.

type TouchDataList: [TouchData, TouchData]

No description.

interface ClickState

x: number

No description.

y: number

No description.

button: number

No description.

tran: TransformSingle

No description.

rot: TransformSingle

No description.

interface TouchState

ids: TouchIDList

No description.

data: TouchDataList

No description.

tran: TransformSingle

No description.

distance: TransformSingle

No description.

interface DrawData extends Partial<AnimationData>

touches?: UsedTouchList

No description.

animation?: {
isFinished: boolean,
elapsed: number,
duration: number,
types: TransformType[]
}

No description.

interface Controls3DConfig

target: EventTarget

DOM element that will register all pointer, mousewheel and touch events used for transformation.

If left unspecified, set it later using Controls3D.changeTarget.

state: State3D

The initial state all transformations will operate on.

If left unspecified, set it later using Controls3D.changeState.

callback: (data?: DrawData) => void

The initial callback that will be called during transformations.

If left unspecified, set it later using Controls3D.changeCallback.

mod: TransformModfier

Modifier that will be multiplied with the value of pointer transformation operations.

For example, a tran mod of .25 will reduce the pointer translation values per call to 25%, slowing down the translation.

gamepadMod: TransformModfier

Like mod but only for gamepad transformations.

buttons: { tran: number, rot: number }

Mouse buttons that invoke the specified states during a pointer event.

See also MouseEvent.button

disableEvents: boolean | {
contextmenu: boolean,
gamepad: boolean,
pointer: boolean,
wheel: boolean,
touch: boolean
}

Disable all or only specific event types.

joystickThreshold: number

Configure gamepad joystick dead zone threshold in order to prevent passive drift.

Accepts a range from 0 to 1, corresponding to a threshold of 0% and 100% respectively.

invertTranslateY: boolean

Whether to flip the Y axis within translation.

You'll want to enable this option when using Controls3D with OpenGL since it uses some counterintuitive axis math.

keyModifier: {
scale: KeyboardModifier<"x" | "y" | "z">,
tran: KeyboardModifier<"x" | "y">,
rot: KeyboardModifier<"x" | "y">
}

Configure mandatory keyboard modifiers for a specified state and axis to be able to get modified during a pointer event.

  • The array can contain multiple key mod arrays, any of which must be valid.
  • A key mod array must match the event exactly; Non-present key modifiers inside it must NOT be pressed in order for the axis to be registered. See the example for more info.

Example (The default `scale` key modifiers.)

With this configuration, all scale axes are modified simultaneously upon scroll (as is the expected behavior), but as soon as the ctrl key is pressed, ONLY the X axis is changed.

keyModifier: {
  scale: {
    x: [ [], [ 'ctrlKey' ] ],
    y: [ [], [ 'shiftKey' ] ],
    z: [ [], [ 'ctrlKey', 'shiftKey' ] ]
  }
}

See also Controls3D.MODIFIER_KEYS for the available values.

module State3D

type DeepPartial<T>: T extends object
? {
[P in keyof T]: DeepPartial<T[P]>?
} : T

Deeply mark an object as Partial. From https://stackoverflow.com/a/61132308

type TransformType: "scale" | "tran" | "rot"

No description.

type TransformAxis: "x" | "y" | "z"

No description.

type TransformSingle: Record<TransformAxis, number>

No description.

type Transform: DeepPartial<TransformWhole>

No description.

class State3D

State3D(
initialTransform: {
scale: {
x: number,
y: number,
z: number
},
tran: {
x: number,
y: number,
z: number
},
rot: {
x: number,
y: number,
z: number
}
}
): State3D

No description.

transform: TransformWhole

No description.

static Easing: EasingList

Easing functions that can be used within animate.

Mostly taken from https://easings.net/

scale():

No description.

tran():

No description.

rot():

No description.

animateFrom(
duration: number,
transform: {
scale: {
x: number,
y: number,
z: number
},
tran: {
x: number,
y: number,
z: number
},
rot: {
x: number,
y: number,
z: number
}
},
options: Omit<Parameters, "steps">
): Promise<void>

Same as animate but animate from the passed transform to the current transform without additional steps.

Parameters

  • duration: How long the animation should run.

animateTo(
duration: number,
transform: {
scale: {
x: number,
y: number,
z: number
},
tran: {
x: number,
y: number,
z: number
},
rot: {
x: number,
y: number,
z: number
}
},
options: Omit<Parameters, "steps">
): Promise<void>

Same as animate but animate from the current transform to the passed transform without additional steps.

Parameters

  • duration: How long the animation should run.

animate(duration: number, _args: Parameters): Promise<void>

Animate this state's transform based on the passed steps for the specified amount of milliseconds.

Parameters

  • duration: How long the animation should run.

cloneTransform(): TransformWhole

Deeply clone and return the current transform.

assignNewTransform(
newTransform: {
scale: {
x: number,
y: number,
z: number
},
tran: {
x: number,
y: number,
z: number
},
rot: {
x: number,
y: number,
z: number
}
}
): State3D

Assign a new transform.

static fillTransform(
transform: {
scale: {
x: number,
y: number,
z: number
},
tran: {
x: number,
y: number,
z: number
},
rot: {
x: number,
y: number,
z: number
}
}
): TransformWhole

Modify a given transform such that missing values are filled with a 0, thus asserting the transform to be Whole instead of Partial.

This modifies the given transform in-place. If you need a copy, you must explicitly pass one.

static accumulateTransforms(
...transforms: Array<{
scale: {
x: number,
y: number,
z: number
},
tran: {
x: number,
y: number,
z: number
},
rot: {
x: number,
y: number,
z: number
}
}>
): {
scale: {
x: number,
y: number,
z: number
},
tran: {
x: number,
y: number,
z: number
},
rot: {
x: number,
y: number,
z: number
}
}

Returns a new transform which is the accumulation of the values of passed transforms.

Parameters

  • transforms: The transforms that will be added together.

static cloneTransform(
transform: State3D
): {
scale: {
x: number,
y: number,
z: number
},
tran: {
x: number,
y: number,
z: number
},
rot: {
x: number,
y: number,
z: number
}
}

Deeply clone a transform. Accepts either a plain transform or a State3D instance, whose transform will be cloned.

static cloneTransform<
S extends {
scale: {
x: number,
y: number,
z: number
},
tran: {
x: number,
y: number,
z: number
},
rot: {
x: number,
y: number,
z: number
}
}
>(
state: S
): S

Deeply clone a transform. Accepts either a plain transform or a State3D instance, whose transform will be cloned.

namespace Animation

type Easing: (x: number) => number

No description.

type Steps: Record<number, Transform>

No description.

type LoopCallback: (data: LoopResult) => boolean | void

No description.

interface AnimationData

animation: {
isFinished: boolean,
elapsed: number,
duration: number,
types: TransformType[]
}

No description.

interface Parameters

steps: Steps

Animation steps ranging from 0 to 100, representing a step's duration percentage.

If no 0% step is specified, the animation will start at the current transform. Similarly, if no 100% step is specified, the animation will end at the current transform.

Keys outside of the interval [0, 100] will be nonsensical.

callback?: (data?: AnimationData) => void

The callback that will be called during every animation frame with AnimationData.

easing?: Easing

The easing used during the whole animation.

See also State3D.Easing for quickly available easings.

Default 

Linear easing.
useStacking?: boolean

If true, do not reset the animation to an initial state, but advance it continuously.

fill?: boolean

If true, a specified step of 100% will become the final transform after the animation is finished, instead of resetting to the initial transform.

interface EasingList