react | 如视 Five SDK - v5.0.0-alpha.155

Type Aliases

FiveInjectionActionFeature

FiveInjectionDataFeature

FiveInjectionFeature

FiveInjectionFeature: FiveInjectionDataFeature | FiveInjectionActionFeature

FiveProviderPropTypes

FiveProviderPropTypes: { children: React.ReactNode; initialState?: "inherit" | "initial" | Partial<Omit<State, "offset">>; initialUserAction?: boolean; initialWork?: Work | Promise<Work>; work?: Work; onCurrentStateChange?: any; onError?: any; onStateChange?: any; onWorkChange?: any }

Type declaration

children: React.ReactNode
Optional initialState?: "inherit" | "initial" | Partial<Omit<State, "offset">>
Optional initialUserAction?: boolean
Optional initialWork?: Work | Promise<Work>
Optional work?: Work
onCurrentStateChange?:function
- onCurrentStateChange(state: State, userAction: boolean): void
- - Defined in lib/react/createProvider.ts:13
  Parameters
  - state: State
  - userAction: boolean
  Returns void
onError?:function
- onError(error: Error): void
- - Defined in lib/react/createProvider.ts:14
  Parameters
  - error: Error
  Returns void
onStateChange?:function
- onStateChange(state: State, userAction: boolean): void
- - Defined in lib/react/createProvider.ts:12
  Parameters
  - state: State
  - userAction: boolean
  Returns void
onWorkChange?:function
- onWorkChange(work: Work): void
- - Defined in lib/react/createProvider.ts:11
  Parameters
  - work: Work
  Returns void

FiveProviderType

FiveProviderType: ReturnType<typeof createFiveProvider>

StoreActionMapHanlder

StoreActionMapHanlder<T, K, M>: { [ Key in keyof M]: [callback: ((getValues: (() => Pick<T, K>), setValues: ((values: Pick<T, K>) => void), ...args: Parameters<M[Key]>) => ReturnType<M[Key]>), deps: K[]] }

Type Parameters

T extends StoreValueMapType
K extends keyof T
M extends StoreActionMapType

StoreActionMapType

StoreActionMapType: {}

Type declaration

[name: string]: ((...args: any[]) => any)
- - (...args: any[]): any
  - Parameters
    - Rest ...args: any[]
    Returns any

StoreProviderType

StoreProviderType: ReturnType<typeof createStore>["StoreProvider"]

StoreValueMapType

StoreValueMapType: Record<string, any>

Variables

Const FiveCanvas

FiveCanvas: React.FC<{ height: number; width: number }> = ...

Five 渲染区域组件

description

Five 渲染区域组件，请在 FiveProvider 内使用

param width

渲染区域的宽度

param height

渲染区域的高度

returns

React 元素

example

<FiveProvider initialWork={work}>
 <FiveCanvas width={512} height={512}/>
</FiveProvider>

Const INJECTION_PROPNAME

INJECTION_PROPNAME: "$five" = "$five"

Functions

createFiveFeature

createFiveFeature<T>(...features: T[]): T[]

- Defined in lib/react/withFive.ts:671
Type Parameters
- T extends FiveInjectionFeature
Parameters
- Rest ...features: T[]
Returns T[]

createFiveProvider

createFiveProvider(fiveInitArgs?: Omit<FiveInitArgs, "renderer" | "scissor">): typeof FiveProvider

- Defined in lib/react/createProvider.ts:36
创建一个 FiveProvider 在 React 的体系下，使用 Provider 的方式来组织组件结构。在 FiveProvider 下，可以使用 FiveCanvas 来创建渲染画布。以及使用 useFiveState useFiveEvent等 Five React Hooks API 来对 FiveProvider 进行操作
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"));
```
Parameters
- fiveInitArgs: Omit<FiveInitArgs, "renderer" | "scissor"> = {}
  
  Five 初始化参数
Returns typeof FiveProvider
FiveProvider React 组件

createStore

createStore<T, A>(actionHandler: StoreActionMapHanlder<T, keyof T, A>): { StoreProvider: typeof StoreProvider; useStore: any; useStoreAction: any; useStoreSetter: any; watchStore: any }

- Defined in lib/react/createStore.ts:143
Type Parameters
- T extends StoreValueMapType
- A extends StoreActionMapType = {}
Parameters
- actionHandler: StoreActionMapHanlder<T, keyof T, A>
Returns { StoreProvider: typeof StoreProvider; useStore: any; useStoreAction: any; useStoreSetter: any; watchStore: any }
- StoreProvider: typeof StoreProvider
  
  Store Provider. 内部组件均可和 store 交互
- useStore:function
  - useStore<K>(names: K[]): [values: Pick<T, K>, setValues: ((values: Pick<T, K>) => void)]
  - - Defined in lib/react/createStore.ts:161
    使用 Store
    
    Type Parameters
    - K extends string | number | symbol
    Parameters
    - names: K[]
      
      获取的 Store 字段
    Returns [values: Pick<T, K>, setValues: ((values: Pick<T, K>) => void)]
- useStoreAction:function
  - useStoreAction<N, F>(actionName: N): F
  - - Defined in lib/react/createStore.ts:221
    Type Parameters
    - N extends string | number | symbol
    - F extends ((...args: any[]) => any)
    Parameters
    - actionName: N
    Returns F
- useStoreSetter:function
  - useStoreSetter<K>(names: K[]): ((values: Pick<T, K>) => void)
  - - Defined in lib/react/createStore.ts:190
    使用 Store (仅设置值)
    
    Type Parameters
    - K extends string | number | symbol
    Parameters
    - names: K[]
      
      获取的 Store 字段
    Returns ((values: Pick<T, K>) => void)
    修改值方法
    - - (values: Pick<T, K>): void
      - 使用 Store (仅设置值)
        
        Parameters
        values: Pick<T, K>
        Returns void
        修改值方法
- watchStore:function
  - watchStore<K>(names: K[], callback: ((values: Pick<T, K>, prevValues: Pick<T, K>) => void), deps?: DependencyList): void
  - - Defined in lib/react/createStore.ts:205
    监听 Store 变化
    
    Type Parameters
    - K extends string | number | symbol
    Parameters
    - names: K[]
      
      Store 字段
    - callback: ((values: Pick<T, K>, prevValues: Pick<T, K>) => void)
      
      监听变化的回调函数
      - (values: Pick<T, K>, prevValues: Pick<T, K>): void
        Parameters
        values: Pick<T, K>
        prevValues: Pick<T, K>
        Returns void
    - Optional deps: DependencyList
      
      依赖对象
    Returns void

unsafe__useFiveInstance

unsafe__useFiveInstance(): Five

- Defined in lib/react/hooks/unsafe__useFiveInstance.ts:10
Five React Hooks: 获取 five 实例

description
不到万不得已，并不推荐直接使用。

deprecated
不到万不得已，并不推荐直接使用。

Returns Five
five 实例

useFiveAction

useFiveAction(): FiveActionReactCallbacks

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();

Returns FiveActionReactCallbacks

useFiveCameraDirection

useFiveCameraDirection(): THREE.Vector3

- Defined in lib/react/hooks/useFiveCameraDirection.ts:14
Five React Hooks: 得到当前相机的方向（单位向量）

Returns THREE.Vector3
当前相机的方向的单位向量

useFiveCameraRaycaster

useFiveCameraRaycaster(): THREE.Raycaster

- Defined in lib/react/hooks/useFiveCameraRaycaster.ts:16
Five React Hooks: 得到当前相机的方向（射线对象）

Returns THREE.Raycaster
当前相机的方向的射线对象

useFiveCurrentObserver

useFiveCurrentObserver(): Work["observers"][number] | null

- Defined in lib/react/hooks/useFiveCurrentObserver.ts:13
Five React Hooks: Five 的当前观测点
example
```
const observer = useFiveCurrentObserver();
```
Returns Work["observers"][number] | null
Work.observers[number] 当前观测点, 如果 work 未加载则为 null

useFiveCurrentState

useFiveCurrentState(): [currentState: State, setState: ((state: Partial<State> | ((prevState: State) => Partial<State>), immediately?: boolean, userAction?: boolean) => void)]

- Defined in lib/react/hooks/useFiveCurrentState.ts:14
Five React Hooks: Five 的实时状态
example
```
const [ currentState, setState ] = useFiveCurrentState;
```
Returns [currentState: State, setState: ((state: Partial<State> | ((prevState: State) => Partial<State>), immediately?: boolean, userAction?: boolean) => void)]
[ currentState: Five 的实时状态, setState: 设置 Five 的状态 ]

useFiveEventCallback

useFiveEventCallback<T>(name: T, callback: EventCallback[T], deps?: DependencyList): void

- Defined in lib/react/hooks/useFiveEventCallback.ts:13
Five React Hooks: Five 事件监听具体事件列表请查看 Five.EventCallback
example
```
useFiveEvent("cameraUpdate", pose => {});
```
Type Parameters
- T extends keyof EventCallback
Parameters
- name: T
- callback: EventCallback[T]
- Optional deps: DependencyList
Returns void

useFiveFloor

useFiveFloor(): [shownFloor: number | null, totalFloorLength: number, showFloor: ((floorIndex?: number) => void)]

- Defined in lib/react/hooks/useFiveFloor.ts:15
Five React Hooks: Five 楼层
example
```
const [ shownFloor, showFloor ] = useFiveFloor;
```
Returns [shownFloor: number | null, totalFloorLength: number, showFloor: ((floorIndex?: number) => void)]
[ shownFloor: Five 当前显示的楼层， null 为都显示, showFloor: 设置显示楼层，不传参数为都显示 ]

useFiveHelper

useFiveHelper(): [helperVisible: boolean, toggleHelperVisible: ((visible: boolean) => void)]

- Defined in lib/react/hooks/useFiveHelper.ts:14
Five React Hooks: Five 帮助元素的隐藏/显示
example
```
const [ helperVisible, toggleHelperVisible ] = useFiveHelper;
```
Returns [helperVisible: boolean, toggleHelperVisible: ((visible: boolean) => void)]
[ helperVisible: Five 帮助元素是否显示显示, toggleHelperVisible: 设置帮助元素的隐藏/显示 ]

useFiveModelIntersectRaycaster

useFiveModelIntersectRaycaster(): ((raycaster: Raycaster) => Intersection[])

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);

Returns ((raycaster: Raycaster) => Intersection[])

- (raycaster: Raycaster): Intersection[]
- Parameters
  - raycaster: Raycaster
  Returns Intersection[]

useFiveModelReadyState

useFiveModelReadyState(): "Loaded" | "Empty"

- Defined in lib/react/hooks/useFiveModelReadyState.ts:15
Five React Hooks: 获取当前模型加载状态

Returns "Loaded" | "Empty"
"Loaded": 加载完成 "Empty" 加载未完成

useFiveProject2d

useFiveProject2d(): ((vector: Vector3, testModel: boolean) => Vector2)

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));

Returns ((vector: Vector3, testModel: boolean) => Vector2)

- (vector: Vector3, testModel: boolean): Vector2
- Parameters
  - vector: Vector3
  - testModel: boolean
  Returns Vector2

useFiveScene

useFiveScene(callback: ((scene: Scene) => void | (() => void)), deps?: DependencyList): void

- Defined in lib/react/hooks/useFiveSceneEffect.ts:30
deprecated
请使用 useFiveSceneEffect 替代

Parameters
- callback: ((scene: Scene) => void | (() => void))
  - - (scene: Scene): void | (() => void)
    - Parameters
      - scene: Scene
      Returns void | (() => void)
- Optional deps: DependencyList
Returns void

useFiveSceneEffect

useFiveSceneEffect(callback: ((scene: Scene) => void | (() => void)), deps?: DependencyList): void

- Defined in lib/react/hooks/useFiveSceneEffect.ts:17
Five React Hooks: 操作 Five 的 Scene
example
```
useFiveSceneEffect(scene => {
 // object is a THREE.Object3D
 scene.add(object);
 return () => scene.remove(object); // 析构函数
});
```
Parameters
- callback: ((scene: Scene) => void | (() => void))
  
  获取 Five 的 Scene 的回调函数
  - - (scene: Scene): void | (() => void)
    - Parameters
      - scene: Scene
      Returns void | (() => void)
- Optional deps: DependencyList
Returns void

useFiveState

useFiveState(): [state: State, setState: ((state: Partial<State> | ((prevState: State) => Partial<State>), immediately?: boolean, userAction?: boolean) => void)]

- Defined in lib/react/hooks/useFiveState.ts:19
Returns [state: State, setState: ((state: Partial<State> | ((prevState: State) => Partial<State>), immediately?: boolean, userAction?: boolean) => void)]

useFiveWork

useFiveWork(): [work: Work | undefined, loadWork: ((work: Work, state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, duration?: number, userAction?: boolean) => Promise<void>)]

Five React Hooks: 获取/设置当前的 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;

Returns [work: Work | undefined, loadWork: ((work: Work, state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, duration?: number, userAction?: boolean) => Promise<void>)]

[ work: 获取当前的 Work, loadWork: 设置 Work ]

withFive

withFive<F>(features: F): (<P, C>(Component: C & ComponentClass<P, any>) => ForwardRefExoticComponent<PropsWithoutRef<Omit<P, "$five">> & 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">>>)

- Defined in lib/react/withFive.ts:578
Type Parameters
- F extends FiveInjectionFeature[]
Parameters
- features: F
Returns (<P, C>(Component: C & ComponentClass<P, any>) => ForwardRefExoticComponent<PropsWithoutRef<Omit<P, "$five">> & 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">>>)
- - <P, C>(Component: C & ComponentClass<P, any>): ForwardRefExoticComponent<PropsWithoutRef<Omit<P, "$five">> & 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">>>
  - Type Parameters
    - P extends PropTypeOfFiveFeatures<F, P>
    - C extends ComponentClass<P, any, C>
    Parameters
    - Component: C & ComponentClass<P, any>
    Returns ForwardRefExoticComponent<PropsWithoutRef<Omit<P, "$five">> & 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">>>

Index

Classes

Interfaces

Type Aliases

Variables

Functions

Type Aliases

FiveInjectionActionFeature

FiveInjectionDataFeature

FiveInjectionFeature

FiveProviderPropTypes

Type declaration

children: React.ReactNode

Optional initialState?: "inherit" | "initial" | Partial<Omit<State, "offset">>

Optional initialUserAction?: boolean

Optional initialWork?: Work | Promise<Work>

Optional work?: Work

onCurrentStateChange?:function

Parameters

state: State

userAction: boolean

Returns void

onError?:function

Parameters

error: Error

Returns void

onStateChange?:function

Parameters

state: State

userAction: boolean

Returns void

onWorkChange?:function

Parameters

work: Work

Returns void

FiveProviderType

StoreActionMapHanlder

Type Parameters

T extends StoreValueMapType

K extends keyof T

M extends StoreActionMapType

StoreActionMapType

Type declaration

[name: string]: ((...args: any[]) => any)

Parameters

Rest ...args: any[]

Returns any

StoreProviderType

StoreValueMapType

Variables

Const FiveCanvas

Const INJECTION_PROPNAME

Functions

createFiveFeature

Type Parameters

T extends FiveInjectionFeature

Parameters

Rest ...features: T[]

Returns T[]

createFiveProvider

Parameters

fiveInitArgs: Omit<FiveInitArgs, "renderer" | "scissor"> = {}

Returns typeof FiveProvider

createStore

Type Parameters

T extends StoreValueMapType

A extends StoreActionMapType = {}

Parameters

actionHandler: StoreActionMapHanlder<T, keyof T, A>

Returns { StoreProvider: typeof StoreProvider; useStore: any; useStoreAction: any; useStoreSetter: any; watchStore: any }

StoreProvider: typeof StoreProvider

useStore:function

Type Parameters

K extends string | number | symbol

Parameters

names: K[]

Returns [values: Pick<T, K>, setValues: ((values: Pick<T, K>) => void)]

useStoreAction:function

Type Parameters

N extends string | number | symbol