@realsee/five 5.0.0-alpha.100

package/react/index.d.ts

@@ -0,0 +1,812 @@
+import { EventCallback } from '@realsee/five';
+import { Five } from '@realsee/five';
+import { FiveInitArgs } from '@realsee/five';
+import { Intersection } from '@realsee/five';
+import { Model } from '@realsee/five';
+import { Pose } from '@realsee/five';
+import * as React_2 from 'react';
+import { Scene } from '@realsee/five';
+import { State } from '@realsee/five';
+import * as THREE_2 from 'three';
+import { Vector2 } from 'three';
+import { Work } from '@realsee/five';
+
+export declare function createFiveFeature<T extends FiveInjectionFeature>(...features: T[]): T[];
+
+/**
+ * 创建一个 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"));
+ * ```
+ */
+export declare function createFiveProvider(fiveInitArgs?: Omit<FiveInitArgs, "renderer" | "scissor">): {
+    new (props: FiveProviderPropTypes): {
+        /**
+         * five 实例，可以通过 FiveProvider 的 ref.five 获取得到
+         * 在一些外部调用方面可以尝试使用
+         */
+        five?: Five;
+        loadWork(work: Work, state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, duration?: number, userAction?: boolean): Promise<void>;
+        shouldComponentUpdate(nextProps: FiveProviderPropTypes): boolean;
+        componentWillUnmount(): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<FiveProviderPropTypes>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
+        forceUpdate(callback?: () => void): void;
+        readonly props: Readonly<FiveProviderPropTypes> & Readonly<{
+            children?: React_2.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React_2.ReactInstance;
+        };
+        componentDidMount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React_2.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<FiveProviderPropTypes>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<FiveProviderPropTypes>, prevState: Readonly<{}>, 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<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<FiveProviderPropTypes>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: React_2.Context<any>;
+};
+
+export 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_1 extends keyof T>(names: K_1[]): (values: Pick<T, K_1>) => void;
+    /**
+     * 监听 Store 变化
+     * @param names - Store 字段
+     * @param callback - 监听变化的回调函数
+     * @param deps - 依赖对象
+     */
+    watchStore<K_2 extends keyof T>(names: K_2[], callback: (values: Pick<T, K_2>, prevValues: Pick<T, K_2>) => void, deps?: React_2.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_2.ReactNode;
+        }): {
+            store: Store<T>;
+            shouldComponentUpdate(nextProps: {
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React_2.ReactNode;
+            }): boolean;
+            render(): JSX.Element;
+            context: any;
+            setState<K_3 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React_2.ReactNode;
+            }>) => {} | Pick<{}, K_3>) | Pick<{}, K_3>, callback?: () => void): void;
+            forceUpdate(callback?: () => void): void;
+            readonly props: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React_2.ReactNode;
+            }> & Readonly<{
+                children?: React_2.ReactNode;
+            }>;
+            state: Readonly<{}>;
+            refs: {
+                [key: string]: React_2.ReactInstance;
+            };
+            componentDidMount?(): void;
+            componentWillUnmount?(): void;
+            componentDidCatch?(error: Error, errorInfo: React_2.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React_2.ReactNode;
+            }>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React_2.ReactNode;
+            }>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React_2.ReactNode;
+            }>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React_2.ReactNode;
+            }>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React_2.ReactNode;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React_2.ReactNode;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        contextType?: React_2.Context<any>;
+    };
+};
+
+/**
+ * Five 命令集合
+ */
+export declare interface FiveActionReactCallbacks {
+    /**
+     * 移动相机。（不触发点位移动）
+     * @description
+     * 如果动画中途被打断（用户触发行为，或者调用 setState, load, changeMode）的等
+     * 会 Promise.reject。运动完成则 Promise.resolve
+     * @param pose - 相机目标位置
+     * @param duration - 动画触发的时常
+     * @returns Promise 是否移动成功
+     */
+    updateCamera(pose: Pose, duration: number): Promise<void>;
+    /**
+     * 初始化 initBasisLoader
+     * @description
+     * 同初始化的 initBasisLoader 参数。用于初始化 basisLoader。
+     * basisLoader 只会初始化一次，一旦初始化则不会再修改。
+     *
+     * @param transcoderResourcePath - basis 解析器路径
+     * 如果不设置，使用默认解析器 basis 解析器。
+     * 可以传入解析器的 `resourcePath`, 则使用指定的解析器
+     * @example
+     * ```
+     * // 使用默认解析器
+     * initialBasisLoader();
+     *
+     * // 使用指定解析器
+     * // 会调用这个目录下的 basis_transcoder.js basis_transcoder.wasm 文件作为解析器
+     * initialBasisLoader("https://vrlab-public.ljcdn.com/release/static/image/release/five/basis/");
+     * ```
+     */
+    initBasisLoader(transcoderResourcePath?: string): void;
+    /**
+     * 获取画面中的像素颜色
+     * @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;
+    /**
+     * 强制渲染
+     * @description
+     * 调用 `render()` 和 `needsRender()` 均可在按需渲染时，使得画面渲染一次
+     * 区别在于：
+     * - `needsRender()` 为在下帧渲染画面
+     * - `render()` 在当前帧渲染画面
+     * 推荐使用 `needsRender()`, 可以更加流畅。但是如果需要截图等同步操作，可以使用 `render()`
+     *
+     * @param callback - 渲染完成回调
+     */
+    render(callback?: () => void): void;
+    /**
+     * 下一帧渲染
+     * @description
+     * 调用 `render()` 和 `needsRender()` 均可在按需渲染时，使得画面渲染一次
+     * 区别在于：
+     * - `needsRender()` 为在下帧渲染画面
+     * - `render()` 在当前帧渲染画面
+     * 推荐使用 `needsRender()`, 可以更加流畅。但是如果需要截图等同步操作，可以使用 `render()`
+     */
+    needsRender(): void;
+    /**
+     * 预加载点位图片资源
+     * @param panoIndex - 观察点序号
+     * @param callback - 加载完成回调, 并传递加载用时。
+     * @returns 加载完成的 Promise 参数同 callback
+     */
+    preloadPano(panoIndex: number, callback?: (costs: number) => void): Promise<number>;
+}
+
+/**
+ * Five 渲染区域组件
+ * @description Five 渲染区域组件，请在 FiveProvider 内使用
+ * @param width - 渲染区域的宽度
+ * @param height - 渲染区域的高度
+ * @returns React 元素
+ * @example
+ * ```typescript
+ * <FiveProvider initialWork={work}>
+ *  <FiveCanvas width={512} height={512}/>
+ * </FiveProvider>
+ * ```
+ */
+export declare const FiveCanvas: React_2.FC<{
+    width: number;
+    height: number;
+}>;
+
+export declare type FiveInjectionActionFeature = "loadWork" | "setState" | "on" | "off" | "intersectRaycaster" | "project2d" | "updateCamera" | "initBasisLoader" | "getPixels" | "render" | "needsRender" | "preloadPano" | "showFloor" | "toggleHelperVisible";
+
+export declare type FiveInjectionDataFeature = "unsafe__fiveInstance" | "currentState" | "currentObserver" | "state" | "work" | "model" | "scene" | "cameraDirection" | "cameraRaycaster" | "modelReadyState" | "shownFloor" | "totalFloorLength" | "helperVisible";
+
+export declare type FiveInjectionFeature = FiveInjectionDataFeature | FiveInjectionActionFeature;
+
+export declare interface FiveInjectionTypes extends Record<FiveInjectionFeature, any> {
+    /**
+     * Five React Inject: 获取 five 实例
+     * @description 不到万不得已，并不推荐直接使用。
+     * @deprecated 不到万不得已，并不推荐直接使用。
+     */
+    unsafe__fiveInstance: Five;
+    /**
+     * Five React Inject: Five 的目标状态
+     * @description
+     * ```text
+     * five 设置了以下状态
+     *
+     * - mode: Mode
+     * - panoIndex: number
+     * - longitude: number
+     * - latitude: number
+     * - fov: number
+     * - offset: THREE.Vector3
+     *
+     * 可以通过 state, currentState 和 setState 来获取和设置。
+     * 通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
+     * 来迎合一些通过数据驱动的场景。
+     * ```
+     */
+    state: State;
+    /**
+     * Five React Inject: Five 的当前状态
+     * @description
+     * ```text
+     * five 设置了以下状态
+     *
+     * - mode: Mode
+     * - panoIndex: number
+     * - longitude: number
+     * - latitude: number
+     * - fov: number
+     * - offset: THREE.Vector3
+     *
+     * 可以通过 state, currentState 和 setState 来获取和设置。
+     * 通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
+     * 来迎合一些通过数据驱动的场景。
+     * ```
+     */
+    currentState: State;
+    /**
+     * Five React Inject: Five Work
+     */
+    work: Work;
+    /**
+     * 设置 State
+     * @description
+     * ```text
+     * five 设置了以下状态
+     *
+     * - mode: Mode
+     * - panoIndex: number
+     * - longitude: number
+     * - latitude: number
+     * - fov: number
+     * - offset: THREE.Vector3
+     *
+     * 可以通过 state, currentState 和 setState 来获取和设置。
+     * 通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
+     * 来迎合一些通过数据驱动的场景。
+     * ```
+     * @param state - 目标状态
+     * @param immediately - 是否马上转换，马上转换会尽快达到目标状态，尽量减少中间状态，更少动画。
+     */
+    setState: Five["setState"];
+    /**
+     * 加载 Work 数据
+     * @param inputWork - Work 数据
+     * @param state - 初始化姿态
+     *  - "inherit" 使用当前姿态
+     *  - "initial" 使用 Work 数据中的 initial 姿态
+     *  - State 自定义姿态
+     * @param duration - 切换时间
+     */
+    loadWork: Five["load"];
+    /**
+     * 监听事件
+     * @param name - 事件名 具体事件列表 请查看 Five.EventCallback
+     * @param callback - 回调函数
+     * @param once - 是否一次触发
+     * @returns 解除事件绑定
+     * @example
+     * ```
+     * $five.on("panoArrived", () => {});
+     * ```
+     */
+    on: Five["on"];
+    /**
+     * 监听事件一次触发
+     * @param name - 事件名 具体事件列表 请查看 Five.EventCallback
+     * @param callback - 回调函数
+     * @returns 解除事件绑定
+     * @example
+     * ```
+     * $five.once("panoArrived", () => {});
+     * ```
+     */
+    once: Five["once"];
+    /**
+     * 解除事件绑定
+     * @param name - 事件名 具体事件列表 请查看 Five.EventCallback
+     * @param callback - 回调函数
+     * @example
+     * ```
+     * $five.off("panoArrived", () => {});
+     * ```
+     */
+    off: Five["off"];
+    /**
+     * 计算模型射线碰撞检测
+     * @param raycaster - THREE 射线对象
+     * @param floors - 和某一楼层做碰撞检测， 不传为和所有楼层做碰撞检测
+     * @returns 返回碰撞
+     */
+    intersectRaycaster: Model["intersectRaycaster"];
+    /**
+     * 计算三维坐标对应到屏幕的二维坐标
+     * @description
+     * 如果三维坐标不在屏幕中，则返回 null
+     * @param vector - 三维坐标
+     * @param testModel - 是否计算模型遮挡
+     * @returns 二维坐标 或者 null
+     */
+    project2d: Five["project2d"];
+    /**
+     * 移动相机。（不触发点位移动）
+     * @description
+     * 如果动画中途被打断（用户触发行为，或者调用 setState, load, changeMode）的等
+     * 会 Promise.reject。运动完成则 Promise.resolve
+     * @param pose - 相机目标位置
+     * @param duration - 动画触发的时常
+     * @returns Promise 是否移动成功
+     */
+    updateCamera: Five["updateCamera"];
+    /**
+     * 初始化 initBasisLoader
+     * @description
+     * 同初始化的 initBasisLoader 参数。用于初始化 basisLoader。
+     * basisLoader 只会初始化一次，一旦初始化则不会再修改。
+     *
+     * @param transcoderResourcePath - basis 解析器路径
+     * 如果不设置，使用默认解析器 basis 解析器。
+     * 可以传入解析器的 `resourcePath`, 则使用指定的解析器
+     * @example
+     * ```
+     * // 使用默认解析器
+     * five.initialBasisLoader();
+     *
+     * // 使用指定解析器
+     * // 会调用这个目录下的 basis_transcoder.js basis_transcoder.wasm 文件作为解析器
+     * five.initialBasisLoader("https://vrlab-public.ljcdn.com/release/static/image/release/five/basis/");
+     * ```
+     */
+    initBasisLoader: Five["initBasisLoader"];
+    /**
+     * 获取画面中的像素颜色
+     * @param x - 获取像素区域的起始坐标 x
+     * @param y - 获取像素区域的起始坐标 y
+     * @param width - 获取像素区域的宽度
+     * @param height - 获取像素区域的高度
+     * @param pixelRatio - 获取区域的像素比
+     * @returns rgba颜色平铺的 Uint8Array
+     */
+    getPixels: Five["getPixels"];
+    /**
+     * 强制渲染
+     * @description
+     * 调用 `render()` 和设置 `needsRender()` 均可在按需渲染时，使得画面渲染一次
+     * 区别在于：
+     * - `needsRender()` 为在下帧渲染画面
+     * - `render()` 在当前帧渲染画面
+     * 推荐使用 `needsRender()`, 可以更加流畅。但是如果需要截图等同步操作，可以使用 `render()`
+     *
+     * @param callback - 渲染完成回调
+     */
+    render: Five["render"];
+    /**
+     * 下一帧渲染
+     * @description
+     * 调用 `render()` 和设置 `needsRender()` 均可在按需渲染时，使得画面渲染一次
+     * 区别在于：
+     * - `needsRender()` 为在下帧渲染画面
+     * - `render()` 在当前帧渲染画面
+     * 推荐使用 `needsRender()`, 可以更加流畅。但是如果需要截图等同步操作，可以使用 `render()`
+     *
+     */
+    needsRender: () => void;
+    /**
+     * 预加载点位图片资源
+     * @param panoIndex - 观察点序号
+     * @param callback - 加载完成回调, 并传递加载用时。
+     * @returns 加载完成的 Promise 参数同 callback
+     */
+    preloadPano: Five["preloadPano"];
+    /**
+     * 显示楼层
+     * @param floorIndex - 楼层，如果不传则都显示
+     */
+    showFloor: (floorIndex?: number) => void;
+    /**
+     * 帮助元素的隐藏/显示
+     * @param visible - 隐藏/显示
+     */
+    toggleHelperVisible: (visible: boolean) => void;
+}
+
+export declare type FiveProviderPropTypes = {
+    work?: Work;
+    initialWork?: Work | Promise<Work>;
+    initialState?: "inherit" | "initial" | Partial<Omit<State, "offset">>;
+    initialUserAction?: boolean;
+    onWorkChange?: (work: Work) => void;
+    onStateChange?: (state: State, userAction: boolean) => void;
+    onCurrentStateChange?: (state: State, userAction: boolean) => void;
+    onError?: (error: Error) => void;
+    children: React_2.ReactNode;
+};
+
+export declare type FiveProviderType = ReturnType<typeof createFiveProvider>;
+
+export declare const INJECTION_PROPNAME = "$five";
+
+export declare interface PropTypeOfFiveFeatures<F extends FiveInjectionFeature[]> {
+    [INJECTION_PROPNAME]: Pick<FiveInjectionTypes, F[number]>;
+}
+
+/**
+ * 监听者模式
+ * @template T - 预设的监听回调类型
+ * @example
+ * ```
+ * new Store<{
+ * "foo": [arg1: number, arg2: string],
+ * "bar": [arg: boolean],
+ * }>()
+ * ```
+ */
+export 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;
+}
+
+export declare 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[]
+    ];
+};
+
+export declare type StoreActionMapType = {
+    [name: string]: (...args: any[]) => any;
+};
+
+export declare type StoreProviderType = ReturnType<typeof createStore>["StoreProvider"];
+
+export declare type StoreValueMapType = Record<string, any>;
+
+/**
+ * Five React Hooks: 获取 five 实例
+ * @description 不到万不得已，并不推荐直接使用。
+ * @deprecated 不到万不得已，并不推荐直接使用。
+ * @returns five 实例
+ */
+export declare function unsafe__useFiveInstance(): Five;
+
+/**
+ * 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 initBasisLoader
+ * ```
+ * 初始化 initBasisLoader
+ * 同初始化的 initBasisLoader 参数。用于初始化 basisLoader。
+ * basisLoader 只会初始化一次，一旦初始化则不会再修改。
+ *
+ * // param transcoderResourcePath
+ * // 如果不设置，使用默认解析器 basis 解析器。
+ * // 可以传入解析器的 `resourcePath`, 则使用指定的解析器
+ * initBasisLoader(transcoderResourcePath?: string): 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();
+ * ```
+ */
+export declare function useFiveAction(): FiveActionReactCallbacks;
+
+/**
+ * Five React Hooks: 得到当前相机的方向（单位向量）
+ * @returns 当前相机的方向的单位向量
+ */
+export declare function useFiveCameraDirection(): THREE_2.Vector3;
+
+/**
+ * Five React Hooks: 得到当前相机的方向（射线对象）
+ * @returns 当前相机的方向的射线对象
+ */
+export declare function useFiveCameraRaycaster(): THREE_2.Raycaster;
+
+/**
+ * Five React Hooks: Five 的当前观测点
+ * @returns Work.observers[number] 当前观测点, 如果 work 未加载则为 null
+ * @example
+ * ```
+ * const observer = useFiveCurrentObserver();
+ * ```
+ */
+export declare function useFiveCurrentObserver(): Work["observers"][number] | null;
+
+/**
+ * Five React Hooks: Five 的实时状态
+ * @returns
+ * [ currentState: Five 的实时状态, setState: 设置 Five 的状态 ]
+ * @example
+ * ```
+ * const [ currentState, setState ] = useFiveCurrentState;
+ * ```
+ */
+export declare function useFiveCurrentState(): [
+currentState: State,
+setState: (state: Partial<State> | ((prevState: State) => Partial<State>), immediately?: boolean, userAction?: boolean) => void
+];
+
+/**
+ * Five React Hooks: Five 事件监听
+ * 具体事件列表 请查看 Five.EventCallback
+ * @example
+ * ```
+ * useFiveEvent("cameraUpdate", pose => {});
+ * ```
+ */
+export declare function useFiveEventCallback<T extends keyof EventCallback>(name: T, callback: EventCallback[T], deps?: React_2.DependencyList | undefined): void;
+
+/**
+ * Five React Hooks: Five 楼层
+ * @returns
+ * [ shownFloor: Five 当前显示的楼层， null 为都显示, showFloor: 设置显示楼层，不传参数为都显示 ]
+ * @example
+ * ```
+ * const [ shownFloor, showFloor ] = useFiveHelper;
+ * ```
+ */
+export declare function useFiveFloor(): [
+shownFloor: number | null,
+totalFloorLength: number,
+showFloor: (floorIndex?: number) => void
+];
+
+/**
+ * Five React Hooks: Five 帮助元素的隐藏/显示
+ * @returns
+ * [ helperVisible: Five 帮助元素是否显示显示, toggleHelperVisible: 设置 帮助元素的隐藏/显示 ]
+ * @example
+ * ```
+ * const [ helperVisible, toggleHelperVisible ] = useFiveHelper;
+ * ```
+ */
+export declare function useFiveHelper(): [
+helperVisible: boolean,
+toggleHelperVisible: (visible: boolean) => void
+];
+
+/**
+ * Five React Hooks: 获取当前模型碰撞检测方法
+ *
+ * @function fiveModelIntersectRaycaster
+ * ```
+ * 计算模型射线碰撞检测
+ * // param raycaster THREE 射线对象
+ * // param floors 和某一楼层做碰撞检测， 不传为和所有楼层做碰撞检测
+ * // returns 返回碰撞
+ * intersectRaycaster(raycaster: THREE.Raycaster, floors?: number | number[]): Intersection[]
+ * ```
+ *
+ * @example
+ * ```
+ * const fiveModelIntersectRaycaster = useFiveModelIntersectRaycaster();
+ * const intersects = fiveModelIntersectRaycaster(raycaster);
+ * ```
+ */
+export declare function useFiveModelIntersectRaycaster(): (raycaster: THREE_2.Raycaster) => Intersection[];
+
+/**
+ * Five React Hooks: 获取当前模型加载状态
+ * @returns
+ * "Loaded": 加载完成
+ * "Empty" 加载未完成
+ */
+export declare function useFiveModelReadyState(): "Loaded" | "Empty";
+
+/**
+ * Five React Hooks: 将三维的坐标对应到而为屏幕
+ *
+ * @function preject2d
+ * ```
+ * 计算模型射线碰撞检测
+ * // param vector 三维的坐标
+ * // param testModel 是否和模型检测，如果检测，则被模型遮挡会返回 null
+ * // returns 三维的坐标 或者 null
+ * preject2d(vector: THREE.Vector3, testModel: boolean): THREE.Vector2 ｜ null
+ * ```
+ *
+ * @example
+ * ```
+ * const preject2d = useFiveProject2d();
+ * const { x: width, y: height } = preject2d(new THREE.Vector3(0, 0, 0));
+ * ```
+ */
+export declare function useFiveProject2d(): (vector: THREE.Vector3, testModel: boolean) => Vector2;
+
+/**
+ * @deprecated
+ * 请使用 `useFiveSceneEffect` 替代
+ */
+export declare const useFiveScene: typeof useFiveSceneEffect;
+
+/**
+ * Five React Hooks: 操作 Five 的 Scene
+ * @param callback - 获取 Five 的 Scene 的回调函数
+ * @example
+ * ```
+ * useFiveSceneEffect(scene => {
+ *  // object is a THREE.Object3D
+ *  scene.add(object);
+ *  return () => scene.remove(object); // 析构函数
+ * });
+ * ```
+ */
+export declare function useFiveSceneEffect(callback: (scene: Scene) => void | (() => void), deps?: React_2.DependencyList | undefined): void;
+
+export declare function useFiveState(): [
+state: State,
+setState: (state: Partial<State> | ((prevState: State) => Partial<State>), immediately?: boolean, userAction?: boolean) => void
+];
+
+/**
+ * Five React Hooks: 获取/设置当前的 Work
+ *
+ * @returns
+ * [ work: 获取当前的 Work, loadWork: 设置 Work ]
+
+ * @function loadWork
+ * ```
+ * 加载 Work 数据
+ * // param work Work 数据
+ * // param state 初始化姿态
+ * //  - "inherit" 使用当前姿态
+ * //  - "initial" 使用 Work 数据中的 initial 姿态
+ * //  - State 自定义姿态
+ * // param duration 切换时间
+ * (work: Work, state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, duration?: number) => void
+ * ```
+ *
+ * @example
+ * ```
+ * const [ work, loadWork ] = useFiveWork;
+ * ```
+ */
+export declare function useFiveWork(): [
+work: Work | undefined,
+loadWork: (work: Work, state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, duration?: number, userAction?: boolean) => Promise<void>
+];
+
+export declare function withFive<F extends FiveInjectionFeature[]>(features: F): <P extends PropTypeOfFiveFeatures<F>, C extends React_2.ComponentClass<P, any>>(Component: C & React_2.ComponentClass<P, any>) => React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<Omit<P, "$five">> & React_2.RefAttributes<Omit<InstanceType<C>, "state" | "setState" | "render" | "componentDidMount" | "shouldComponentUpdate" | "componentWillUnmount" | "componentDidCatch" | "getSnapshotBeforeUpdate" | "componentDidUpdate" | "componentWillMount" | "UNSAFE_componentWillMount" | "componentWillReceiveProps" | "UNSAFE_componentWillReceiveProps" | "componentWillUpdate" | "UNSAFE_componentWillUpdate" | "context" | "forceUpdate" | "props" | "refs">>>;
+
+export { }