@realsee/five 6.8.0-alpha.2 → 6.8.0-alpha.21

package/plugins/thirdParty/CSS3DRenderer.d.ts

@@ -0,0 +1,32 @@
+import {
+	Object3D,
+	Scene,
+	Camera
+} from 'three';
+
+export class CSS3DObject extends Object3D {
+
+	constructor( element: HTMLElement );
+	element: HTMLElement;
+
+	onBeforeRender: ( renderer: unknown, scene: Scene, camera: Camera ) => void;
+	onAfterRender: ( renderer: unknown, scene: Scene, camera: Camera ) => void;
+
+}
+
+export class CSS3DSprite extends CSS3DObject {
+
+	constructor( element: HTMLElement );
+
+}
+
+export class CSS3DRenderer {
+
+	constructor();
+	domElement: HTMLElement;
+
+	getSize(): { width: number, height: number };
+	setSize( width: number, height: number ): void;
+	render( scene: Scene, camera: Camera ): void;
+
+}

package/plugins/thirdParty/OrbitControls.d.ts

@@ -0,0 +1,78 @@
+import { Camera, MOUSE, TOUCH, Vector3 } from 'three';
+
+export class OrbitControls {
+
+	constructor( object: Camera, domElement?: HTMLElement );
+
+	object: Camera;
+	domElement: HTMLElement | HTMLDocument;
+
+	// API
+	enabled: boolean;
+	target: Vector3;
+
+	// deprecated
+	center: Vector3;
+
+	minDistance: number;
+	maxDistance: number;
+
+	minZoom: number;
+	maxZoom: number;
+
+	minPolarAngle: number;
+	maxPolarAngle: number;
+
+	minAzimuthAngle: number;
+	maxAzimuthAngle: number;
+
+	enableDamping: boolean;
+	dampingFactor: number;
+
+	enableZoom: boolean;
+	zoomSpeed: number;
+
+	enableRotate: boolean;
+	rotateSpeed: number;
+
+	enablePan: boolean;
+	panSpeed: number;
+	screenSpacePanning: boolean;
+	keyPanSpeed: number;
+
+	autoRotate: boolean;
+	autoRotateSpeed: number;
+
+	enableKeys: boolean;
+	keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number; };
+	mouseButtons: { LEFT: MOUSE; MIDDLE: MOUSE; RIGHT: MOUSE; };
+	touches: { ONE: TOUCH; TWO: TOUCH };
+
+	update(): boolean;
+
+	saveState(): void;
+
+	reset(): void;
+
+	dispose(): void;
+
+	getPolarAngle(): number;
+
+	getAzimuthalAngle(): number;
+
+	// EventDispatcher mixins
+	addEventListener( type: string, listener: ( event: any ) => void ): void;
+
+	hasEventListener( type: string, listener: ( event: any ) => void ): boolean;
+
+	removeEventListener( type: string, listener: ( event: any ) => void ): void;
+
+	dispatchEvent( event: { type: string; target: any; } ): void;
+
+}
+
+export class MapControls extends OrbitControls {
+
+	constructor( object: Camera, domElement?: HTMLElement );
+
+}

package/plugins/utils/absoluteUrl.d.ts

@@ -0,0 +1,5 @@
+export declare function isAbsoluteURL(url: string): boolean;
+/**
+ * @description: 获取静态资源的url
+ */
+export declare function absoluteUrl(baseUrl: string, url: string): string;

package/plugins/utils/clamp.d.ts

@@ -0,0 +1,2 @@
+declare function clamp(value: number, min: number, max: number): number;
+export { clamp };

package/plugins/utils/loadImage.d.ts

@@ -0,0 +1 @@
+export declare function loadImage(src: string): Promise<HTMLImageElement>;

package/plugins/utils/motion.d.ts

@@ -0,0 +1,38 @@
+type MotionValue<K extends string> = Record<K, number>;
+type MotionConfig<K extends string> = Record<K, {
+    circle: MotionCircle | false;
+}>;
+type MotionInitalValue<K extends string> = Record<K, MotionValue<K>[K] | ({
+    value: MotionValue<K>[K];
+} & MotionConfig<K>[K])>;
+interface MotionKeyframe<K extends string> {
+    progress: number;
+    value: MotionValue<K>;
+    key?: string;
+}
+/** 是否是循环变化，比如 [0, 2 * Math.PI], 前闭后开 */
+type MotionCircle = [number, number];
+type ValueOfMotion<M> = M extends Motion<infer K> ? MotionValue<K> : never;
+type KeyframeOfMotion<M> = M extends Motion<infer K> ? MotionKeyframe<K> : never;
+declare class Motion<K extends string> {
+    config: MotionConfig<K>;
+    value: MotionValue<K>;
+    progress: number;
+    ended: boolean;
+    startTime: number;
+    startVelocity: number;
+    duration: number;
+    keyframes: MotionKeyframe<K>[];
+    private callbacks?;
+    constructor(initalValue: MotionInitalValue<K>);
+    private getProgress;
+    private getValue;
+    getProgressVelocity(time: number): number;
+    update(time: number): boolean;
+    getKeyFrameSegment(time: number): [MotionKeyframe<K>, MotionKeyframe<K>];
+    getTargetKeyframe(): MotionKeyframe<K>;
+    set(value: Partial<MotionValue<K>>, duration: number, startProgressVelocity?: number, time?: number): Promise<void>;
+    setKeyframes(keyframes: MotionKeyframe<K>[], duration: number, startProgressVelocity?: number, time?: number): Promise<void>;
+    dispose(): void;
+}
+export { Motion, MotionCircle, MotionValue, MotionInitalValue, MotionKeyframe, ValueOfMotion, KeyframeOfMotion };

package/plugins/utils/now.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 获取当前时间戳
+ */
+declare const now: () => number;
+declare function domHighResTimeStampToNow(domHighResTimeStamp: number): number;
+export { now, domHighResTimeStampToNow };

package/plugins/utils/uuid.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 计算一个唯一 id
+ */
+declare function createUuid(): string;
+export { createUuid as uuid };

package/react/canvas.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+interface FiveCanvasProps {
+    /** 渲染区宽度 */
+    width: number;
+    /** 渲染区高度 */
+    height: number;
+}
+/**
+ * Five 渲染区域组件
+ * @description Five 渲染区域组件，请在 FiveProvider 内使用
+ * @example
+ * ```typescript
+ * <FiveProvider initialWork={work}>
+ *  <FiveCanvas width={512} height={512}/>
+ * </FiveProvider>
+ * ```
+ */
+declare const FiveCanvas: React.FC<FiveCanvasProps>;
+export { FiveCanvas, FiveCanvasProps };

package/react/context.d.ts

@@ -0,0 +1,11 @@
+import * as THREE from "three";
+import * as React from "react";
+import { Five, Work, State, FiveLoadOptions } from "@realsee/five";
+declare const FiveContext: React.Context<{
+    renderer?: THREE.WebGLRenderer;
+    five: Five;
+    loadWork: (works: Work | Work[], state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, options?: number | FiveLoadOptions, userAction?: boolean) => Promise<void>;
+}>;
+declare function useFiveInstance(): Five;
+declare function useFiveWorkLoader(): (works: Work | Work[], state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, options?: number | FiveLoadOptions, userAction?: boolean) => Promise<void>;
+export { FiveContext, useFiveInstance, useFiveWorkLoader };

package/react/createProvider.d.ts

@@ -0,0 +1,95 @@
+import * as React from "react";
+import * as THREE from "three";
+import { Five, FiveInitArgs, FiveLoadOptions, Work, Works, State } from "@realsee/five";
+type FiveProviderPropTypes = {
+    work?: Work | Work[];
+    initialWork?: Work | Work[];
+    initialState?: "inherit" | "initial" | Partial<Omit<State, "offset">>;
+    initialOptions?: number | FiveLoadOptions;
+    initialUserAction?: boolean;
+    onWorksChange?: (works: Works) => void;
+    onStateChange?: (state: State, userAction: boolean) => void;
+    onCurrentStateChange?: (state: State, userAction: boolean) => void;
+    onError?: (error: Error) => void;
+    children: React.ReactNode;
+};
+/**
+ * 创建一个 FiveProvider
+ * 在 React 的体系下，使用 Provider 的方式来组织组件结构。
+ * 在 FiveProvider 下，可以使用 FiveCanvas 来创建渲染画布。
+ * 以及使用 useFiveState useFiveEvent等 Five React Hooks API 来对 FiveProvider 进行操作
+ * @param fiveInitArgs - Five 初始化参数
+ * @returns FiveProvider React 组件
+ * @example
+ * ```
+ * const FiveProvider = createFiveProvider({...fiveInitArgs});
+ * const App: React.FC = () => {
+ *  return <FiveProvider initialWork={work}>
+ *    <FiveCanvas width={512} height={512} />
+ *  </FiveProvider>
+ * };
+ * ReactDOM.render(<App/>, document.getElementById("app"));
+ * ```
+ */
+declare function createFiveProvider(fiveInitArgs?: Omit<FiveInitArgs, "renderer" | "scissor">): {
+    new (props: FiveProviderPropTypes): {
+        /**
+         * five 实例，可以通过 FiveProvider 的 ref.five 获取得到
+         * 在一些外部调用方面可以尝试使用
+         */
+        five: Five;
+        __fiveEventDisposers: (() => void)[];
+        __fiveDisposeTimer: any;
+        loadWork(works: Work | Work[], state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, options?: number | FiveLoadOptions, userAction?: boolean): Promise<void>;
+        shouldComponentUpdate(nextProps: FiveProviderPropTypes): boolean;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        render(): React.FunctionComponentElement<React.ProviderProps<{
+            renderer?: THREE.WebGLRenderer;
+            five: Five;
+            loadWork: (works: Work | Work[], state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, options?: number | FiveLoadOptions, userAction?: boolean) => Promise<void>;
+        }>>;
+        context: any;
+        setState<K extends "renderer">(state: {
+            renderer?: THREE.WebGLRenderer;
+        } | ((prevState: Readonly<{
+            renderer?: THREE.WebGLRenderer;
+        }>, props: Readonly<FiveProviderPropTypes>) => {
+            renderer?: THREE.WebGLRenderer;
+        } | Pick<{
+            renderer?: THREE.WebGLRenderer;
+        }, K>) | Pick<{
+            renderer?: THREE.WebGLRenderer;
+        }, K>, callback?: () => void): void;
+        forceUpdate(callback?: () => void): void;
+        readonly props: Readonly<FiveProviderPropTypes> & Readonly<{
+            children?: React.ReactNode | undefined;
+        }>;
+        state: Readonly<{
+            renderer?: THREE.WebGLRenderer;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<FiveProviderPropTypes>, prevState: Readonly<{
+            renderer?: THREE.WebGLRenderer;
+        }>): any;
+        componentDidUpdate?(prevProps: Readonly<FiveProviderPropTypes>, prevState: Readonly<{
+            renderer?: THREE.WebGLRenderer;
+        }>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<FiveProviderPropTypes>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<FiveProviderPropTypes>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<FiveProviderPropTypes>, nextState: Readonly<{
+            renderer?: THREE.WebGLRenderer;
+        }>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<FiveProviderPropTypes>, nextState: Readonly<{
+            renderer?: THREE.WebGLRenderer;
+        }>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+type FiveProviderType = ReturnType<typeof createFiveProvider>;
+export { createFiveProvider, FiveProviderType, FiveProviderPropTypes };

package/react/createStore.d.ts

@@ -0,0 +1,144 @@
+import * as React from "react";
+type StoreValueMapType = Record<string, any>;
+type StoreActionMapType = {
+    [name: string]: (...args: any[]) => any;
+};
+type StoreActionMapHanlder<T extends StoreValueMapType, K extends keyof T, M extends StoreActionMapType> = {
+    [Key in keyof M]: [
+        callback: (getValues: () => Pick<T, K>, setValues: (values: Pick<T, K>) => void, ...args: Parameters<M[Key]>) => ReturnType<M[Key]>,
+        ...deps: K[]
+    ];
+};
+/**
+ * 监听者模式
+ * @template T - 预设的监听回调类型
+ * @example
+ * ```
+ * new Store<{
+ * "foo": [arg1: number, arg2: string],
+ * "bar": [arg: boolean],
+ * }>()
+ * ```
+ */
+declare class Store<T extends StoreValueMapType> {
+    /** 值 */
+    values: T;
+    /** 全局的数据变化钩子 */
+    onValuesChange?: (values: T, prevValues: T) => void;
+    private listeners;
+    constructor(initialValue: T, onValuesChange?: (values: T, prevValues: T) => void);
+    /**
+     * 监听数据变化
+     * @param names - 监听的字段名称
+     * @param callback - 回调函数
+     * @returns 解除监听数据变化
+     */
+    on<K extends keyof T>(names: K[], callback: (values: Pick<T, K>, prevValues: Pick<T, K>) => void): () => void;
+    /**
+     * 获取值
+     * @param names - 值的名称
+     */
+    getValues<K extends keyof T>(names: K[]): Pick<T, K>;
+    /**
+     * 设置值
+     * @param values - 设置值
+     */
+    setValues<K extends keyof T>(names: K[], values: Pick<T, K>): void;
+}
+declare function createStore<T extends StoreValueMapType, A extends StoreActionMapType = {}>(actionHandler: StoreActionMapHanlder<T, keyof T, A>): {
+    /**
+     * 使用 Store
+     * @param names - 获取的 Store 字段
+     * @returns [值, 修改值方法]
+     */
+    useStore<K extends keyof T>(names: K[]): [values: Pick<T, K>, setValues: (values: Pick<T, K>) => void];
+    /**
+     * 使用 Store (仅设置值)
+     * @param names - 获取的 Store 字段
+     * @returns 修改值方法
+     */
+    useStoreSetter<K extends keyof T>(names: K[]): (values: Pick<T, K>) => void;
+    /**
+     * 监听 Store 变化
+     * @param names - Store 字段
+     * @param callback - 监听变化的回调函数
+     * @param deps - 依赖对象
+     */
+    watchStore<K extends keyof T>(names: K[], callback: (values: Pick<T, K>, prevValues: Pick<T, K>) => void, deps?: React.DependencyList | undefined): void;
+    useStoreAction<N extends keyof A, F extends A[N]>(actionName: N): F;
+    /**
+     * Store Provider.
+     * 内部组件均可和 store 交互
+     */
+    StoreProvider: {
+        new (props: {
+            initialValue: T;
+            onValuesChange?: (value: T, prevValue: T) => void;
+            children: React.ReactNode;
+        }): {
+            store: Store<T>;
+            shouldComponentUpdate(nextProps: {
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React.ReactNode;
+            }): boolean;
+            render(): React.FunctionComponentElement<React.ProviderProps<Store<T>>>;
+            context: any;
+            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React.ReactNode;
+            }>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
+            forceUpdate(callback?: () => void): void;
+            readonly props: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React.ReactNode;
+            }> & Readonly<{
+                children?: React.ReactNode | undefined;
+            }>;
+            state: Readonly<{}>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            componentDidMount?(): void;
+            componentWillUnmount?(): void;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React.ReactNode;
+            }>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React.ReactNode;
+            }>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React.ReactNode;
+            }>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React.ReactNode;
+            }>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React.ReactNode;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React.ReactNode;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        contextType?: React.Context<any> | undefined;
+    };
+};
+type StoreProviderType = ReturnType<typeof createStore>["StoreProvider"];
+export { Store, createStore, StoreProviderType, StoreValueMapType, StoreActionMapType, StoreActionMapHanlder };

package/react/hooks/unsafe__useFiveInstance.d.ts

@@ -0,0 +1,9 @@
+import { Five } from "@realsee/five";
+/**
+ * Five React Hooks: 获取 five 实例
+ * @description 不到万不得已，并不推荐直接使用。
+ * @deprecated 不到万不得已，并不推荐直接使用。
+ * @returns five 实例
+ */
+declare function unsafe__useFiveInstance(): Five;
+export { unsafe__useFiveInstance };

package/react/hooks/useFiveAction.d.ts

@@ -0,0 +1,147 @@
+import { Pose, Pano, PanoId } from "@realsee/five";
+/**
+ * Five 命令集合
+ */
+interface FiveActionReactCallbacks {
+    /**
+     * 移动相机。（不触发点位移动）
+     * @description
+     * 如果动画中途被打断（用户触发行为，或者调用 setState, load, changeMode）的等
+     * 会 Promise.reject。运动完成则 Promise.resolve
+     * @param pose - 相机目标位置
+     * @param duration - 动画触发的时常
+     * @returns Promise 是否移动成功
+     */
+    updateCamera(pose: Pose, duration: number): Promise<void>;
+    /**
+     * 获取画面中的像素颜色
+     * @param x - 获取像素区域的起始坐标 x
+     * @param y - 获取像素区域的起始坐标 y
+     * @param width - 获取像素区域的宽度
+     * @param height - 获取像素区域的高度
+     * @param pixelRatio - 获取区域的像素比
+     * @param flipY - 是否Y轴翻转
+     * @param buffer - 存储数组
+     * @returns rgba颜色平铺的 Uint8Array
+     */
+    getPixels<T extends Uint8Array | Uint8ClampedArray = Uint8Array>(x: number, y: number, width: number, height: number, pixelRatio?: number, flipY?: boolean, buffer?: T): T;
+    /**
+     * 获取画面中的像素颜色
+     * @param options - 参数
+     * @returns
+     */
+    getPixels<T extends Uint8Array | Uint8ClampedArray = Uint8Array>(options: {
+        /** 获取像素区域的起始坐标 x */
+        x: number;
+        /** 获取像素区域的起始坐标 y */
+        y: number;
+        /** 获取像素区域的宽度 */
+        width: number;
+        /** 获取像素区域的高度 */
+        height: number;
+        /** 获取区域的像素比 */
+        pixelRatio?: number;
+        helperVisible?: boolean;
+        skipPanorama?: boolean;
+        /** 是否Y轴翻转 */
+        flipY?: boolean;
+        /** 存储数组 */
+        buffer?: T;
+    }): T;
+    /**
+     * 强制渲染
+     * @description
+     * 调用 `render()` 和 `needsRender()` 均可在按需渲染时，使得画面渲染一次
+     * 区别在于：
+     * - `needsRender()` 为在下帧渲染画面
+     * - `render()` 在当前帧渲染画面
+     * 推荐使用 `needsRender()`, 可以更加流畅。但是如果需要截图等同步操作，可以使用 `render()`
+     *
+     * @param callback - 渲染完成回调
+     */
+    render(callback?: () => void): void;
+    /**
+     * 下一帧渲染
+     * @description
+     * 调用 `render()` 和 `needsRender()` 均可在按需渲染时，使得画面渲染一次
+     * 区别在于：
+     * - `needsRender()` 为在下帧渲染画面
+     * - `render()` 在当前帧渲染画面
+     * 推荐使用 `needsRender()`, 可以更加流畅。但是如果需要截图等同步操作，可以使用 `render()`
+     */
+    needsRender(): void;
+    /**
+     * 预加载点位图片资源
+     * @param pano - 观察点
+     * @param callback - 加载完成回调, 并传递加载用时。
+     * @returns 加载完成的 Promise 参数同 callback
+     */
+    preloadPano(pano: Pano | PanoId | number, callback?: (costs: number) => void): Promise<number>;
+}
+/**
+ * Five React Hooks: 使用 Five 的命令
+ *
+ * @function updateCamera
+ * ```
+ * 移动相机。（不触发点位移动）
+ * 如果动画中途被打断（用户触发行为，或者调用 setState, load, changeMode）的等
+ * 会 Promise.reject。运动完成则 Promise.resolve
+ *
+ * // params pose - 相机目标位置
+ * // params duration - 动画触发的时常
+ * // params Promise - 是否移动成功
+ * updateCamera(pose: Pose, duration: number): Promise<void>
+ * ```
+ *
+ * @function getPixels
+ * ```
+ * 获取画面中的像素颜色
+ * // param x - 获取像素区域的起始坐标 x
+ * // param y - 获取像素区域的起始坐标 y
+ * // param width - 获取像素区域的宽度
+ * // param height - 获取像素区域的高度
+ * // param pixelRatio - 获取区域的像素比
+ * // returns rgba颜色平铺的 Uint8Array
+ * getPixels(x: number, y: number, width: number, height: number, pixelRatio?: number): Uint8Array,
+ * ```
+ *
+ * @function render
+ * ```
+ * 强制渲染
+ * 调用 render() 和 needsRender() 均可在按需渲染时，使得画面渲染一次
+ * 区别在于：
+ * - needsRender() 为在下帧渲染画面
+ * - render() 在当前帧渲染画面
+ * 推荐使用 needsRender(), 可以更加流畅。但是如果需要截图等同步操作，可以使用 render()
+ *
+ * // param callback 渲染完成回调
+ * render(callback?: () => void): void,
+ * ```
+ *
+ * @function needsRender
+ * ```
+ * 下一帧渲染
+ * 调用 render() 和 needsRender() 均可在按需渲染时，使得画面渲染一次
+ * 区别在于：
+ * - needsRender() 为在下帧渲染画面
+ * - render() 在当前帧渲染画面
+ * 推荐使用 needsRender(), 可以更加流畅。但是如果需要截图等同步操作，可以使用 render()
+ * needsRender(): void,
+ * ```
+ *
+ * @function preloadPano
+ * ```
+ * 预加载点位图片资源
+ * // param panoIndex - 观察点序号
+ * // param callback - 加载完成回调, 并传递加载用时。
+ * // returns 加载完成的 Promise 参数同 callback
+ * preloadPano(panoIndex: number, callback?: (costs: number) => void): Promise<number>
+ * ```
+ *
+ * @example
+ * ```
+ * const { updateCamera, initBasisLoader, getPixels, render, needsRender, preloadPano } = useFiveAction();
+ * ```
+ */
+declare function useFiveAction(): FiveActionReactCallbacks;
+export { useFiveAction, FiveActionReactCallbacks };

package/react/hooks/useFiveCameraDirection.d.ts

@@ -0,0 +1,7 @@
+import * as THREE from "three";
+/**
+ * Five React Hooks: 得到当前相机的方向（单位向量）
+ * @returns 当前相机的方向的单位向量
+ */
+declare function useFiveCameraDirection(): THREE.Vector3;
+export { useFiveCameraDirection };

package/react/hooks/useFiveCameraRaycaster.d.ts

@@ -0,0 +1,7 @@
+import * as THREE from "three";
+/**
+ * Five React Hooks: 得到当前相机的方向（射线对象）
+ * @returns 当前相机的方向的射线对象
+ */
+declare function useFiveCameraRaycaster(): THREE.Raycaster;
+export { useFiveCameraRaycaster };

package/react/hooks/useFiveCurrentObserver.d.ts

@@ -0,0 +1,11 @@
+import { WorkObserver } from "@realsee/five";
+/**
+ * Five React Hooks: Five 的当前观测点
+ * @returns Work.observers[number] 当前观测点, 如果 work 未加载则为 undefined
+ * @example
+ * ```
+ * const observer = useFiveCurrentObserver();
+ * ```
+ */
+declare function useFiveCurrentObserver(): WorkObserver | undefined;
+export { useFiveCurrentObserver };

package/react/hooks/useFiveCurrentState.d.ts

@@ -0,0 +1,15 @@
+import { State } from "@realsee/five";
+/**
+ * Five React Hooks: Five 的实时状态
+ * @returns
+ * [ currentState: Five 的实时状态, setState: 设置 Five 的状态 ]
+ * @example
+ * ```
+ * const [ currentState, setState ] = useFiveCurrentState;
+ * ```
+ */
+declare function useFiveCurrentState(): [
+    currentState: State,
+    setState: (state: Partial<State> | ((prevState: State) => Partial<State>), immediately?: boolean, userAction?: boolean) => void
+];
+export { useFiveCurrentState };

package/react/hooks/useFiveEventCallback.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { EventCallback } from "@realsee/five";
+/**
+ * Five React Hooks: Five 事件监听
+ * 具体事件列表 请查看 Five.EventCallback
+ * @example
+ * ```
+ * useFiveEvent("cameraUpdate", pose => {});
+ * ```
+ */
+declare function useFiveEventCallback<T extends keyof EventCallback>(name: T, callback: EventCallback[T], deps?: React.DependencyList | undefined): void;
+export { useFiveEventCallback };