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 | FivePluginInit> | FivePluginInit>)[]; /** * 是否展示 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; /** * @deprecated * 无效 */ enableLayeringRendering?: boolean; } export type { FiveInitArgs };