@realsee/five
Version:
Realsee Renderer SDK
214 lines (213 loc) • 8.21 kB
TypeScript
import * as React from "react";
import * as THREE from "three";
import { Five, Model, State, WorkObserver, EventTypes, Subscribe } from "@realsee/five";
declare const INJECTION_PROPNAME = "$five";
type FiveInjectionDataFeature = "unsafe__fiveInstance" | "currentState" | "currentObserver" | "state" | "works" | "model" | "scene" | "cameraDirection" | "cameraRaycaster" | "modelReadyState" | "shownFloor" | "helperVisible";
type FiveInjectionActionFeature = "loadWork" | "setState" | "on" | "off" | "intersectRaycaster" | "project2d" | "updateCamera" | "getPixels" | "render" | "needsRender" | "preloadPano" | "showFloor" | "toggleHelperVisible";
type FiveInjectionFeature = FiveInjectionDataFeature | FiveInjectionActionFeature;
interface FiveInjectionTypes extends Subscribe<EventTypes> {
/**
* Five React Inject: 获取 five 实例
* @description 不到万不得已，并不推荐直接使用。
* @deprecated 不到万不得已，并不推荐直接使用。
*/
unsafe__fiveInstance: Five;
/**
* Five React Inject: Five 的目标状态
* @description
* ```text
* five 设置了以下状态
*
* - mode: Mode
* - panoId: string
* - 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
* - panoId: string
* - panoIndex: number
* - longitude: number
* - latitude: number
* - fov: number
* - offset: THREE.Vector3
*
* 可以通过 state, currentState 和 setState 来获取和设置。
* 通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
* 来迎合一些通过数据驱动的场景。
* ```
*/
currentState: State;
/**
* Five React Inject: Five currentState
*/
currentObserver: WorkObserver;
/**
* Five React Inject: Five cameraDirection
*/
cameraDirection: THREE.Vector3;
/**
* Five React Inject: Five cameraRaycaster
*/
cameraRaycaster: THREE.Raycaster;
/**
* Five React Inject: Five Work
*/
work: Five['work'];
/**
* Five React Inject: Five Work
*/
works: Five['works'];
/**
* Five React Inject: Five model
*/
model: Five['model'];
/**
* Five React Inject: Five models
*/
models: Five['models'];
/**
* Five React Inject: Five models
*/
scene: Five['scene'];
/**
* Five React Inject: Five modelReadyState
*/
modelReadyState: "Empty" | "Loaded" | undefined;
/**
* Five React Inject: Five shownFloor
*/
shownFloor: number | null | undefined;
/**
* Five React Inject: Five helperVisible
*/
helperVisible: boolean | undefined;
/**
* 设置 State
* @description
* ```text
* five 设置了以下状态
*
* - mode: Mode
* - panoId: string
* - 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 raycaster - THREE 射线对象
* @param floor - 和某一楼层做碰撞检测， 不传为和所有楼层做碰撞检测
* @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"];
/**
* 获取画面中的像素颜色
* @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 panoId - 观察点
* @param callback - 加载完成回调, 并传递加载用时。
* @returns 加载完成的 Promise 参数同 callback
*/
preloadPano: Five["preloadPano"];
/**
* 显示楼层
* @param floorIndex - 楼层，如果不传则都显示
*/
showFloor: (floorIndex?: number) => void;
/**
* 帮助元素的隐藏/显示
* @param visible - 隐藏/显示
*/
toggleHelperVisible: (visible: boolean) => void;
}
interface PropTypeOfFiveFeatures<F extends FiveInjectionFeature[]> {
[INJECTION_PROPNAME]: Pick<FiveInjectionTypes, F[number]>;
}
declare function withFive<F extends FiveInjectionFeature[]>(features: F): <P extends PropTypeOfFiveFeatures<F>, C extends React.ComponentClass<P>>(Component: C & React.ComponentClass<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<P, "$five">> & React.RefAttributes<Omit<InstanceType<C>, "render" | "context" | "state" | "setState" | "forceUpdate" | "componentDidMount" | "shouldComponentUpdate" | "componentWillUnmount" | "componentDidCatch" | "getSnapshotBeforeUpdate" | "componentDidUpdate" | "componentWillMount" | "UNSAFE_componentWillMount" | "componentWillReceiveProps" | "UNSAFE_componentWillReceiveProps" | "componentWillUpdate" | "UNSAFE_componentWillUpdate" | "props" | "refs">>>;
declare function createFiveFeature<T extends FiveInjectionFeature>(...features: T[]): T[];
export { createFiveFeature, withFive, INJECTION_PROPNAME, PropTypeOfFiveFeatures, FiveInjectionTypes, FiveInjectionFeature, FiveInjectionDataFeature, FiveInjectionActionFeature, };