three-gamepad-controls 0.8.0 → 0.9.0

package/README.md

@@ -39,6 +39,7 @@ bun add three-gamepad-controls
 - [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.
+- [GamepadDragControls](./docs/gamepad-drag-controls.md) - Gamepad support for `DragControls`.
 - [GamepadFirstPersonControls](./docs/gamepad-first-person-controls.md) — Gamepad support for `FirstPersonControls`.
 - [GamepadFlyControls](./docs/gamepad-fly-controls.md) — Gamepad support for `FlyControls`.
 - [GamepadMapControls](./docs/gamepad-map-controls.md) — Gamepad support for `MapControls`.

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

@@ -0,0 +1,87 @@
+import { GamepadControls } from "./gamepad-controls.js";
+import { DragControls } from "three/addons/controls/DragControls.js";
+
+//#region src/gamepad-drag-controls.d.ts
+/**
+ * Configuration for {@link GamepadDragControls}.
+ *
+ * Every property has a sensible default, so you only need to pass the properties you want to override.
+ */
+type GamepadDragControlsOptions = {
+  /**
+   * Screen-relative translation speed multiplier.
+   * @default 1.0
+   */
+  dragSpeed: number;
+  /**
+   * Multiplier on `DragControls.rotateSpeed` for rotation.
+   * @default 1.0
+   */
+  rotateSpeed: number;
+  /**
+   * Axis dead zone threshold in the range `[0, 1]`.
+   * @default 0.1
+   */
+  deadzone: number;
+  /**
+   * Axis index for **horizontal** dragging.
+   * @default 0 - Left stick X
+   */
+  axisDragX: number;
+  /**
+   * Axis index for **vertical** dragging.
+   * @default 1 - Left stick Y
+   */
+  axisDragY: number;
+  /**
+   * Axis index for **horizontal** object rotation.
+   * @default 2 - Right stick X
+   */
+  axisRotateX: number;
+  /**
+   * Axis index for **vertical** object rotation.
+   * @default 3 - Right stick Y
+   */
+  axisRotateY: number;
+  /**
+   * Button index for grabbing and dropping the object under the center reticle.
+   * @default 0 - South face button
+   */
+  buttonSelect: number;
+};
+/**
+ * Adds gamepad support to Three.js `DragControls`.
+ *
+ * The center of the viewport acts as a logical reticle. Press the select button
+ * once to grab the centered object and again to drop it.
+ */
+declare class GamepadDragControls extends GamepadControls {
+  #private;
+  /**
+   * @param controls - A Three.js `DragControls` instance.
+   * @param options - Optional overrides for the default behavior.
+   *                  Any property not provided falls back to its default value.
+   */
+  constructor(controls: DragControls, options?: Partial<GamepadDragControlsOptions>);
+  /**
+   * Maps the current gamepad state to `DragControls` hover, grab/drop, drag,
+   * and rotate behavior.
+   *
+   * @param deltaTime - Seconds since the last frame.
+   * @param gamepad - Fresh gamepad snapshot provided by the base class.
+   */
+  protected onUpdate(deltaTime: number, gamepad: Gamepad): void;
+  /**
+   * Releases any selected object and removes hover state before disposing the
+   * gamepad lifecycle listeners.
+   */
+  dispose(): void;
+  /**
+   * Releases the selected object if the active gamepad disconnects mid-drag.
+   *
+   * @param gamepad - The gamepad that just disconnected.
+   */
+  protected onGamepadDisconnected(gamepad: Gamepad): void;
+}
+//#endregion
+export { GamepadDragControls, GamepadDragControlsOptions };

package/dist/gamepad-drag-controls.js

@@ -0,0 +1,260 @@
+import { GAMEPAD_AXIS, GAMEPAD_BUTTON } from "./core.js";
+import { GamepadControls } from "./gamepad-controls.js";
+import { Matrix4, Vector2, Vector3 } from "three";
+//#region src/gamepad-drag-controls.ts
+/**
+* Default options merged in the constructor when no explicit configuration is provided.
+*/
+const DEFAULT_DRAG_OPTIONS = {
+	dragSpeed: 1,
+	rotateSpeed: 1,
+	deadzone: .1,
+	axisDragX: GAMEPAD_AXIS.LeftX,
+	axisDragY: GAMEPAD_AXIS.LeftY,
+	axisRotateX: GAMEPAD_AXIS.RightX,
+	axisRotateY: GAMEPAD_AXIS.RightY,
+	buttonSelect: GAMEPAD_BUTTON.South
+};
+/**
+* Adds gamepad support to Three.js `DragControls`.
+*
+* The center of the viewport acts as a logical reticle. Press the select button
+* once to grab the centered object and again to drop it.
+*/
+var GamepadDragControls = class extends GamepadControls {
+	#controls;
+	#options;
+	#centerNdc;
+	#intersections;
+	#parentInverse;
+	#selectedWorldPosition;
+	#selectedLocalPosition;
+	#cameraWorldPosition;
+	#cameraForward;
+	#cameraRight;
+	#cameraUp;
+	#cameraToSelected;
+	#viewSize;
+	#hovered = null;
+	#selected = null;
+	#selectButtonPressed = false;
+	/**
+	* @param controls - A Three.js `DragControls` 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_DRAG_OPTIONS,
+			...options
+		};
+		this.#centerNdc = new Vector2(0, 0);
+		this.#intersections = [];
+		this.#parentInverse = new Matrix4();
+		this.#selectedWorldPosition = new Vector3();
+		this.#selectedLocalPosition = new Vector3();
+		this.#cameraWorldPosition = new Vector3();
+		this.#cameraForward = new Vector3();
+		this.#cameraRight = new Vector3();
+		this.#cameraUp = new Vector3();
+		this.#cameraToSelected = new Vector3();
+		this.#viewSize = new Vector2();
+	}
+	/**
+	* Maps the current gamepad state to `DragControls` hover, grab/drop, drag,
+	* and rotate behavior.
+	*
+	* @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 selectPressed = this.#getButtonPressed(gamepad, this.#options.buttonSelect);
+		const selectStarted = selectPressed && !this.#selectButtonPressed;
+		this.#selectButtonPressed = selectPressed;
+		if (!controls.enabled) {
+			this.#releaseSelected();
+			this.#clearHover();
+			return;
+		}
+		if (this.#selected !== null) {
+			if (selectStarted) {
+				this.#releaseSelected();
+				return;
+			}
+			this.#updateSelected(deltaTime, gamepad);
+			return;
+		}
+		const hit = this.#intersectCenter();
+		this.#updateHover(hit?.object ?? null);
+		if (selectStarted && hit !== void 0) this.#grabObject(hit.object);
+	}
+	/**
+	* Releases any selected object and removes hover state before disposing the
+	* gamepad lifecycle listeners.
+	*/
+	dispose() {
+		this.#releaseSelected();
+		this.#clearHover();
+		super.dispose();
+	}
+	/**
+	* Releases the selected object if the active gamepad disconnects mid-drag.
+	*
+	* @param gamepad - The gamepad that just disconnected.
+	*/
+	onGamepadDisconnected(gamepad) {
+		this.#releaseSelected();
+		this.#clearHover();
+		super.onGamepadDisconnected(gamepad);
+	}
+	#updateSelected(deltaTime, gamepad) {
+		const selected = this.#selected;
+		if (selected === null) return;
+		const { dragSpeed, rotateSpeed, deadzone, axisDragX, axisDragY, axisRotateX, axisRotateY } = this.#options;
+		const dragX = this.#applyDeadzone(gamepad.axes[axisDragX] ?? 0, deadzone);
+		const dragY = this.#applyDeadzone(gamepad.axes[axisDragY] ?? 0, deadzone);
+		const rotateX = this.#applyDeadzone(gamepad.axes[axisRotateX] ?? 0, deadzone);
+		const rotateY = this.#applyDeadzone(gamepad.axes[axisRotateY] ?? 0, deadzone);
+		const dragged = this.#applyDrag(deltaTime, dragX, dragY, dragSpeed);
+		const rotated = this.#applyRotation(deltaTime, rotateX, rotateY, rotateSpeed);
+		if (dragged || rotated) this.#controls.dispatchEvent({
+			type: "drag",
+			object: selected
+		});
+	}
+	#applyDrag(deltaTime, dragX, dragY, dragSpeed) {
+		if (this.#selected === null || dragX === 0 && dragY === 0) return false;
+		this.#updateCameraAxes();
+		this.#updateViewSizeAtSelectedDepth();
+		const scale = dragSpeed * deltaTime;
+		this.#selectedWorldPosition.addScaledVector(this.#cameraRight, dragX * this.#viewSize.x * scale);
+		this.#selectedWorldPosition.addScaledVector(this.#cameraUp, -dragY * this.#viewSize.y * scale);
+		this.#applySelectedWorldPosition();
+		return true;
+	}
+	#applyRotation(deltaTime, rotateX, rotateY, rotateSpeed) {
+		const selected = this.#selected;
+		if (selected === null || rotateX === 0 && rotateY === 0) return false;
+		this.#updateCameraAxes();
+		const scale = this.#controls.rotateSpeed * rotateSpeed * deltaTime * Math.PI;
+		if (rotateX !== 0) selected.rotateOnWorldAxis(this.#cameraUp, rotateX * scale);
+		if (rotateY !== 0) selected.rotateOnWorldAxis(this.#cameraRight, rotateY * scale);
+		return true;
+	}
+	#intersectCenter() {
+		const controls = this.#controls;
+		this.#intersections.length = 0;
+		controls.raycaster.setFromCamera(this.#centerNdc, controls.object);
+		controls.raycaster.intersectObjects(controls.objects, controls.recursive, this.#intersections);
+		return this.#intersections[0];
+	}
+	#updateHover(object) {
+		if (this.#hovered === object) return;
+		this.#clearHover();
+		if (object === null) return;
+		this.#hovered = object;
+		this.#controls.dispatchEvent({
+			type: "hoveron",
+			object
+		});
+	}
+	#clearHover() {
+		if (this.#hovered === null) return;
+		const object = this.#hovered;
+		this.#hovered = null;
+		this.#controls.dispatchEvent({
+			type: "hoveroff",
+			object
+		});
+	}
+	#grabObject(object) {
+		const selected = this.#getSelectedObject(object);
+		selected.updateWorldMatrix(true, false);
+		this.#selected = selected;
+		this.#selectedWorldPosition.setFromMatrixPosition(selected.matrixWorld);
+		this.#controls.dispatchEvent({
+			type: "dragstart",
+			object: selected
+		});
+	}
+	#releaseSelected() {
+		if (this.#selected === null) return;
+		const selected = this.#selected;
+		this.#selected = null;
+		this.#controls.dispatchEvent({
+			type: "dragend",
+			object: selected
+		});
+	}
+	#getSelectedObject(object) {
+		if (!this.#controls.transformGroup) return object;
+		return this.#findOutermostGroup(object) ?? object;
+	}
+	#findOutermostGroup(object) {
+		let group = null;
+		let current = object;
+		while (current !== null) {
+			if (current.isGroup === true) group = current;
+			current = current.parent;
+		}
+		return group;
+	}
+	#applySelectedWorldPosition() {
+		const selected = this.#selected;
+		if (selected === null) return;
+		if (selected.parent === null) {
+			selected.position.copy(this.#selectedWorldPosition);
+			selected.updateMatrixWorld();
+			return;
+		}
+		selected.parent.updateWorldMatrix(true, false);
+		this.#parentInverse.copy(selected.parent.matrixWorld).invert();
+		this.#selectedLocalPosition.copy(this.#selectedWorldPosition).applyMatrix4(this.#parentInverse);
+		selected.position.copy(this.#selectedLocalPosition);
+		selected.updateMatrixWorld();
+	}
+	#updateCameraAxes() {
+		const camera = this.#controls.object;
+		this.#cameraRight.set(1, 0, 0).applyQuaternion(camera.quaternion).normalize();
+		this.#cameraUp.set(0, 1, 0).applyQuaternion(camera.quaternion).normalize();
+		camera.getWorldDirection(this.#cameraForward).normalize();
+	}
+	#updateViewSizeAtSelectedDepth() {
+		const camera = this.#controls.object;
+		if (this.#isOrthographicCamera(camera)) {
+			this.#viewSize.set(Math.abs(camera.right - camera.left) / camera.zoom, Math.abs(camera.top - camera.bottom) / camera.zoom);
+			return;
+		}
+		if (this.#isPerspectiveCamera(camera)) {
+			camera.getWorldPosition(this.#cameraWorldPosition);
+			const depth = Math.max(Number.EPSILON, this.#cameraToSelected.copy(this.#selectedWorldPosition).sub(this.#cameraWorldPosition).dot(this.#cameraForward));
+			const height = 2 * Math.tan(camera.fov * Math.PI / 360) * depth;
+			this.#viewSize.set(height * camera.aspect, height);
+			return;
+		}
+		this.#viewSize.set(1, 1);
+	}
+	#isPerspectiveCamera(camera) {
+		return camera.isPerspectiveCamera === true;
+	}
+	#isOrthographicCamera(camera) {
+		return camera.isOrthographicCamera === true;
+	}
+	#getButtonPressed(gamepad, button) {
+		return gamepad.buttons[button]?.pressed ?? false;
+	}
+	/**
+	* Returns `value` unchanged, or `0` if below the dead zone `threshold`.
+	*
+	* @param value - Raw axis 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 { GamepadDragControls };

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 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 { GamepadDragControls, GamepadDragControlsOptions } from "./gamepad-drag-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, GamepadArcballControls, GamepadArcballControlsOptions, 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, GamepadDragControls, GamepadDragControlsOptions, GamepadFirstPersonControls, GamepadFirstPersonControlsOptions, GamepadFlyControls, GamepadFlyControlsOptions, GamepadMapControls, GamepadOrbitControls, GamepadOrbitControlsOptions, GamepadPointerLockControls, GamepadPointerLockControlsOptions, GamepadTrackballControls, GamepadTrackballControlsOptions };

package/dist/index.js

@@ -1,10 +1,11 @@
 import { GAMEPAD_AXIS, GAMEPAD_BUTTON } from "./core.js";
 import { GamepadControls } from "./gamepad-controls.js";
 import { GamepadArcballControls } from "./gamepad-arcball-controls.js";
+import { GamepadDragControls } from "./gamepad-drag-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, GamepadArcballControls, GamepadControls, GamepadFirstPersonControls, GamepadFlyControls, GamepadMapControls, GamepadOrbitControls, GamepadPointerLockControls, GamepadTrackballControls };
+export { GAMEPAD_AXIS, GAMEPAD_BUTTON, GamepadArcballControls, GamepadControls, GamepadDragControls, 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.8.0",
+  "version": "0.9.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/luckasnix/three-gamepad-controls.git"