@realsee/five 6.8.0-alpha.2 → 6.8.0-alpha.21

package/plugins/DynamicPathLinePlugin/typing.d.ts

@@ -0,0 +1,129 @@
+import type { BasePlugin } from '../BasePlugin';
+import * as THREE from 'three';
+/** 路径配置 */
+export interface PathConfig {
+    /** 路径唯一标识 */
+    id: string;
+    /** 路径点 */
+    points: THREE.Vector3[];
+    /** 是否启用 */
+    enabled?: boolean;
+    /** 是否可见 */
+    visible?: boolean;
+    /** 线条颜色（可选，覆盖全局配置） */
+    color?: number;
+    /** 线宽（可选，覆盖全局配置） */
+    lineWidth?: number;
+    /** 子网格颜色（可选，覆盖全局配置） */
+    subMeshColor?: number;
+    /** 子网格宽度（可选，覆盖全局配置） */
+    subMeshWidth?: number;
+    /** 子网格透明度（可选，覆盖全局配置） */
+    subMeshOpacity?: number;
+    /** 流光速度（可选，覆盖全局配置，单位：米/秒） */
+    speed?: number;
+    /** 流光范围（可选，覆盖全局配置，单位：米，默认 5.0） */
+    range?: number;
+    /** 是否启用子网格（可选，默认 true） */
+    enableSubMesh?: boolean;
+    /** 是否启用路径线和粒子效果（可选，默认 true） */
+    enablePathline?: boolean;
+}
+/** 插件数据 */
+export type PluginData = {
+    paths: Map<string, PathConfig>;
+};
+/** 服务端数据 */
+export type ServerData = {
+    paths: Array<{
+        id: string;
+        points: Array<{
+            x: number;
+            y: number;
+            z: number;
+        }>;
+        enabled?: boolean;
+        visible?: boolean;
+        color?: number;
+        lineWidth?: number;
+        subMeshColor?: number;
+        subMeshWidth?: number;
+        subMeshOpacity?: number;
+        speed?: number;
+        range?: number;
+        enableSubMesh?: boolean;
+        enablePathline?: boolean;
+    }>;
+};
+/** 插件配置 */
+export interface Config {
+    /** 线条数量 */
+    lineCount?: number;
+    /** 线条间距 */
+    spacing?: number;
+    /** 线宽 */
+    lineWidth?: number;
+    /** 线条颜色 */
+    color?: number;
+    /** 流光速度（单位距离/秒，值越大速度越快） */
+    speed?: number;
+    /** 流光过渡范围（单位：米，默认 5.0） */
+    range?: number;
+    /** 波动幅度 */
+    waveAmp?: number;
+    /** 波动频率 */
+    waveFreq?: number;
+    /** 粒子数量 */
+    particleCount?: number;
+    /** 粒子最大飘散距离 */
+    maxDistance?: number;
+    /** pathline Y 轴偏移（相对于 subMesh 向上偏移） */
+    lineYOffset?: number;
+    /** 子网格宽度 */
+    subMeshWidth?: number;
+    /** 子网格底色 */
+    subMeshColor?: number;
+    /** 子网格基础透明度（最小透明度） */
+    subMeshOpacity?: number;
+    /** 子网格最大透明度（流光中心的透明度，默认 1.0） */
+    subMeshMaxOpacity?: number;
+    /** 子网格流光分段间隔（单位：米，默认 3.0） */
+    subMeshSegmentInterval?: number;
+    /** 子网格流光高亮带宽度（单位：米，默认 1.5） */
+    subMeshHighlightWidth?: number;
+}
+/** 插件初始化参数 */
+export interface Params {
+    config?: Partial<Config>;
+    initialState?: Partial<State>;
+    /** 初始路径配置列表 */
+    paths?: PathConfig[];
+}
+/** 插件状态 */
+export interface State extends BasePlugin.State {
+    /** 插件是否启用 */
+    enabled: boolean;
+    /** 插件整体是否可见 */
+    visible: boolean;
+    /** 动画是否正在播放 */
+    playing: boolean;
+}
+/** 插件事件 */
+export interface EventMap extends BasePlugin.EventMap<State, PluginData> {
+    /** 动画开始播放 */
+    animationStart: () => void;
+    /** 动画停止播放 */
+    animationStop: () => void;
+    /** 路径添加 */
+    pathAdd: (pathId: string, config: PathConfig) => void;
+    /** 路径移除 */
+    pathRemove: (pathId: string) => void;
+    /** 路径启用 */
+    pathEnable: (pathId: string) => void;
+    /** 路径禁用 */
+    pathDisable: (pathId: string) => void;
+    /** 路径显示 */
+    pathShow: (pathId: string) => void;
+    /** 路径隐藏 */
+    pathHide: (pathId: string) => void;
+}

package/plugins/DynamicPathLinePlugin/typings.d.ts

@@ -0,0 +1,72 @@
+import type { BasePlugin } from '../BasePlugin';
+import * as THREE from 'three';
+/** 插件数据 */
+export type PluginData = {
+    points: THREE.Vector3[];
+};
+/** 服务端数据 */
+export type ServerData = {
+    points: Array<{
+        x: number;
+        y: number;
+        z: number;
+    }>;
+};
+/** 插件配置 */
+export interface Config {
+    /** 线条数量 */
+    lineCount?: number;
+    /** 线条间距 */
+    spacing?: number;
+    /** 曲线分段数 */
+    divisions?: number;
+    /** 线宽 */
+    lineWidth?: number;
+    /** 线条颜色 */
+    color?: number;
+    /** 流光速度（单位距离/秒，值越大速度越快） */
+    speed?: number;
+    /** 流光过渡范围 */
+    range?: number;
+    /** 波动幅度 */
+    waveAmp?: number;
+    /** 波动频率 */
+    waveFreq?: number;
+    /** 粒子数量 */
+    particleCount?: number;
+    /** 粒子最大飘散距离 */
+    maxDistance?: number;
+    /** 子网格 Y 轴偏移 */
+    subMeshYOffset?: number;
+    /** 子网格宽度 */
+    subMeshWidth?: number;
+    /** 子网格底色 */
+    subMeshColor?: number;
+    /** 子网格基础透明度 */
+    subMeshOpacity?: number;
+}
+/** 插件初始化参数 */
+export interface Params {
+    config?: Partial<Config>;
+    initialState?: Partial<State>;
+    /** 初始路径点 */
+    points?: THREE.Vector3[];
+}
+/** 插件状态 */
+export interface State extends BasePlugin.State {
+    /** 插件是否启用 */
+    enabled: boolean;
+    /** 插件整体是否可见 */
+    visible: boolean;
+    /** 动画是否正在播放 */
+    playing: boolean;
+}
+/** 插件事件 */
+export interface EventMap extends BasePlugin.EventMap<State, PluginData> {
+    /** 动画开始播放 */
+    animationStart: () => void;
+    /** 动画停止播放 */
+    animationStop: () => void;
+    /** 路径点更新 */
+    pointsUpdate: (points: THREE.Vector3[]) => void;
+}

package/plugins/ItemMaskPlugin/Controller.d.ts

@@ -0,0 +1,48 @@
+import { Five } from '@realsee/five';
+import { BasePlugin } from '../BasePlugin';
+import type * as PluginType from './typing';
+export declare class Controller extends BasePlugin.Controller<PluginType.State, PluginType.EventMap, PluginType.ServerData, PluginType.PluginData> {
+    /** 当前使用的数据 */
+    data?: PluginType.PluginData;
+    /** 插件当前状态 */
+    state: PluginType.State;
+    /** config 的原始值 */
+    private _config;
+    get config(): {};
+    private canvas;
+    private group;
+    private updateState;
+    private wrapper;
+    private style;
+    private tapPosition?;
+    private stopAnimation?;
+    private itemMaskMesh;
+    constructor(five: Five, params?: PluginType.Params);
+    load(data: PluginType.ServerData): Promise<void>;
+    private onFivePanoArrived;
+    private onFiveWantsMoveToPano;
+    private loadPanoMask;
+    private onFiveMouseMove;
+    private onFiveTapGesture;
+    private changeTapScreenPosition;
+    private onFiveCameraUpdate;
+    /** 更改插件 State */
+    setState(state: Partial<PluginType.State>, options?: BasePlugin.BaseOptions): void;
+    setMode(mode: PluginType.State['mode']): void;
+    select(name?: string, options?: {
+        userAction: boolean;
+    }): void;
+    selectAll(bool?: boolean): void;
+    private _enable;
+    private _disable;
+    /**
+   * 启用插件，让插件能够响应交互
+   */
+    enable(options?: BasePlugin.BaseOptions): void;
+    /**
+     * 禁用插件，让插件停止响应交互
+     */
+    disable(options?: BasePlugin.BaseOptions): void;
+    /** 销毁插件，移除所有副作用，销毁后将不响应任何 API */
+    dispose: () => void;
+}

package/plugins/ItemMaskPlugin/index.d.ts

@@ -0,0 +1,5 @@
+import type { Five } from '@realsee/five';
+import type * as ItemMaskPluginType from './typing';
+import { Controller } from './Controller';
+export declare const ItemMaskPlugin: (five: Five, params?: ItemMaskPluginType.Params) => Controller;
+export type { ItemMaskPluginType, Controller as ItemMaskController };

package/plugins/ItemMaskPlugin/typing.d.ts

@@ -0,0 +1,58 @@
+import { BasePlugin } from '../BasePlugin';
+export interface ItemType {
+    category_name: string;
+    category_cn: string;
+    index: number;
+    derived_id: string;
+    longitude: number;
+    latitude: number;
+    fov: number;
+    width: number;
+    height: number;
+    position: {
+        start: number[];
+        end: number[];
+        rotation: number[];
+    };
+    mask_color: number[];
+    visible_viewpoint: {
+        [key: string]: Record<any, any>;
+    };
+}
+export interface MaskType {
+    derived_id: string;
+    index: number;
+    object_mask_url: string;
+}
+export type PluginData = {
+    data_list: ItemType[];
+    object_mask_list: MaskType[];
+};
+export type ServerData = {
+    data_list: ItemType[];
+    object_mask_list: MaskType[];
+};
+/** 插件配置 */
+export interface Config {
+}
+/** 插件初始化参数 */
+export interface Params {
+    config?: Partial<Config>;
+    initialState?: Partial<State>;
+}
+/** 插件状态 */
+export interface State extends BasePlugin.State {
+    /** 插件是否启用 */
+    enabled: boolean;
+    /** 插件整体是否可见 */
+    visible: boolean;
+    /** 插件模式 */
+    mode: 'mask' | 'box';
+    /** 选中ID */
+    selectedId: string | null;
+    /** 全选 */
+    selectAll: boolean;
+}
+/** 插件事件 */
+export interface EventMap extends BasePlugin.EventMap<State, ServerData> {
+}

package/plugins/OrientationPlugin/Controller.d.ts

@@ -0,0 +1,82 @@
+import { Five, Camera } from '@realsee/five';
+import { BasePlugin } from '../BasePlugin';
+import type * as PluginType from './typing';
+import * as THREE from "three";
+import { OrbitControls } from '../thirdParty/OrbitControls.js';
+import { CSS3DRenderer } from '../thirdParty/CSS3DRenderer.js';
+import { RoundedBoxGeometry } from './RoundedBoxGeometry';
+export declare class Controller extends BasePlugin.Controller<PluginType.State, PluginType.EventMap, PluginType.ServerData, PluginType.PluginData> {
+    /** 当前使用的数据 */
+    data?: PluginType.PluginData;
+    /** 插件当前状态 */
+    state: PluginType.State;
+    /** config 的原始值 */
+    private _config;
+    camera: Camera;
+    scene: THREE.Scene;
+    renderer: THREE.WebGLRenderer;
+    css3drenderer: CSS3DRenderer;
+    ambientLight: THREE.AmbientLight;
+    wrapper: HTMLDivElement;
+    private arrows;
+    private arrowLeft;
+    private arrowRight;
+    private arrowFront;
+    private arrowBack;
+    private arrowTop;
+    private arrowBottom;
+    private mc?;
+    private cameraAnimation?;
+    private cylinder;
+    private spherical;
+    private dragging;
+    private style;
+    directionalLight: THREE.DirectionalLight;
+    box: THREE.Mesh<RoundedBoxGeometry, THREE.MeshPhongMaterial>;
+    faces: THREE.Group;
+    controls?: OrbitControls;
+    get config(): {
+        orthoView: boolean;
+        fixedLongitude: number;
+    };
+    private updateState;
+    constructor(five: Five, params?: PluginType.Params);
+    appendTo(container: HTMLElement): void;
+    init(): void;
+    initDom(): void;
+    bindEvents(): void;
+    unbindEvents(): void;
+    orient: ({ longitude, latitude }: {
+        longitude?: number;
+        latitude?: number;
+    }) => void;
+    private updateByCamera;
+    private updateArrows;
+    private handleArrowsVisible;
+    private onRenderFrame;
+    private onTapGesture;
+    private onFiveWantsGesture;
+    private onFiveModeChange;
+    private onCameraUpdate;
+    private onPanStart;
+    private onMouseMove;
+    private onPanEnd;
+    /** 更改插件 State */
+    setState(state: Partial<PluginType.State>, options?: BasePlugin.BaseOptions): void;
+    private initLights;
+    private initFaces;
+    private initControls;
+    load(data: PluginType.ServerData): Promise<void>;
+    private _enable;
+    private _disable;
+    /**
+   * 启用插件，让插件能够响应交互
+   */
+    enable(options?: BasePlugin.BaseOptions): void;
+    /**
+     * 禁用插件，让插件停止响应交互
+     */
+    disable(options?: BasePlugin.BaseOptions): void;
+    /** 销毁插件，移除所有副作用，销毁后将不响应任何 API */
+    dispose: () => void;
+}

package/plugins/OrientationPlugin/RoundedBoxGeometry.d.ts

@@ -0,0 +1,11 @@
+import * as THREE from 'three';
+export declare class RoundedBoxGeometry extends THREE.BufferGeometry {
+    parameters: {
+        width: number;
+        height: number;
+        depth: number;
+        radius: number;
+        radiusSegments: number;
+    };
+    constructor(width: number, height: number, depth: number, radius: number, radiusSegments: number);
+}

package/plugins/OrientationPlugin/index.d.ts

@@ -0,0 +1,6 @@
+import type { Five } from '@realsee/five';
+import type * as OrientationPluginType from './typing';
+import { Controller } from './Controller';
+export { RoundedBoxGeometry } from './RoundedBoxGeometry';
+export declare const OrientationPlugin: (five: Five, params?: OrientationPluginType.Params) => Controller;
+export type { OrientationPluginType, Controller as OrientationPluginController };

package/plugins/OrientationPlugin/typing.d.ts

@@ -0,0 +1,25 @@
+import type { BasePlugin } from '../BasePlugin';
+export type PluginData = any;
+export type ServerData = any;
+/** 插件配置 */
+export interface Config {
+    orthoView?: boolean;
+    fixedLongitude?: number;
+}
+/** 插件初始化参数 */
+export interface Params {
+    config?: Partial<Config>;
+    initialState?: Partial<State>;
+}
+/** 插件状态 */
+export interface State extends BasePlugin.State {
+    /** 插件是否启用 */
+    enabled: boolean;
+    /** 插件整体是否可见 */
+    visible: boolean;
+    /** 箭头操作是否可见 */
+    arrowsVisible: boolean;
+}
+/** 插件事件 */
+export interface EventMap extends BasePlugin.EventMap<State, ServerData> {
+}

package/plugins/PanoAnimePlugin/Controller.d.ts

@@ -0,0 +1,46 @@
+import { Five } from '@realsee/five';
+import { BasePlugin } from '@realsee/five/plugins';
+import type * as PluginType from './typing';
+export declare class Controller extends BasePlugin.Controller<PluginType.State, PluginType.EventMap, PluginType.ServerData, PluginType.PluginData> {
+    /** 当前使用的数据 */
+    data?: PluginType.PluginData;
+    /** 插件当前状态 */
+    state: PluginType.State;
+    /** config 的原始值 */
+    private _config;
+    get config(): {
+        maxOpacity: number;
+    };
+    private group;
+    private canvas?;
+    private ctx?;
+    private startTime?;
+    private updateState;
+    /**
+     * 更改插件 Config
+     * @param config - 插件属性 `config` 的子集。
+     * @param options - 参数
+     */
+    updateConfig(config: Partial<PluginType.Config>, options?: BasePlugin.BaseOptions): void;
+    private mesh;
+    private panoMesh;
+    constructor(five: Five, params?: PluginType.Params);
+    load(data: PluginType.ServerData): Promise<void>;
+    private stop;
+    private drawLine;
+    private anime;
+    private _enable;
+    private _disable;
+    /**
+     * 启用插件，让插件能够响应交互
+     */
+    enable(options?: BasePlugin.BaseOptions): void;
+    /**
+     * 禁用插件，让插件停止响应交互
+     */
+    disable(options?: BasePlugin.BaseOptions): void;
+    /** 更改插件 State */
+    setState(state: Partial<PluginType.State>, options?: BasePlugin.BaseOptions): void;
+    /** 销毁插件，移除所有副作用，销毁后将不响应任何 API */
+    dispose: () => void;
+}

package/plugins/PanoAnimePlugin/index.d.ts

@@ -0,0 +1,5 @@
+import type { Five } from '@realsee/five';
+import type * as PanoAnimePluginType from './typing';
+import { Controller } from './Controller';
+export declare const PanoAnimePlugin: (five: Five, params?: PanoAnimePluginType.Params) => Controller;
+export type { PanoAnimePluginType, Controller as PanoAnimeController };

package/plugins/PanoAnimePlugin/typing.d.ts

@@ -0,0 +1,37 @@
+import { BasePlugin } from '@realsee/five/plugins';
+export type PluginData = {};
+export type ServerData = {};
+/** 插件配置 */
+export interface Config {
+    maxOpacity: number;
+}
+/** 插件初始化参数 */
+export interface Params {
+    config?: Partial<Config>;
+    initialState?: Partial<State>;
+}
+/** 插件状态 */
+export interface State extends BasePlugin.State {
+    /** 插件是否启用 */
+    enabled: boolean;
+    /** 插件整体是否可见 */
+    visible: boolean;
+}
+export interface ConfigChangeEvent {
+    /** 变更前的 config */
+    prevConfig: Config;
+    /** 变更后的 config */
+    config: Config;
+    /** 是否是用户操作 */
+    userAction: boolean;
+}
+/** 插件事件 */
+export interface EventMap extends BasePlugin.EventMap<State, PluginData> {
+    drawingChange: (drawing: boolean) => void;
+    /** config 变更的回调 */
+    configChange: (event: {
+        prevConfig: Config;
+        config: Config;
+        userAction: boolean;
+    }) => void;
+}

package/plugins/PluginTemplate/Controller.d.ts

@@ -0,0 +1,27 @@
+import type { Five } from '@realsee/five';
+import { BasePlugin } from '../BasePlugin';
+import type * as PluginType from './typing';
+export declare class Controller extends BasePlugin.Controller<PluginType.State, PluginType.EventMap, PluginType.ServerData, PluginType.PluginData> {
+    /** 当前使用的数据 */
+    data?: PluginType.PluginData;
+    /** 插件当前状态 */
+    state: PluginType.State;
+    /** config 的原始值 */
+    private _config;
+    get config(): {};
+    private updateState;
+    constructor(five: Five, params?: PluginType.Params);
+    load(data: PluginType.ServerData): Promise<void>;
+    private _enable;
+    private _disable;
+    /**
+   * 启用插件，让插件能够响应交互
+   */
+    enable(options?: BasePlugin.BaseOptions): void;
+    /**
+     * 禁用插件，让插件停止响应交互
+     */
+    disable(options?: BasePlugin.BaseOptions): void;
+    /** 销毁插件，移除所有副作用，销毁后将不响应任何 API */
+    dispose: () => void;
+}

package/plugins/PluginTemplate/index.d.ts

@@ -0,0 +1,5 @@
+import type { Five } from '@realsee/five';
+import type * as PluginTemplateType from './typing';
+import { Controller } from './Controller';
+export declare const Plugin: (five: Five, params?: PluginTemplateType.Params) => Controller;
+export type { PluginTemplateType, Controller as PluginTemplateController };

package/plugins/PluginTemplate/typing.d.ts

@@ -0,0 +1,21 @@
+import type { BasePlugin } from '../BasePlugin';
+export type PluginData = any;
+export type ServerData = any;
+/** 插件配置 */
+export interface Config {
+}
+/** 插件初始化参数 */
+export interface Params {
+    config?: Partial<Config>;
+    initialState?: Partial<State>;
+}
+/** 插件状态 */
+export interface State extends BasePlugin.State {
+    /** 插件是否启用 */
+    enabled: boolean;
+    /** 插件整体是否可见 */
+    visible: boolean;
+}
+/** 插件事件 */
+export interface EventMap extends BasePlugin.EventMap<State, ServerData> {
+}

package/plugins/TrajectoryPlugin/Controller.d.ts

@@ -0,0 +1,85 @@
+import type { Five } from '@realsee/five';
+import { BasePlugin } from '../BasePlugin';
+import type * as PluginType from './typing';
+import { Trajectory } from '@realsee/five';
+import * as THREE from 'three';
+export interface Keyframe {
+    position: THREE.Vector3;
+    location: number;
+}
+export interface PlayingState {
+    keyframeIndex: number | null;
+    progress: number | null;
+}
+export declare class Controller extends BasePlugin.Controller<PluginType.State, PluginType.EventMap, PluginType.ServerData, PluginType.PluginData> {
+    /** 当前使用的数据 */
+    data?: PluginType.PluginData;
+    /** 插件当前状态 */
+    state: PluginType.State;
+    /** config 的原始值 */
+    private _config;
+    get config(): {
+        rate?: number;
+    };
+    private cancelAnimation;
+    private playingState;
+    totalDistance: number;
+    location: number;
+    nextKeyframe: Keyframe | null;
+    nextButOneKeyframe: Keyframe | null;
+    currentKeyFrame: Keyframe | null;
+    trajectory: Trajectory | null;
+    keyframes: Keyframe[];
+    rate: number;
+    skipStart: number;
+    skipEnd: number;
+    private virualCamera;
+    private timeArray;
+    startTimestamp: number | null;
+    playbackStartTime: number | null;
+    playbackEndTime: number | null;
+    private updateState;
+    constructor(five: Five, params?: PluginType.Params);
+    load(data: PluginType.ServerData): Promise<void>;
+    loadTrajectory(trajectory: Trajectory): void;
+    setPlayingState(playingState: Partial<PlayingState>): void;
+    private _enable;
+    play(): void;
+    pause(): void;
+    /**
+     * 基于真实时间戳播放轨迹动画
+     * 使用 timeArray 中的时间戳，按照真实时间播放
+     */
+    playByTimestamp(): void;
+    findKeyFrameByLocation(location: number): number | {
+        keyframeIndex: number;
+        progress: number;
+    };
+    /**
+     * 根据时间戳找到最近的 keyframe
+     * @returns keyframe 索引，如果找不到返回 undefined
+     */
+    findKeyFrameByTimestamp(timestamp: number): number | undefined;
+    resetPlayingState(): void;
+    /**
+     * 获取总播放时间（毫秒）
+     * 考虑 skipStart 和 skipEnd
+     * @returns 总时间（毫秒），如果轨迹未加载则返回 null
+     */
+    getTotalTime(): number | null;
+    /**
+     * 设置时间戳模式的播放状态并继续播放
+     */
+    setPlayingStateByTimestamp(keyframeIndex: number): void;
+    private _disable;
+    /**
+   * 启用插件，让插件能够响应交互
+   */
+    enable(options?: BasePlugin.BaseOptions): void;
+    /**
+     * 禁用插件，让插件停止响应交互
+     */
+    disable(options?: BasePlugin.BaseOptions): void;
+    /** 销毁插件，移除所有副作用，销毁后将不响应任何 API */
+    dispose: () => void;
+}

package/plugins/TrajectoryPlugin/index.d.ts

@@ -0,0 +1,6 @@
+import type { Five } from '@realsee/five';
+import type * as PluginTemplateType from './typing';
+import { Controller } from './Controller';
+export declare const TrajectoryPlugin: (five: Five, params?: PluginTemplateType.Params) => Controller;
+export type { PluginTemplateType, Controller as TrajectoryController };
+export type { Keyframe, PlayingState } from './Controller';