@threlte/extras/dist/interactivity/context.d.ts

Utilities, abstractions and plugins for your Threlte apps

import { type CurrentWritable } from '@threlte/core';
import { Raycaster, Vector2, type Intersection, type Object3D } from 'three';
import type { DomEvent, EventOptions, IntersectionEvent } from './types.js';
export type FilterFunction = (items: Intersection[], context: InteractivityContext) => Intersection[];
export type ComputeFunction = (event: DomEvent, context: InteractivityContext) => void;
export type InteractivityOptions = {
    enabled?: boolean;
    /**
     * The compute function is responsible for updating the state of the interactivity plugin.
     * It needs to set up the raycaster and the pointer vector. If no compute function is provided,
     * the plugin will use the default compute function.
     */
    compute?: ComputeFunction;
    target?: HTMLElement;
    /**
     * The filter function is responsible for filtering and sorting the
     * intersections. By default, the intersections are sorted by distance. If no
     * filter function is provided, the plugin will use the default filter function.
     */
    filter?: FilterFunction;
    /**
     * Maximum distance in pixels between pointerdown and click for the
     * interaction to count as a click. Movements beyond this threshold are
     * treated as drags. Defaults to 8.
     */
    clickDistanceThreshold?: number;
    /**
     * Maximum time in milliseconds between pointerdown and click for the
     * interaction to count as a click. Defaults to Infinity (no time limit),
     * matching native DOM behavior.
     */
    clickTimeThreshold?: number;
    eventOptions?: EventOptions;
};
type Events = Record<string, (arg: unknown) => void>;
export type InteractivityContext = {
    enabled: CurrentWritable<boolean>;
    target: CurrentWritable<HTMLElement | undefined>;
    pointer: CurrentWritable<Vector2>;
    pointerOverTarget: CurrentWritable<boolean>;
    lastEvent: DomEvent | undefined;
    raycaster: Raycaster;
    initialClick: [x: number, y: number];
    initialClickTime: number;
    initialHits: Object3D[];
    hovered: Map<string, IntersectionEvent<DomEvent>>;
    interactiveObjects: Object3D[];
    handlers: WeakMap<Object3D, Events>;
    compute: ComputeFunction;
    filter?: FilterFunction | undefined;
    clickDistanceThreshold: number;
    clickTimeThreshold: number;
    eventOptions: EventOptions | undefined;
    addInteractiveObject: (object: Object3D, events: Events) => void;
    removeInteractiveObject: (object: Object3D) => void;
};
export declare const getInteractivityContext: () => InteractivityContext;
export declare const setInteractivityContext: (options?: InteractivityOptions) => InteractivityContext;
export declare const useInteractivity: () => InteractivityContext;
export {};