three-gamepad-controls 0.7.0 → 0.8.0

package/README.md

@@ -37,6 +37,7 @@ bun add three-gamepad-controls
 ## Documentation
 
 - [Core](./docs/core.md) — The fundamental building blocks.
+- [GamepadArcballControls](./docs/gamepad-arcball-controls.md) - Gamepad support for `ArcballControls`.
 - [GamepadControls](./docs/gamepad-controls.md) — Abstract base class for custom gamepad controls.
 - [GamepadFirstPersonControls](./docs/gamepad-first-person-controls.md) — Gamepad support for `FirstPersonControls`.
 - [GamepadFlyControls](./docs/gamepad-fly-controls.md) — Gamepad support for `FlyControls`.

package/dist/gamepad-arcball-controls.d.ts

@@ -0,0 +1,107 @@
+import { GamepadControls } from "./gamepad-controls.js";
+import { ArcballControls } from "three/addons/controls/ArcballControls.js";
+
+//#region src/gamepad-arcball-controls.d.ts
+/**
+ * Configuration for {@link GamepadArcballControls}.
+ *
+ * Every property has a sensible default, so you only need to pass the properties you want to override.
+ */
+type GamepadArcballControlsOptions = {
+  /**
+   * Multiplier on `ArcballControls.rotateSpeed` for rotation.
+   * @default 1.0
+   */
+  rotateSpeed: number;
+  /**
+   * Multiplier on panning speed.
+   * @default 1.0
+   */
+  panSpeed: number;
+  /**
+   * Multiplier on zooming speed.
+   * @default 1.0
+   */
+  zoomSpeed: number;
+  /**
+   * Multiplier on z-rotation speed.
+   * @default 1.0
+   */
+  zRotateSpeed: number;
+  /**
+   * Axis dead zone threshold in the range `[0, 1]`.
+   * @default 0.1
+   */
+  deadzone: number;
+  /**
+   * Axis index for **horizontal** arcball rotation.
+   * @default 0 - Left stick X
+   */
+  axisRotateX: number;
+  /**
+   * Axis index for **vertical** arcball rotation.
+   * @default 1 - Left stick Y
+   */
+  axisRotateY: number;
+  /**
+   * Axis index for **horizontal** panning.
+   * @default 2 - Right stick X
+   */
+  axisPanX: number;
+  /**
+   * Axis index for **vertical** panning.
+   * @default 3 - Right stick Y
+   */
+  axisPanY: number;
+  /**
+   * Button index for zooming **in** (analog trigger value used for proportional zoom).
+   * @default 6 - Left trigger
+   */
+  buttonZoomIn: number;
+  /**
+   * Button index for zooming **out** (analog trigger value used for proportional zoom).
+   * @default 7 - Right trigger
+   */
+  buttonZoomOut: number;
+  /**
+   * Button index for rotating counterclockwise around the camera view axis.
+   * @default 4 - Left shoulder
+   */
+  buttonZRotateLeft: number;
+  /**
+   * Button index for rotating clockwise around the camera view axis.
+   * @default 5 - Right shoulder
+   */
+  buttonZRotateRight: number;
+  /**
+   * Button index for focusing the point at the center of the view.
+   * @default 0 - South face button
+   */
+  buttonFocus: number;
+};
+/**
+ * Adds gamepad support to Three.js `ArcballControls`.
+ *
+ * Call `update()` inside the render loop to poll gamepad input and apply
+ * Arcball transformations. The wrapped `ArcballControls.update()` is only
+ * needed after manual camera or target changes, matching Arcball's native API.
+ */
+declare class GamepadArcballControls extends GamepadControls {
+  #private;
+  /**
+   * @param controls - A Three.js `ArcballControls` instance.
+   * @param options - Optional overrides for the default behavior.
+   *                  Any property not provided falls back to its default value.
+   */
+  constructor(controls: ArcballControls, options?: Partial<GamepadArcballControlsOptions>);
+  /**
+   * Maps the current gamepad state to `ArcballControls` rotation, pan, zoom,
+   * z-rotation, and center focus.
+   *
+   * @param deltaTime - Seconds since the last frame.
+   * @param gamepad - Fresh gamepad snapshot provided by the base class.
+   */
+  protected onUpdate(deltaTime: number, gamepad: Gamepad): void;
+}
+//#endregion
+export { GamepadArcballControls, GamepadArcballControlsOptions };

package/dist/gamepad-arcball-controls.js

@@ -0,0 +1,205 @@
+import { GAMEPAD_AXIS, GAMEPAD_BUTTON } from "./core.js";
+import { GamepadControls } from "./gamepad-controls.js";
+import { Vector2, Vector3 } from "three";
+//#region src/gamepad-arcball-controls.ts
+/**
+* Default options merged in the constructor when no explicit configuration is provided.
+*/
+const DEFAULT_ARCBALL_OPTIONS = {
+	rotateSpeed: 1,
+	panSpeed: 1,
+	zoomSpeed: 1,
+	zRotateSpeed: 1,
+	deadzone: .1,
+	axisRotateX: GAMEPAD_AXIS.LeftX,
+	axisRotateY: GAMEPAD_AXIS.LeftY,
+	axisPanX: GAMEPAD_AXIS.RightX,
+	axisPanY: GAMEPAD_AXIS.RightY,
+	buttonZoomIn: GAMEPAD_BUTTON.LeftTrigger,
+	buttonZoomOut: GAMEPAD_BUTTON.RightTrigger,
+	buttonZRotateLeft: GAMEPAD_BUTTON.LeftShoulder,
+	buttonZRotateRight: GAMEPAD_BUTTON.RightShoulder,
+	buttonFocus: GAMEPAD_BUTTON.South
+};
+const ZOOM_NOTCHES_PER_SECOND = 8;
+/**
+* Adds gamepad support to Three.js `ArcballControls`.
+*
+* Call `update()` inside the render loop to poll gamepad input and apply
+* Arcball transformations. The wrapped `ArcballControls.update()` is only
+* needed after manual camera or target changes, matching Arcball's native API.
+*/
+var GamepadArcballControls = class extends GamepadControls {
+	#controls;
+	#options;
+	#centerNdc;
+	#panStart;
+	#panEnd;
+	#rotationAxis;
+	#cameraForward;
+	#cameraRight;
+	#previousUp;
+	#focusButtonPressed = false;
+	#wasInteracting = false;
+	/**
+	* @param controls - A Three.js `ArcballControls` instance.
+	* @param options - Optional overrides for the default behavior.
+	*                  Any property not provided falls back to its default value.
+	*/
+	constructor(controls, options) {
+		super();
+		this.#controls = controls;
+		this.#options = {
+			...DEFAULT_ARCBALL_OPTIONS,
+			...options
+		};
+		this.#centerNdc = new Vector2(0, 0);
+		this.#panStart = new Vector3();
+		this.#panEnd = new Vector3();
+		this.#rotationAxis = new Vector3();
+		this.#cameraForward = new Vector3();
+		this.#cameraRight = new Vector3();
+		this.#previousUp = new Vector3();
+	}
+	/**
+	* Maps the current gamepad state to `ArcballControls` rotation, pan, zoom,
+	* z-rotation, and center focus.
+	*
+	* @param deltaTime - Seconds since the last frame.
+	* @param gamepad - Fresh gamepad snapshot provided by the base class.
+	*/
+	onUpdate(deltaTime, gamepad) {
+		const controls = this.#controls;
+		const { rotateSpeed, panSpeed, zoomSpeed, zRotateSpeed, deadzone, axisRotateX, axisRotateY, axisPanX, axisPanY, buttonZoomIn, buttonZoomOut, buttonZRotateLeft, buttonZRotateRight, buttonFocus } = this.#options;
+		const focusPoint = this.#consumeFocusPoint(gamepad, buttonFocus);
+		if (!controls.enabled) {
+			this.#endInteraction();
+			return;
+		}
+		const rotateX = controls.enableRotate ? this.#applyDeadzone(gamepad.axes[axisRotateX] ?? 0, deadzone) : 0;
+		const rotateY = controls.enableRotate ? this.#applyDeadzone(gamepad.axes[axisRotateY] ?? 0, deadzone) : 0;
+		const panX = controls.enablePan ? this.#applyDeadzone(gamepad.axes[axisPanX] ?? 0, deadzone) : 0;
+		const panY = controls.enablePan ? this.#applyDeadzone(gamepad.axes[axisPanY] ?? 0, deadzone) : 0;
+		const zoom = controls.enableZoom ? this.#getButtonValue(gamepad, buttonZoomIn) - this.#getButtonValue(gamepad, buttonZoomOut) : 0;
+		const zRotation = controls.enableRotate ? this.#getButtonValue(gamepad, buttonZRotateLeft) - this.#getButtonValue(gamepad, buttonZRotateRight) : 0;
+		const activeInput = rotateX !== 0 || rotateY !== 0 || panX !== 0 || panY !== 0 || Math.abs(zoom) > deadzone || Math.abs(zRotation) > deadzone;
+		if (!activeInput && focusPoint === null) {
+			this.#endInteraction();
+			return;
+		}
+		if (!this.#wasInteracting) controls.dispatchEvent({ type: "start" });
+		let changed = false;
+		changed = this.#applyRotation(deltaTime, rotateX, rotateY, rotateSpeed) || changed;
+		changed = this.#applyPan(deltaTime, panX, panY, panSpeed) || changed;
+		changed = this.#applyZoom(deltaTime, zoom, zoomSpeed, deadzone) || changed;
+		changed = this.#applyZRotation(deltaTime, zRotation, zRotateSpeed, deadzone) || changed;
+		changed = this.#applyFocus(focusPoint) || changed;
+		if (changed) {
+			controls.update();
+			controls.updateMatrixState();
+			controls.dispatchEvent({ type: "change" });
+		}
+		this.#wasInteracting = activeInput;
+		if (!activeInput) this.#endInteraction();
+	}
+	#applyRotation(deltaTime, rotateX, rotateY, rotateSpeed) {
+		if (rotateX === 0 && rotateY === 0) return false;
+		const controls = this.#controls;
+		const amount = controls.rotateSpeed * rotateSpeed * deltaTime * Math.PI;
+		let changed = false;
+		if (rotateX !== 0) {
+			this.#rotationAxis.copy(controls.object.up).normalize();
+			changed = this.#applyRotationAroundAxis(this.#rotationAxis, rotateX * amount) || changed;
+		}
+		if (rotateY !== 0) {
+			controls.object.getWorldDirection(this.#cameraForward);
+			this.#cameraRight.crossVectors(this.#cameraForward, controls.object.up).normalize();
+			changed = this.#applyRotationAroundAxis(this.#cameraRight, -rotateY * amount) || changed;
+		}
+		return changed;
+	}
+	#applyRotationAroundAxis(axis, angle) {
+		if (axis.lengthSq() === 0 || angle === 0) return false;
+		const controls = this.#controls;
+		controls.updateMatrixState();
+		this.#previousUp.copy(controls.object.up);
+		const changed = this.#applyTransform(controls.rotate(axis, angle));
+		if (changed) controls.object.up.copy(this.#previousUp).applyAxisAngle(axis, -angle);
+		return changed;
+	}
+	#applyPan(deltaTime, panX, panY, panSpeed) {
+		if (panX === 0 && panY === 0) return false;
+		const controls = this.#controls;
+		const distance = controls._tbRadius * panSpeed * deltaTime;
+		controls.updateMatrixState();
+		this.#panStart.set(0, 0, 0);
+		this.#panEnd.set(panX * distance, panY * distance, 0);
+		return this.#applyTransform(controls.pan(this.#panStart, this.#panEnd));
+	}
+	#applyZoom(deltaTime, zoom, zoomSpeed, deadzone) {
+		if (Math.abs(zoom) <= deadzone || this.#controls.scaleFactor <= 0) return false;
+		const controls = this.#controls;
+		const size = controls.scaleFactor ** (zoom * zoomSpeed * deltaTime * ZOOM_NOTCHES_PER_SECOND);
+		if (!Number.isFinite(size) || size <= 0 || size === 1) return false;
+		controls.updateMatrixState();
+		return this.#applyTransform(controls.scale(size, controls._gizmos.position));
+	}
+	#applyZRotation(deltaTime, zRotation, zRotateSpeed, deadzone) {
+		if (Math.abs(zRotation) <= deadzone) return false;
+		const controls = this.#controls;
+		const angle = zRotation * zRotateSpeed * deltaTime * Math.PI;
+		controls.updateMatrixState();
+		controls.object.getWorldDirection(controls._rotationAxis);
+		this.#previousUp.copy(controls.object.up);
+		const changed = this.#applyTransform(controls.zRotate(controls._gizmos.position, angle));
+		if (changed) controls.object.up.copy(this.#previousUp).applyAxisAngle(controls._rotationAxis, angle);
+		return changed;
+	}
+	#applyFocus(point) {
+		if (point === null) return false;
+		const controls = this.#controls;
+		controls.updateMatrixState();
+		controls.focus(point, controls.scaleFactor);
+		controls.updateMatrixState();
+		return true;
+	}
+	#applyTransform(transformation) {
+		if (transformation === void 0) return false;
+		this.#controls.applyTransformMatrix(transformation);
+		this.#controls.updateMatrixState();
+		return true;
+	}
+	#consumeFocusPoint(gamepad, buttonFocus) {
+		const controls = this.#controls;
+		const focusPressed = this.#getButtonPressed(gamepad, buttonFocus);
+		const shouldFocus = focusPressed && !this.#focusButtonPressed;
+		this.#focusButtonPressed = focusPressed;
+		if (!shouldFocus || !controls.enabled || !controls.enablePan || !controls.enableFocus || controls.scene === null) return null;
+		return controls.unprojectOnObj(this.#centerNdc, controls.object);
+	}
+	#endInteraction() {
+		if (!this.#wasInteracting) return;
+		this.#controls.dispatchEvent({ type: "end" });
+		this.#wasInteracting = false;
+	}
+	#getButtonValue(gamepad, button) {
+		const gamepadButton = gamepad.buttons[button];
+		if (gamepadButton === void 0) return 0;
+		if (gamepadButton.value !== 0) return gamepadButton.value;
+		return gamepadButton.pressed ? 1 : 0;
+	}
+	#getButtonPressed(gamepad, button) {
+		return gamepad.buttons[button]?.pressed ?? false;
+	}
+	/**
+	* Returns `value` unchanged, or `0` if below the dead zone `threshold`.
+	*
+	* @param value - Raw axis or trigger value, typically in `[-1, 1]`.
+	* @param threshold - Dead zone size; values below this magnitude are zeroed.
+	*/
+	#applyDeadzone(value, threshold) {
+		return Math.abs(value) < threshold ? 0 : value;
+	}
+};
+//#endregion
+export { GamepadArcballControls };

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import { GAMEPAD_AXIS, GAMEPAD_BUTTON, GamepadAxisKey, GamepadAxisValue, GamepadButtonKey, GamepadButtonValue } from "./core.js";
 import { GamepadControls, GamepadControlsEventMap } from "./gamepad-controls.js";
+import { GamepadArcballControls, GamepadArcballControlsOptions } from "./gamepad-arcball-controls.js";
 import { GamepadFirstPersonControls, GamepadFirstPersonControlsOptions } from "./gamepad-first-person-controls.js";
 import { GamepadFlyControls, GamepadFlyControlsOptions } from "./gamepad-fly-controls.js";
 import { GamepadOrbitControls, GamepadOrbitControlsOptions } from "./gamepad-orbit-controls.js";
 import { GamepadMapControls } from "./gamepad-map-controls.js";
 import { GamepadPointerLockControls, GamepadPointerLockControlsOptions } from "./gamepad-pointer-lock-controls.js";
 import { GamepadTrackballControls, GamepadTrackballControlsOptions } from "./gamepad-trackball-controls.js";
-export { GAMEPAD_AXIS, GAMEPAD_BUTTON, GamepadAxisKey, GamepadAxisValue, GamepadButtonKey, GamepadButtonValue, GamepadControls, GamepadControlsEventMap, GamepadFirstPersonControls, GamepadFirstPersonControlsOptions, GamepadFlyControls, GamepadFlyControlsOptions, GamepadMapControls, GamepadOrbitControls, GamepadOrbitControlsOptions, GamepadPointerLockControls, GamepadPointerLockControlsOptions, GamepadTrackballControls, GamepadTrackballControlsOptions };
+export { GAMEPAD_AXIS, GAMEPAD_BUTTON, GamepadArcballControls, GamepadArcballControlsOptions, GamepadAxisKey, GamepadAxisValue, GamepadButtonKey, GamepadButtonValue, GamepadControls, GamepadControlsEventMap, GamepadFirstPersonControls, GamepadFirstPersonControlsOptions, GamepadFlyControls, GamepadFlyControlsOptions, GamepadMapControls, GamepadOrbitControls, GamepadOrbitControlsOptions, GamepadPointerLockControls, GamepadPointerLockControlsOptions, GamepadTrackballControls, GamepadTrackballControlsOptions };

package/dist/index.js

@@ -1,9 +1,10 @@
 import { GAMEPAD_AXIS, GAMEPAD_BUTTON } from "./core.js";
 import { GamepadControls } from "./gamepad-controls.js";
+import { GamepadArcballControls } from "./gamepad-arcball-controls.js";
 import { GamepadFirstPersonControls } from "./gamepad-first-person-controls.js";
 import { GamepadFlyControls } from "./gamepad-fly-controls.js";
 import { GamepadOrbitControls } from "./gamepad-orbit-controls.js";
 import { GamepadMapControls } from "./gamepad-map-controls.js";
 import { GamepadPointerLockControls } from "./gamepad-pointer-lock-controls.js";
 import { GamepadTrackballControls } from "./gamepad-trackball-controls.js";
-export { GAMEPAD_AXIS, GAMEPAD_BUTTON, GamepadControls, GamepadFirstPersonControls, GamepadFlyControls, GamepadMapControls, GamepadOrbitControls, GamepadPointerLockControls, GamepadTrackballControls };
+export { GAMEPAD_AXIS, GAMEPAD_BUTTON, GamepadArcballControls, GamepadControls, GamepadFirstPersonControls, GamepadFlyControls, GamepadMapControls, GamepadOrbitControls, GamepadPointerLockControls, GamepadTrackballControls };

package/package.json

@@ -2,7 +2,7 @@
   "name": "three-gamepad-controls",
   "description": "Gamepad support for Three.js controls.",
   "author": "Kasnix",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/luckasnix/three-gamepad-controls.git"