@realsee/five-webgpu 1.0.0-alpha.1

package/react/createProvider.d.ts

@@ -0,0 +1,98 @@
+import * as React from "react";
+import * as THREE from "three/webgpu";
+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 / FiveAutoCanvas 来创建渲染画布。
+ * 以及使用 useFiveState useFiveEvent等 Five React Hooks API 来对 FiveProvider 进行操作
+ * @description
+ * WebGPU 版本下，`Five` 会在内部自行创建并管理一个异步初始化的 `THREE.WebGPURenderer`，
+ * 因此这里不再需要外部的 renderer 复用池，直接由 `Five` 持有 renderer。
+ * @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.WebGPURenderer;
+            five: Five;
+            loadWork: (works: Work | Work[], state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, options?: number | FiveLoadOptions, userAction?: boolean) => Promise<void>;
+        } | null>>;
+        context: any;
+        setState<K extends "renderer">(state: {
+            renderer?: THREE.WebGPURenderer;
+        } | ((prevState: Readonly<{
+            renderer?: THREE.WebGPURenderer;
+        }>, props: Readonly<FiveProviderPropTypes>) => {
+            renderer?: THREE.WebGPURenderer;
+        } | Pick<{
+            renderer?: THREE.WebGPURenderer;
+        }, K> | null) | Pick<{
+            renderer?: THREE.WebGPURenderer;
+        }, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<FiveProviderPropTypes> & Readonly<{
+            children?: React.ReactNode | undefined;
+        }>;
+        state: Readonly<{
+            renderer?: THREE.WebGPURenderer;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<FiveProviderPropTypes>, prevState: Readonly<{
+            renderer?: THREE.WebGPURenderer;
+        }>): any;
+        componentDidUpdate?(prevProps: Readonly<FiveProviderPropTypes>, prevState: Readonly<{
+            renderer?: THREE.WebGPURenderer;
+        }>, 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.WebGPURenderer;
+        }>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<FiveProviderPropTypes>, nextState: Readonly<{
+            renderer?: THREE.WebGPURenderer;
+        }>, 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> | null>>;
+            context: any;
+            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{
+                initialValue: T;
+                onValuesChange?: (value: T, prevValue: T) => void;
+                children: React.ReactNode;
+            }>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): 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/fiveApp.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Five, FiveInitArgs } from "@realsee/five";
+type LoadArgs = Parameters<Five["load"]>;
+interface FiveAppProps {
+    fiveInitArgs?: FiveInitArgs;
+    load?: (five: Five) => Promise<LoadArgs>;
+    plugins?: FiveInitArgs["plugins"];
+    renderChildren?: boolean;
+    fullscreen?: boolean;
+    /** 是否自动挂载 FiveAutoCanvas，默认 true */
+    autoCanvas?: boolean;
+    /** 加载中显示的 fallback，类似 Suspense 的 fallback */
+    fallback?: React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * Five 应用组件
+ * @description 组合了 Provider + AutoCanvas + 数据加载流程的一体化组件。
+ */
+declare const FiveApp: React.FC<FiveAppProps>;
+export { FiveApp };
+export type { FiveAppProps };

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/webgpu";
+/**
+ * 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/webgpu";
+/**
+ * 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 };

package/react/hooks/useFiveFloor.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Five React Hooks: Five 楼层
+ * @returns
+ * [ shownFloor: Five 当前显示的楼层， null 为都显示, showFloor: 设置显示楼层，不传参数为都显示 ]
+ * @example
+ * ```
+ * const [ shownFloor, showFloor ] = useFiveFloor;
+ * ```
+ */
+declare function useFiveFloor(): [
+    shownFloor: number | null,
+    totalFloorLength: number,
+    showFloor: (floorIndex?: number) => void
+];
+export { useFiveFloor };

package/react/hooks/useFiveHelper.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Five React Hooks: Five 帮助元素的隐藏/显示
+ * @returns
+ * [ helperVisible: Five 帮助元素是否显示显示, toggleHelperVisible: 设置 帮助元素的隐藏/显示 ]
+ * @example
+ * ```
+ * const [ helperVisible, toggleHelperVisible ] = useFiveHelper;
+ * ```
+ */
+declare function useFiveHelper(): [
+    helperVisible: boolean,
+    toggleHelperVisible: (visible: boolean) => void
+];
+export { useFiveHelper };

package/react/hooks/useFiveModelBounding.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Five React Hooks: 获取当前模型的包围盒
+ */
+declare function useFiveModelBounding(): import("three").Box3;
+export { useFiveModelBounding };

package/react/hooks/useFiveModelEffect.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Model } from "@realsee/five";
+/**
+ * Five React Hooks: 操作 Five 的 Model
+ * @param callback - 获取 Five 的 Model 的回调函数
+ * @example
+ * ```
+ * useFiveModelEffect(model => {
+ *  return () => {}; // 析构函数
+ * });
+ * ```
+ */
+declare function useFiveModelEffect(callback: (model: Model) => void | (() => void), deps?: React.DependencyList | undefined): void;
+export { useFiveModelEffect };

package/react/hooks/useFiveModelIntersectRaycaster.d.ts

@@ -0,0 +1,22 @@
+import * as THREE from "three/webgpu";
+import { Intersection } from "@realsee/five";
+/**
+ * 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);
+ * ```
+ */
+declare function useFiveModelIntersectRaycaster(): (raycaster: THREE.Raycaster) => Intersection[];
+export { useFiveModelIntersectRaycaster };

package/react/hooks/useFiveModelReadyState.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Five React Hooks: 获取当前模型加载状态
+ * @returns
+ * "Loaded": 加载完成
+ * "Empty" 加载未完成
+ */
+declare function useFiveModelReadyState(): "Empty" | "Loaded";
+export { useFiveModelReadyState };

package/react/hooks/useFivePlugin.d.ts

@@ -0,0 +1,22 @@
+import { Five } from "@realsee/five";
+/**
+ * 获取插件实例（非 hook，可在任意位置调用）
+ */
+export declare function getPlugin<T = any>(workCode: string, pluginName: string): T | undefined;
+/**
+ * 手动设置插件实例到缓存（非 hook，可在任意位置调用）
+ */
+export declare function setPlugin(workCode: string, pluginName: string, plugin: any): void;
+export interface UseFivePluginOptions<T> {
+    /** 缓存未命中时自动创建插件实例 */
+    createPlugin?: (five: Five) => T;
+    /** Five 实例变化时是否重新创建（而非同步引用），默认 false */
+    reCreateOnFiveChange?: boolean;
+}
+export interface UseFivePluginOptionsWithCreate<T> extends UseFivePluginOptions<T> {
+    createPlugin: (five: Five) => T;
+}
+/** 传了 createPlugin 时保证返回 T */
+export declare function useFivePlugin<T>(pluginName: string, options: UseFivePluginOptionsWithCreate<T>): T;
+/** 未传 createPlugin 时返回 T | undefined */
+export declare function useFivePlugin<T = any>(pluginName: string, options?: UseFivePluginOptions<T>): T | undefined;

package/react/hooks/useFiveProject2d.d.ts

@@ -0,0 +1,21 @@
+import * as THREE from "three/webgpu";
+/**
+ * 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));
+ * ```
+ */
+declare function useFiveProject2d(): (vector: THREE.Vector3, testModel: boolean) => THREE.Vector2 | null;
+export { useFiveProject2d };

package/react/hooks/useFiveSceneEffect.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Scene } from "@realsee/five";
+/**
+ * Five React Hooks: 操作 Five 的 Scene
+ * @param callback - 获取 Five 的 Scene 的回调函数
+ * @example
+ * ```
+ * useFiveSceneEffect(scene => {
+ *  // object is a THREE.Object3D
+ *  scene.add(object);
+ *  return () => scene.remove(object); // 析构函数
+ * });
+ * ```
+ */
+declare function useFiveSceneEffect(callback: (scene: Scene) => void | (() => void), deps?: React.DependencyList | undefined): void;
+/**
+ * @deprecated
+ * 请使用 `useFiveSceneEffect` 替代
+ */
+declare const useFiveScene: typeof useFiveSceneEffect;
+export { useFiveSceneEffect, useFiveScene };

package/react/hooks/useFiveState.d.ts

@@ -0,0 +1,6 @@
+import { State } from "@realsee/five";
+declare function useFiveState(): [
+    state: State,
+    setState: (state: Partial<State> | ((prevState: State) => Partial<State>), immediately?: boolean, userAction?: boolean) => void
+];
+export { useFiveState };