Class Five

constructor

• new Five(initArgs?): Five

• Parameters

  • initArgs: FiveInitArgs = {}

  Returns Five

backgroundAlpha

backgroundColor

camera

currentMode

enableLayeringRendering

ident

imageOptions

modelScene

modelSceneNeedsRender

needsRender

onlyRenderIfNeeds

pano

paused

plugins

poweredByRealsee

Optionalrenderer

scene

state

five 设置了以下状态

- mode: Mode
- panoIndex: number
- longitude: number
- latitude: number
- fov: number
- offset: THREE.Vector3

可以通过 five.state 和 five.setState 来获取和设置。
通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
来迎合一些通过数据驱动的场景。
Copy

textureOptions

videoTexture

viewport

viewport: { left: 0.75, bottom: 0, width: 0.25, height: 1 }
Copy

xrCustomObjectsScene

StaticMode

Panorama 全景图游走模式
Model 模型游走模式
Floorplan 模型查看模式
Topview 户型图模式
VRPanorama VR眼镜模式
XRPanorama VR硬件模式
Copy

enableEDL

• get enableEDL(): boolean

• Returns boolean

  Deprecated

  use five.effect instead

• set enableEDL(enable): void

• Parameters

  • enable: boolean

  Returns void

enableHQ

• get enableHQ(): boolean

• Returns boolean

  Deprecated

  use five.effect instead

• set enableHQ(enable): void

• Parameters

  • enable: boolean

  Returns void

enableIOSEDR

• get enableIOSEDR(): boolean

• Returns boolean

  Deprecated

  use five.effect instead

• set enableIOSEDR(enable): void

• Parameters

  • enable: boolean

  Returns void

enablePostProcessing

• get enablePostProcessing(): boolean

• Returns boolean

  Deprecated

  use five.effect instead

• set enablePostProcessing(enable): void

• Parameters

  • enable: boolean

  Returns void

helperVisible

• get helperVisible(): boolean

• 帮助元素显示/隐藏

  Returns boolean
• set helperVisible(visible): void

• Parameters

  • visible: boolean

  Returns void

internalLightsEnabled

• get internalLightsEnabled(): boolean

• Returns boolean

• set internalLightsEnabled(value): void

• Parameters

  • value: boolean

  Returns void

model

• get model(): Model

• Returns Model

models

• get models(): Models

• Returns Models

observers

• get observers(): WorkResolvedObserver[]

• 获取观测点

  Returns WorkResolvedObserver[]

panoIndex

• get panoIndex(): number

• Returns number

renderEffect

• get renderEffect():
      | "default"
      | "edl"
      | "hq"
      | "luminance"

• Returns
      | "default"
      | "edl"
      | "hq"
      | "luminance"

• set renderEffect(value): void

• Parameters

  • value:
        | "default"
        | "edl"
        | "hq"
        | "luminance"

  Returns void

scissor

• get scissor(): Viewport

• Returns Viewport

  Deprecated

  use Viewport instead.

work

• get work(): Work

• Returns Work

works

• get works(): Works

• 当前加载的 work 数据

  Returns Works

StaticdracoPath

• get dracoPath(): string

• Returns string

• set dracoPath(path): void

• Parameters

  • path: string

  Returns void

Staticktx2Path

• get ktx2Path(): string

• Returns string

• set ktx2Path(path): void

• Parameters

  • path: string

  Returns void

Staticversion

• get version(): string

• Returns string

addExtraElement

• addExtraElement(element): (() => void)

• 绑定一个额外 DOM 区域，接受触控/鼠标事件

  Parameters

  • element: HTMLElement

  Returns (() => void)

  解除该绑定

  • • (): void

    • Returns void

appendTo

• appendTo(element, size?): void

• 将显示区域加载到页面 DOM 中

  Parameters

  • element: HTMLElement

    加载到页面的 DOM 元素
  • size: {
        height?: number;
        width?: number;
    } = {}

    显示区域尺寸 默认铺满这个 DOM 元素

    • Optionalheight?: number

    • Optionalwidth?: number

  Returns void

  Description

  如果你是传入的 renderer. 则你需要自行来方式显示区域该方法并不生效

changeMode

• changeMode<T>(mode, state?, options?, userAction?, force?): Promise<void>

• 切换模态

  Type Parameters

  • T extends Mode

  Parameters

  • mode: T

    切换到的模态
  • state: Partial<Omit<State, "mode">> = {}

    切换完成时的姿态
  • Optionaloptions: number | {
        duration?: number;
        effect?: MovePanoEffect;
    }

    模态切换动画用时
  • userAction: boolean = true

    是否时用户动作触发 默认 true
  • force: boolean = false

    必须重新初始化 controller

  Returns Promise<void>

dispose

• dispose(): void

• 析构 five 对象。

  Returns void

  Description

  一旦调用了析构方法，则不能再使用当前 five 对象了。 你可以新建一个新的。

exitFullscreen

• exitFullscreen(): void

• 退出全屏

  Returns void

getCameraLocal

• getCameraLocal(): {
      lookAtVector: Vector3;
      phi: number;
      theta: number;
  }

• 获取当前相机的姿态（用于内部的 python 脚本截图）

  Returns {
      lookAtVector: Vector3;
      phi: number;
      theta: number;
  }

  • lookAtVector: Vector3

  • phi: number

  • theta: number

  Deprecated

  这是用于内部的 python 脚本截图

getCurrentState

• getCurrentState(): State

• Returns State

getDrawingBufferSize

• getDrawingBufferSize(target): Vector2

• Parameters

  • target: Vector2

  Returns Vector2

getElement

• getElement(): HTMLCanvasElement

• 获取显示用的画布（Canvas DOM节点）

  Returns HTMLCanvasElement

getLongitudeAndLatitude

• getLongitudeAndLatitude(): Pick<Pose, "longitude" | "latitude">

• 获取当前相机经纬度

  Returns Pick<Pose, "longitude" | "latitude">

  Deprecated

  请使用使用 getPose

getOffset

• getOffset(): Vector3

• 获取当前相机位置

  Returns Vector3

  Deprecated

  请使用使用 getPose

getPixels

• getPixels<T>(x, y, width, height, pixelRatio?, flipY?, buffer?): T

• 获取画面中的像素颜色

  Type Parameters

  • T extends Uint8Array | Uint8ClampedArray = Uint8Array

  Parameters

  • x: number

    获取像素区域的起始坐标 x
  • y: number

    获取像素区域的起始坐标 y
  • width: number

    获取像素区域的宽度
  • height: number

    获取像素区域的高度
  • OptionalpixelRatio: number

    获取区域的像素比
  • OptionalflipY: boolean

    是否Y轴翻转
  • Optionalbuffer: T

    存储数组

  Returns T

  rgba颜色平铺的 Uint8Array
• getPixels<T>(options): T

• 获取画面中的像素颜色

  Type Parameters

  • T extends Uint8Array | Uint8ClampedArray = Uint8Array

  Parameters

  • options: {
        buffer?: T;
        flipY?: boolean;
        height: number;
        helperVisible?: boolean;
        pixelRatio?: number;
        skipPanorama?: boolean;
        width: number;
        x: number;
        y: number;
    }

    参数

    • Optionalbuffer?: T

      存储数组

    • OptionalflipY?: boolean

      是否Y轴翻转

    • height: number

      获取像素区域的高度

    • OptionalhelperVisible?: boolean

    • OptionalpixelRatio?: number

      获取区域的像素比

    • OptionalskipPanorama?: boolean

    • width: number

      获取像素区域的宽度

    • x: number

      获取像素区域的起始坐标 x

    • y: number

      获取像素区域的起始坐标 y

  Returns T

getPose

• getPose(): Pose

• Returns Pose

  Deprecated

  获取当前相机姿态, 可以使用 getCurrentState 代替

getSize

• getSize(target): Vector2

• Parameters

  • target: Vector2

  Returns Vector2

load

• load(inputWork, state?, options?, userAction?): Promise<void>

• 加载 Work 数据

  Parameters

  • inputWork:
        | string
        | string[]
        | LooseWork
        | Work
        | Work[]
        | LooseWork[]
        | LooseWorkWithExtrinsics[]
        | Promise<
            | LooseWork
            | Work
            | Work[]
            | LooseWork[]
            | LooseWorkWithExtrinsics[]>

    Work 数据
  • Optionalstate: "initial" | Partial<State> | "inherit"

    初始化姿态

    • "inherit" 使用当前姿态
    • "initial" 使用 Work 数据中的 initial 姿态
    • State 自定义姿态
  • Optionaloptions: number | FiveLoadOptions

    切换时间, 切换效果
  • userAction: boolean = true

  Returns Promise<void>

moveToPano

• moveToPano(pano, options?, userAction?): Promise<void>

• 转化到 Panorama 模态，并移动到对应序号的观察点。

  Parameters

  • pano: number | Pano | `${string}[${number}]`

    观察点序号
  • options: MovePanoOptions = {}

    移动点位参数
  • userAction: boolean = true

    是否用户触犯

  Returns Promise<void>

pause

• pause(): void

• 暂停自动播放

  Returns void

play

• play(): void

• Returns void

preloadPano

• preloadPano(pano, callback?): Promise<number>

• 预加载点位图片资源

  Parameters

  • pano: number | Pano | `${string}[${number}]`

    观察点序号
  • callback: ((costs: number) => void) = noop

    加载完成回调, 并传递加载用时。

    • • (costs): void

      • Parameters

        • costs: number

        Returns void

  Returns Promise<number>

  加载完成的 Promise 参数同 callback

project2d

• project2d(vector, testModel?): Vector2

• 计算三维坐标对应到屏幕的二维坐标

  Parameters

  • vector: Vector3

    三维坐标
  • testModel: boolean = false

    是否计算模型遮挡

  Returns Vector2

  二维坐标 或者 null

  Description

  如果三维坐标不在屏幕中，则返回 null

ready

• ready(args?): Promise<void>

• 当前页面静态

  Parameters

  • args: {
        tile?: boolean;
    } = {}

    • Optionaltile?: boolean

  Returns Promise<void>

refresh

• refresh(size?, pixelRatio?): void

• 设置显示区域尺寸

  Parameters

  • size: {
        height?: number;
        width?: number;
    } = {}

    显示区域尺寸 默认铺满这个 DOM 元素

    • Optionalheight?: number

    • Optionalwidth?: number

  • OptionalpixelRatio: number

    像素比 默认继承之前的设置

  Returns void

  Description

  如果你是传入的 renderer. 则你需要自行来设置显示区域尺寸，该方法并不生效

removeExtraElement

• removeExtraElement(element): void

• 解除绑定的一个额外 DOM 区域

  Parameters

  • element: HTMLElement

  Returns void

render

• render(callback?): void

• 强制渲染

  Parameters

  • Optionalcallback: (() => void)

    渲染完成回调

    • • (): void

      • Returns void

  Returns void

  Description

  调用 five.render() 和设置 five.needsRender = true 均可在按需渲染时，使得画面渲染一次 区别在于：

  • five.needsRender = true 为在下帧渲染画面
  • five.render() 在当前帧渲染画面 推荐使用 five.needsRender = true, 可以更加流畅。但是如果需要截图等同步操作，可以使用 five.render()

requestFullscreen

• requestFullscreen(): void

• 请求全屏

  Returns void

reset

• reset(): Promise<void>

• Returns Promise<void>

reset_

• reset_(): Promise<void>

• Returns Promise<void>

setScissor

• setScissor(scissor): void

• Parameters

  • scissor: Viewport

  Returns void

  Deprecated

  use setViewport instead.

setState

• setState(state, immediately?, userAction?): void

• 设置 State

  Parameters

  • state: Partial<State>

    目标状态
  • immediately: boolean = false

    是否马上转换，马上转换会尽快达到目标状态，尽量减少中间状态，更少动画。
  • userAction: boolean = true

    是否是用户触发的动作

  Returns void

  Description

  five 设置了以下状态
  
  - mode: Mode
  - panoIndex: number
  - longitude: number
  - latitude: number
  - fov: number
  - offset: THREE.Vector3
  
  可以通过 five.state 和 five.setState 来获取和设置。
  通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
  来迎合一些通过数据驱动的场景。
  Copy

setViewport

• setViewport(viewport): void

• 设置 viewport

  Parameters

  • viewport: Viewport

    指定区域 scissor 是将屏幕中的内容渲染到 renderer 的指定区域。 请确保在 five 初始化时传入 renderer 对象 页面整体长宽均为 1。通过类似 css 的 left bottom width height 来确定区域。

  Returns void

  Example

  five.setViewport({ left: 0.75, bottom: 0, width: 0.25, height: 1 })
  Copy

updateCamera

• updateCamera(pose, duration, userAction?): Promise<void>

• 移动相机。（不触发点位移动）

  Parameters

  • pose: Partial<Pose>

    相机目标位置
  • duration: number

    动画触发的时常
  • userAction: boolean = true

    是否用户触发

  Returns Promise<void>

  Promise 是否移动成功

  Description

  如果动画中途被打断（用户触发行为，或者调用 setState, load, changeMode）的等 会 Promise.reject。运动完成则 Promise.resolve

updateCameraWithKeyframes

• updateCameraWithKeyframes(keyframes, duration, userAction?): Promise<void>

• 通过帧动画移动相机。（不触发点位移动）

  Parameters

  • keyframes: {
        key?: string;
        progress: number;
        value: Pose;
    }[]

    动画帧
  • duration: number

    动画触发的时常
  • userAction: boolean = true

    是否用户触发

  Returns Promise<void>

  Promise 是否移动成功

  Description

  如果动画中途被打断（用户触发行为，或者调用 setState, load, changeMode）的等 会 Promise.reject。运动完成则 Promise.resolve

updateConfiguration

• updateConfiguration(args, refresh?): void

• Parameters

  • args: Pick<FiveInitArgs,
        | "model"
        | "panorama"
        | "textureOptions"
        | "imageOptions"
        | "floorplan"
        | "topview"
        | "mapview"
        | "vrPanorama">
  • refresh: boolean = true

  Returns void

updateTime

• updateTime(time, deltaTime, ...args): void

• Parameters

  • time: number
  • deltaTime: number
  • Rest...args: any[]

  Returns void