Options
All
  • Public
  • Public/Protected
  • All
Menu

Index

Type Aliases

FiveModelIntersectRaycaster: ((raycaster: Ref<THREE.Raycaster> | THREE.Raycaster) => Ref<Intersection[]>)

Type declaration

    • (raycaster: Ref<THREE.Raycaster> | THREE.Raycaster): Ref<Intersection[]>
    • Parameters

      • raycaster: Ref<THREE.Raycaster> | THREE.Raycaster

      Returns Ref<Intersection[]>

FiveProviderComponent: DefineComponent<{ fiveInitArgs: { type: PropType<Omit<FiveInitArgs, "renderer" | "scissor">>; default: any }; initialState: PropType<"inherit" | "initial" | Partial<Omit<State, "offset">>>; initialUserAction: BooleanConstructor; initialWork: PropType<Work | Promise<Work>>; onCurrentStateChange: PropType<((state: State, userAction: boolean) => void)>; onError: PropType<((error: Error) => void)>; onStateChange: PropType<((state: State, userAction: boolean) => void)>; onWorkChange: PropType<((work: Work) => void)>; style: ObjectConstructor; work: PropType<Work> }, { five: Readonly<Five> }>
Project2d: ((vector3: THREE.Vector3 | Ref<THREE.Vector3>, testModel: boolean) => Ref<THREE.Vector2 | null>)

Type declaration

    • (vector3: THREE.Vector3 | Ref<THREE.Vector3>, testModel: boolean): Ref<THREE.Vector2 | null>
    • Parameters

      • vector3: THREE.Vector3 | Ref<THREE.Vector3>
      • testModel: boolean

      Returns Ref<THREE.Vector2 | null>

Variables

FiveCanvas: DefineComponent<{ height: { required: true; type: PropType<number> }; width: { required: true; type: PropType<number> } }, (() => VNode<RendererNode, RendererElement, {}>), unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<{ height: { required: true; type: PropType<number> }; width: { required: true; type: PropType<number> } }>>, {}> = ...

Five 渲染区域组件

description

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

param width

渲染区域的宽度

param height

渲染区域的高度

returns

Vue 元素

example
<FiveProvider :initialWork="work">
<FiveCanvas width="512" height="512"/>
</FiveProvider>
FiveProvider: FiveProviderComponent = ...

Five 实例化Five 组件

在 FiveProvider 下,可以使用 FiveCanvas 来创建渲染画布。 以及使用 useFiveState useFiveEventCallback等 Five Vue Composition API 来对 FiveProvider 进行操作

description

Five 创建Five实例的组件

param FiveProviderComponent

Five 参数

example
<FiveProvider :initialWork="work">
<FiveCanvas width="512" height="512"/>
</FiveProvider>

Functions

  • unsafe__useFiveInject(): Five
  • Five Vue Hooks: 获取 five 实例

    description

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

    deprecated

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

    Returns Five

    five 实例

  • Five Vue 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 FiveActionVueCallbacks

  • useFiveCameraDirection(): Ref<THREE.Vector3>
  • Five Vue Hooks: 得到当前相机的方向(单位向量)

    Returns Ref<THREE.Vector3>

    当前相机方向的单位向量

  • useFiveCameraRaycaster(): Ref<THREE.Raycaster>
  • Five Vue Hooks: 得到当前相机的方向(射线对象)

    Returns Ref<THREE.Raycaster>

    当前相机方向的射线对象

  • Five Vue Hooks: Five 的当前观测点

    example
    const observer = useFiveCurrentObserver();
    

    Returns Ref<WorkObserver | null>

    当前观测点, 如果 work 未加载则为 null

  • useFiveCurrentState(): [currentState: Ref<State>, setState: ((state: Partial<State> | ((prevState: State) => Partial<State>), immediately?: boolean, userAction?: boolean) => void)]
  • Five Vue Hooks: Five 的实时状态

    example
    const [ currentState, setState ] = useFiveCurrentState;
    

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

    [ currentState: Five 的实时状态, setState: 设置 Five 的状态 ]

  • useFiveEventCallback<T>(name: T, callback: EventCallback[T]): void
  • Five Vue Hooks: Five 事件监听 具体事件列表 请查看 Five.EventCallback

    example
    useFiveEventCallback("cameraUpdate", pose => {});
    

    Type Parameters

    Parameters

    Returns void

  • useFiveFloor(): [shownFloor: Ref<number | null>, totalFloorLength: Ref<number>, showFloor: ((floorIndex?: number) => void)]
  • Five Vue Hooks: Five 楼层

    example
    const [ shownFloor, showFloor ] = useFiveHelper;
    

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

    [ shownFloor: Five 当前显示的楼层, null 为都显示, showFloor: 设置显示楼层,不传参数为都显示 ]

  • useFiveHelper(): [helperVisible: Ref<boolean>, toggleHelperVisible: ((visible: boolean) => void)]
  • Five Vue Hooks: Five 帮助元素的隐藏/显示

    example
    const [ helperVisible, toggleHelperVisible ] = useFiveHelper;
    

    Returns [helperVisible: Ref<boolean>, toggleHelperVisible: ((visible: boolean) => void)]

    [ helperVisible: Five 帮助元素是否显示, toggleHelperVisible: 设置 帮助元素的隐藏/显示 ]

  • useFiveModel(): Ref<Model>
  • Five Vue Hooks: 获取当前模型

    Returns Ref<Model>

  • useFiveModelBounding(): Ref<THREE.Box3>
  • Five Vue Hooks: 获取当前模型的包围盒

    Returns Ref<THREE.Box3>

  • Five Vue 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 FiveModelIntersectRaycaster

  • useFiveModelReadyState(): Ref<"Loaded" | "Empty">
  • Five Vue Hooks: 获取当前模型加载状态

    Returns Ref<"Loaded" | "Empty">

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

  • Five Vue Hooks: 将三维的坐标对应到二维屏幕

    function

    project2d

    计算模型射线碰撞检测
    // param vector 三维的坐标
    // param testModel 是否和模型检测,如果检测,则被模型遮挡会返回 null
    // returns 三维的坐标 或者 null
    project2d(vector: THREE.Vector3 | Ref<THREE.Vector3>, testModel: boolean)
    v2: Ref<THREE.Vector2 | null>
    example
    const project2d  = useFiveProject2d();
    project2d(new THREE.Vector3(0, 0, 0));

    Returns Project2d

  • Five Vue Hooks: 获取scene

    Returns Scene

  • useFiveState(): [curState: Ref<State>, setState: ((state: Partial<State> | ((prevState: State) => Partial<State>), immediately?: boolean, userAction?: boolean) => void)]
  • Five Vue Hooks: Five 的目标状态

    example
    const [ state, setState ] = useFiveState;
    

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

    [ currentState: Five 的目标状态, setState: 设置 Five 的状态 ]

  • useFiveWork(): [work: DeepReadonly<Ref<Work | undefined>>, loadWork: ((work: Work, state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, duration?: number, userAction?: boolean) => Promise<void>)]
  • Five Vue 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: DeepReadonly<Ref<Work | undefined>>, loadWork: ((work: Work, state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, duration?: number, userAction?: boolean) => Promise<void>)]

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