@realsee/five/five/application/fiveInitArgs.d.ts

Realsee Renderer SDK

import * as THREE from "three";
import { ImageOptions, TextureOptions } from "../types/imageOptions";
import { Viewport } from "../types/viewport";
import { ControllerCustomInitTypes } from "./controllers";
import { FivePlugin, FivePluginInit } from "../types/plugin";
/** Five 初始化参数 */
interface FiveInitArgs {
    /**
     * 外部传入的 `THREE.WebGLRenderer`。
     * @description
     * 如果需要使用 `scissor` 分割画布功能，则必须使用外部传入 renderer，
     * 并且设置为 `preserveDrawingBuffer: false`。
     * 如果设置了 `renderer`, 则 `preserveDrawingBuffer`
     * `backgroundColor` `backgroundAlpha` `antialias`
     * 均不再生效。
     */
    renderer?: THREE.WebGLRenderer;
    /**
     * 内部 `THREE.WebGLRenderer` 是否通过像素拷贝的方式绘制。
     * @description
     * 当你想做屏幕截图等要确定取得屏幕像素时，请设置为 `true`。
     * 如果设置了参数 `renderer` 参数，则不生效，请对传入的 `renderer` 自行设置。
     * @default `false`
     */
    preserveDrawingBuffer?: boolean;
    /**
     * 输出画面的背景颜色。
     * @description
     * 通过数字类型传入。
     * 如果设置了参数 `renderer` 参数，则不生效，请对传入的 `renderer` 自行设置。
     * @default `0x181A1C`
     * @example
     * ```
     * backgroundColor: 0xffffff // 白色
     * backgroundColor: 0xff0000 // 红色
     * ```
     */
    backgroundColor?: number | THREE.Color;
    /**
     * 输出画面的背景透明度
     * @description
     * 通过数字类型传入。取值范围 [0-1]
     * 如果设置了参数 `renderer` 参数，则不生效，请对传入的 `renderer` 自行设置。
     * @default `1`
     */
    backgroundAlpha?: number;
    /**
     * 是否开启 `THREE.WebGLRenderer` 的抗锯齿功能
     * @description
     * 这个抗锯齿功能是 `WEBGL` 自带的抗锯齿，并不是类似 fxaa taa 等后处理方式，比较吃性能。
     * 如果设置了参数 `renderer` 参数，则不生效，请对传入的 `renderer` 自行设置。
     * @default `false`
     */
    antialias?: boolean;
    /**
     * 屏幕渲染区域
     * @description
     * 请确保设置了 `renderer` 参数，`viewport` 参数才可生效
     * `viewport` 是将屏幕中的内容渲染到 `renderer` 的指定区域。
     * 页面整体长宽均为 `1`。通过类似 css 的 `left` `bottom` `width` `height` 来确定区域。
     * @example
     * ```
     * viewport: { left: 0.75, bottom: 0, width: 0.25, height: 1 }
     * ```
     */
    viewport?: Viewport;
    /**
     * 是否自动播放。
     * @description
     * 播放即把内存中计算的内容渲染到画面上。play则是进行每帧播放。
     * 如果 `play: false` 则不自动播放。屏幕不显示。
     * 你还可以通过 `five.play()` `five.pause()` 的方式来控制播放。
     * @default `true`
     */
    play?: boolean;
    /**
     * 全景图的配置参数
     * @description
     * 可以动态对配置在 `work` 数据中的全景图片在 runtime 做 url 调整。
     * 平衡加载时间和图片质量
     */
    imageOptions?: ImageOptions;
    /**
     * 模型贴图的配置参数
     * @description
     * 可以动态对配置在 `work` 数据中的模型贴图在 runtime 做 url 调整。
     * 平衡加载时间和图片质量
     */
    textureOptions?: TextureOptions;
    /**
     * 是否按需渲染
     * @description
     * 按需渲染时，如果页面中的渲染有 `needsRender: true` 属性。或者 `five.needsRender: true` 时
     * 才会重新渲染屏幕，降低无用渲染产生的消耗。
     * @default `true`
     */
    onlyRenderIfNeeds?: boolean;
    /**
     * 最高 fps 限制
     * @description
     * 如果为 `false`, 则不限制。最好也就是屏幕刷新率，不会再高了。
     * @default `false`
     */
    maxFps?: number | false;
    /**
     * 外挂视频对象。
     * @description
     * 当点位中有视频元素，则会使用。如果不传入也会外部新建，
     * 加入传入的原因是，视频自动播放在不同浏览器或者 webview 中有不同的特性。
     * 给予更多外部操作的空间。
     */
    videoInstance?: HTMLVideoElement;
    /** 全景图游走模式下的特定参数 */
    panorama?: ControllerCustomInitTypes["Panorama"];
    /** 模型游走模式下的特定参数 */
    model?: ControllerCustomInitTypes["Model"];
    /** 模型查看模式下的特定参数 */
    floorplan?: ControllerCustomInitTypes["Floorplan"];
    /** 户型图模式下的特定参数 */
    topview?: ControllerCustomInitTypes["Topview"];
    /** 地图模式下的特定参数 */
    mapview?: ControllerCustomInitTypes["Mapview"];
    /** VR眼镜模式下的特定参数 */
    vrPanorama?: ControllerCustomInitTypes["VRPanorama"];
    /** XR眼镜模式下的特定参数 */
    xrPanorama?: ControllerCustomInitTypes["XRPanorama"];
    /**
     * 模式间切换时的过度动画时间
     * @description
     * 单位毫秒
     * @default `800`
     */
    modeChangeDuration?: number;
    /**
     * 是否支持滚轮
     */
    enableWheel?: boolean;
    /**
     * 插件定义
     * @description
     * 详见插件部分。
     */
    plugins?: (FivePlugin<void> | FivePluginInit<FivePlugin<any, any>> | FivePluginInit<FivePlugin<void, any>>)[];
    /**
     * 是否展示 powered by 如视
     */
    poweredByRealsee?: boolean;
    /**
     * 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有必要使用
     */
    logarithmicDepthBuffer?: boolean;
    /**
     * 着色器精度. 可以是 "highp", "mediump" 或者 "lowp". 如果设备支持
     */
    precision?: 'highp' | 'mediump' | 'lowp';
    /**
     * 性能参数
     */
    powerPreference?: 'high-performance' | 'low-power' | 'default';
    /**
     * 是否使用webgl2渲染执行环境, 默认值 false
     */
    webgl2?: boolean;
    /**
     * 请求代理
     * @param url - 发起的请求
     * @returns 返回的请求
     */
    requestProxy?(url: string): string | Promise<string>;
    /**
     * @deprecated
     * 无效
     */
    enableLayeringRendering?: boolean;
}
export type { FiveInitArgs };