@realsee/five-webgpu 1.0.0-alpha.5 → 1.0.0-alpha.6

package/plugins/Object3DHelperPlugin/Helper/RotateHelper.d.ts

@@ -0,0 +1,93 @@
+import * as THREE from 'three/webgpu';
+import type { Object3D } from 'three/webgpu';
+import { RotateHelperAbstract, type BaseHelperConfig } from './BaseHelper';
+import type { Color, Direction } from '../typing';
+import { tipsDom } from '../utils/tipsDom';
+export declare class RotateHelper extends RotateHelperAbstract {
+    name: string;
+    xCircle?: RotateCircleGroup;
+    yCircle?: RotateCircleGroup;
+    zCircle?: RotateCircleGroup;
+    children: RotateCircleGroup[];
+    angleTips?: ReturnType<typeof tipsDom>;
+    private container?;
+    constructor(originObject3D: Object3D, config?: {
+        container?: HTMLElement;
+        yzCircleEnable?: boolean;
+        xzCircleEnable?: boolean;
+        xyCircleEnable?: boolean;
+        angleTipsEnable?: boolean;
+    } & BaseHelperConfig);
+    hide(): void;
+    show(): void;
+    setScaleByCamera(camera: THREE.PerspectiveCamera | THREE.OrthographicCamera): void;
+    update(camera: THREE.Camera): void;
+    showDraggingHelper(directions: Direction[]): void;
+    dispose(): void;
+}
+declare class RotateCircleGroup extends THREE.Group {
+    direction: Direction;
+    /** 1/4 圆 */
+    circle: Circle;
+    /** 旋转过程中展示的背景圆环 */
+    ring: DashedRing;
+    /** 旋转过程中表示角度的扇形 */
+    angleSector: AngleSector;
+    constructor(options: {
+        direction: Direction;
+        color?: Color;
+    });
+    showCircle(): void;
+    showRing(): void;
+    hide(): void;
+}
+declare class Circle extends THREE.Mesh {
+    direction: Direction;
+    material: THREE.MeshBasicMaterial;
+    gapAngle: number;
+    geometry: THREE.RingGeometry;
+    constructor(options: {
+        direction: Direction;
+        color?: Color;
+    });
+}
+declare class DashedRing extends THREE.Group {
+    direction: Readonly<Direction>;
+    constructor(options: {
+        direction: Direction;
+    });
+}
+declare class AngleSector extends THREE.Mesh {
+    direction: Direction;
+    baseAxes: THREE.Vector3;
+    offsetAngle: (angle: number) => number;
+    angleDirection: 1 | -1;
+    material: THREE.MeshBasicMaterial;
+    constructor(options: {
+        direction: Direction;
+        color?: Color;
+    });
+    /**
+     * 设置扇形旋转方向为顺时针
+     */
+    setClockwiseDirection(): void;
+    /**
+     * 设置扇形旋转方向为逆时针
+     */
+    setCounterClockwiseDirection(): void;
+    /**
+     * 切换扇形旋转方向
+     */
+    toggleDirection(): void;
+    /**
+     * 设置扇形的基础轴向
+     * @param axes 新的基础轴向向量
+     */
+    setBaseAxes(axes: THREE.Vector3): void;
+    /**
+     * 获取当前旋转方向
+     * @returns 'clockwise' | 'counterclockwise'
+     */
+    getDirection(): 'clockwise' | 'counterclockwise';
+}
+export {};

package/plugins/Object3DHelperPlugin/constant.d.ts

@@ -0,0 +1,27 @@
+import * as THREE from 'three/webgpu';
+declare const AXES_COLOR: {
+    X: number;
+    Y: number;
+    Z: number;
+};
+declare class AXES_THREE_COLOR {
+    static get X(): THREE.Color;
+    static get Y(): THREE.Color;
+    static get Z(): THREE.Color;
+}
+/**
+ * Object3DHelper 渲染顺序常量
+ * 数值越大，渲染优先级越高
+ */
+export declare const RENDER_ORDER: {
+    readonly ROTATE_HELPER: 9992;
+    readonly MOVE_HELPER: 9993;
+    readonly SCALE_HELPER_LINE: 9994;
+    readonly SCALE_HELPER_SPHERE: 9995;
+    readonly MOVE_HELPER_ARROW: 10001;
+    readonly MOVE_HELPER_CENTER: 10002;
+    readonly DRAG_GUIDE_LINE: 10003;
+    readonly DRAG_FACE_PATCH: 10004;
+};
+export type RenderOrderType = (typeof RENDER_ORDER)[keyof typeof RENDER_ORDER];
+export { AXES_COLOR, AXES_THREE_COLOR };

package/plugins/Object3DHelperPlugin/index.d.ts

@@ -0,0 +1,6 @@
+import * as Object3DHelperPluginType from './typing';
+import type { Five } from '@realsee/five-webgpu';
+import { Controller } from './Controller';
+export declare const Object3DHelperPlugin: (five: Five) => Controller;
+export { Controller as Object3DHelperController };
+export type { Object3DHelperPluginType };

package/plugins/Object3DHelperPlugin/typing.d.ts

@@ -0,0 +1,143 @@
+import type * as THREE from 'three/webgpu';
+import type { BaseHelper, MoveHelperAbstract, RotateHelperAbstract, Circle } from './Helper/BaseHelper';
+import type { MoveController, UseFaceNormalInterface } from './Controllers/MoveController';
+import type { Object3DHelper, AddObject3DHelperConfig } from './Controller';
+import type { BaseController } from './Controllers/BaseController';
+import type { RotateController } from './Controllers/RotateController';
+import type { BoundingBoxController } from './Controllers/BoundingBoxController';
+export interface Object3DHelperPluginState {
+    enabled: boolean;
+    visible: boolean;
+    disposed: boolean;
+}
+export type HelperConfig<T extends object = object> = boolean | ({
+    enable: boolean;
+} & T);
+export type Object3DHelperPluginEventMap = {
+    show: (options?: {
+        userAction?: boolean;
+    }) => void;
+    hide: (options?: {
+        userAction?: boolean;
+    }) => void;
+    enable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    disable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    dispose: () => void;
+    stateChange: (params: {
+        state: Object3DHelperPluginState;
+        prevState?: Object3DHelperPluginState;
+    }) => void;
+};
+export type Direction = 'x' | 'y' | 'z' | 'xy' | 'xz' | 'yz' | 'plane';
+export type Direction4 = 'nesw' | 'nwse' | 'ns' | 'ew';
+export interface Scissor {
+    left: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export type HelperEventMap = {
+    wantToMove: (position: THREE.Vector3) => void;
+    moveBefore: (position: THREE.Vector3) => void;
+    wantToRotate: (quaternion: THREE.Quaternion) => void;
+    wantToScale: (scale: THREE.Vector3) => void;
+    move: (position: THREE.Vector3) => void;
+    rotate: (quaternion: THREE.Quaternion) => void;
+    scale: (scale: THREE.Vector3) => void;
+    moveStart: (direction?: Direction) => void;
+    rotateStart: (direction?: Direction) => void;
+    scaleStart: (direction?: Direction | Direction4) => void;
+    moveEnd: () => void;
+    rotateEnd: () => void;
+    scaleEnd: () => void;
+    moveByMouseEnable: () => void;
+    moveByMouseDisable: () => void;
+    updateOtherHelpers: (params: {
+        camera: THREE.Camera;
+    }) => void;
+};
+export type InternalHelperEventMap = {
+    initialHelperPosition: () => void;
+    setObjectPosition: (position: THREE.Vector3) => void;
+    setObjectRotate: (quaternion: THREE.Quaternion, origin?: THREE.Vector3) => void;
+    setObjectScale: (scale: THREE.Vector3) => void;
+    applyObjectPosition: (position: {
+        matrix: THREE.Matrix4;
+    }) => void;
+    applyObjectRotate: (rotate: {
+        quaternion: THREE.Quaternion;
+        origin: THREE.Vector3;
+    }) => void;
+    applyObjectScale: (scale: {
+        matrix: THREE.Matrix4;
+        origin?: THREE.Vector3;
+    }) => void;
+};
+export interface Object3DHelperState {
+    enabled: boolean;
+    visible: boolean;
+    disposed: boolean;
+}
+export type Object3DHelperEventMap = HelperEventMap & {
+    show: (options?: {
+        userAction?: boolean;
+    }) => void;
+    hide: (options?: {
+        userAction?: boolean;
+    }) => void;
+    enable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    disable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    dispose: () => void;
+    stateChange: (params: {
+        state: Object3DHelperState;
+        prevState?: Object3DHelperState;
+    }) => void;
+};
+export interface HelperOffset {
+    x: number | {
+        percents: number;
+    };
+    y: number | {
+        percents: number;
+    };
+    z: number | {
+        percents: number;
+    };
+}
+export type Color = THREE.Color | string | number;
+export type PositionFrom = 'objectPosition' | 'boundingBox' | 'boundingSphere' | THREE.Vector3 | ((object: THREE.Object3D) => THREE.Vector3);
+export interface ObjectHelperControllers {
+    moveController?: MoveController;
+    rotateController?: RotateController;
+    boundingBoxController?: BoundingBoxController;
+}
+export type ScaleCallback = (params: {
+    intersectPoint: THREE.Vector3;
+    scalePosition: ScalePosition;
+    offset: THREE.Vector3;
+}) => any;
+export type ScalePosition = {
+    id?: string;
+    handlePosition: THREE.Vector3;
+    basePosition: THREE.Vector3;
+};
+export interface Vector3Position {
+    x: number;
+    y: number;
+    z: number;
+}
+export type Vector3WithArray = [number, number, number];
+export interface Vector2Position {
+    x: number;
+    y: number;
+}
+export type Vector2WithArray = [number, number];
+export type { BaseController, BoundingBoxController, MoveController, UseFaceNormalInterface, RotateController, MoveHelperAbstract, RotateHelperAbstract, Circle, BaseHelper, Object3DHelper, AddObject3DHelperConfig, };

package/plugins/Object3DHelperPlugin/utils/ArrowGroup.d.ts

@@ -0,0 +1,22 @@
+import * as THREE from 'three/webgpu';
+import type { Direction } from '../typing';
+import { DirectionGroup, DirectionMesh } from './direction';
+interface InstanceParameter {
+    direction: Direction;
+    color?: THREE.Color | string | number;
+}
+/**
+ * 箭头组：正方向有线段+箭头，反方向有箭头
+ * 参考 three.js TransformControls 的 gizmoTranslate
+ */
+export declare class ArrowGroup extends DirectionGroup {
+    line: DirectionMesh<THREE.BufferGeometry, THREE.MeshBasicMaterial>;
+    arrow: DirectionMesh<THREE.ConeGeometry, THREE.MeshBasicMaterial>;
+    arrowNeg: DirectionMesh<THREE.ConeGeometry, THREE.MeshBasicMaterial>;
+    private lineHeight;
+    private arrowHeight;
+    name: string;
+    constructor(param: InstanceParameter);
+    private formatGeometries;
+}
+export {};

package/plugins/Object3DHelperPlugin/utils/CenterHandle.d.ts

@@ -0,0 +1,23 @@
+import * as THREE from 'three/webgpu';
+import type { Direction } from '../typing';
+import { DirectionGroup } from '../utils/direction';
+interface InstanceParameter {
+    color?: THREE.Color | string | number;
+    size?: number;
+}
+export declare class CenterHandle extends DirectionGroup {
+    cube: THREE.Mesh<THREE.BoxGeometry, THREE.MeshBasicMaterial[]> & {
+        direction: Direction;
+    };
+    name: string;
+    private faceMaterials;
+    private baseColor;
+    private faceNormals;
+    constructor(param?: InstanceParameter);
+    /**
+     * 更新各个面的颜色，根据与相机的角度动态调整
+     * @param camera 相机对象
+     */
+    update(camera: THREE.Camera): void;
+}
+export {};

package/plugins/Object3DHelperPlugin/utils/PlaneHandle.d.ts

@@ -0,0 +1,19 @@
+import * as THREE from 'three/webgpu';
+import type { Direction } from '../typing';
+import { DirectionGroup } from './direction';
+interface PlaneHandleParams {
+    direction: Direction;
+    color?: THREE.Color | string | number;
+    size?: number;
+    offset?: number;
+}
+/**
+ * 平面移动手柄，参考 three.js TransformControls 的 XY/XZ/YZ 平面手柄
+ * 一个小的半透明方块，位于两个轴的交汇处
+ */
+export declare class PlaneHandle extends DirectionGroup {
+    handle: THREE.Mesh<THREE.BoxGeometry, THREE.MeshBasicMaterial>;
+    name: string;
+    constructor(params: PlaneHandleParams);
+}
+export {};

package/plugins/Object3DHelperPlugin/utils/calculateScaleByCamera.d.ts

@@ -0,0 +1,5 @@
+import type * as THREE from 'three/webgpu';
+export default function calculateScaleByCamera(camera: any, position: THREE.Vector3, limit?: {
+    min?: number;
+    max?: number;
+}): number;

package/plugins/Object3DHelperPlugin/utils/cameraHooks.d.ts

@@ -0,0 +1,3 @@
+import type * as THREE from 'three/webgpu';
+export declare function cameraHooks(camera: THREE.Camera): any;
+export declare function disposeCameraHooks(camera: THREE.Camera): void;

package/plugins/Object3DHelperPlugin/utils/direction.d.ts

@@ -0,0 +1,14 @@
+import type { Direction } from '../typing';
+import * as THREE from 'three/webgpu';
+export declare class DirectionGroup extends THREE.Group {
+    direction: Direction;
+    constructor(direction?: Direction);
+}
+export declare class DirectionLine<T extends THREE.BufferGeometry, K extends THREE.Material> extends THREE.Line<T, K> {
+    direction: Direction;
+    constructor(geometry?: T, material?: K, direction?: Direction);
+}
+export declare class DirectionMesh<T extends THREE.BufferGeometry, K extends THREE.Material> extends THREE.Mesh<T, K> {
+    direction: Direction;
+    constructor(geometry?: T, material?: K, direction?: Direction);
+}

package/plugins/Object3DHelperPlugin/utils/getMouseRaycaster.d.ts

@@ -0,0 +1,5 @@
+import * as THREE from 'three/webgpu';
+export declare function getMouseRaycaster(camera: THREE.Camera, mouse: {
+    x: number;
+    y: number;
+}, element: HTMLElement): THREE.Raycaster | undefined;

package/plugins/Object3DHelperPlugin/utils/getOrthographicCameraDirection.d.ts

@@ -0,0 +1,8 @@
+import * as THREE from 'three/webgpu';
+/**
+ * @description 获取正交相机的方向
+ */
+export declare function getOrthographicCameraDirection(pose: {
+    longitude: number;
+    latitude: number;
+}): THREE.Vector3;

package/plugins/Object3DHelperPlugin/utils/setObjectQuaternion.d.ts

@@ -0,0 +1,8 @@
+import * as THREE from 'three/webgpu';
+/**
+ * @description: 在指定中心点上，使用 quaternion 旋转物体。
+ * @param {THREE.Object3D} object 旋转对象
+ * @param {THREE.Quaternion} quaternion 旋转四元数
+ * @param {THREE.Vector3} rotateCenter 旋转中心
+ */
+export default function setObjectQuaternion(object: THREE.Object3D, quaternion: THREE.Quaternion, rotateCenter: THREE.Vector3): void;

package/plugins/Object3DHelperPlugin/utils/solidGuide.d.ts

@@ -0,0 +1,27 @@
+import * as THREE from 'three/webgpu';
+/** 将世界坐标投影为屏幕像素坐标 */
+export declare function projectToScreen(camera: THREE.Camera, container: HTMLElement | null | undefined, point: THREE.Vector3): THREE.Vector2;
+/** 估算某方向上线段的像素与世界长度的比例（世界单位/像素） */
+export declare function computeWorldPerPixel(camera: THREE.Camera, container: HTMLElement | null | undefined, center: THREE.Vector3, direction: THREE.Vector3): number | undefined;
+/** 计算直线长度：随相机距离/视口变化自适应，限制在可视范围内 */
+export declare function computeGuideLength(camera: THREE.Camera, center: THREE.Vector3): number;
+export type SolidGuideOptions = {
+    color?: number;
+    renderOrder?: number;
+};
+export declare class SolidGuideLine {
+    private camera;
+    private container;
+    private defaults;
+    constructor(camera: THREE.Camera, container: HTMLElement | null | undefined, defaults?: SolidGuideOptions);
+    /** 创建无限长直线（Line + LineBasicMaterial），穿过整个平面 */
+    createSolidLine(center: THREE.Vector3, direction: THREE.Vector3, options?: SolidGuideOptions): THREE.Line<THREE.BufferGeometry<THREE.NormalBufferAttributes, THREE.BufferGeometryEventMap>, THREE.LineBasicMaterial, THREE.Object3DEventMap>;
+    /** 更新已创建的直线，使其始终穿过整个平面 */
+    updateSolidLine(line: THREE.Line<THREE.BufferGeometry, THREE.LineBasicMaterial>, center: THREE.Vector3, direction: THREE.Vector3, options?: SolidGuideOptions): void;
+    /** 计算"无限"直线的长度，确保穿过整个可视区域 */
+    private computeInfiniteLineLength;
+    /** 释放直线的几何与材质 */
+    dispose(line?: THREE.Line<THREE.BufferGeometry, THREE.LineBasicMaterial>): void;
+    /** 更新默认配置 */
+    updateDefaults(options: SolidGuideOptions): void;
+}

package/plugins/Object3DHelperPlugin/utils/tipsDom.d.ts

@@ -0,0 +1,8 @@
+export declare function createElement(style?: Partial<CSSStyleDeclaration>, tagName?: string): HTMLElement;
+export declare function setStyle(element: HTMLElement, style?: Partial<CSSStyleDeclaration>): HTMLElement;
+export declare function tipsDom(style?: Partial<CSSStyleDeclaration>): {
+    element: HTMLElement;
+    show: () => void;
+    hide: () => void;
+    setLeftTop: (left: string, top: string) => void;
+};

package/plugins/PanoAnimePlugin/Controller.d.ts

@@ -0,0 +1,49 @@
+import { Five } from '@realsee/five-webgpu';
+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(): {
+        maxOpacity: number;
+    };
+    private group;
+    private canvas?;
+    private ctx?;
+    private canvasTexture?;
+    private startTime?;
+    private updateState;
+    /**
+     * 更改插件 Config
+     * @param config - 插件属性 `config` 的子集。
+     * @param options - 参数
+     */
+    updateConfig(config: Partial<PluginType.Config>, options?: BasePlugin.BaseOptions): void;
+    /** 光柱材质及其 uniform 节点集合（等价于 five 版本的 ShaderMaterial.uniforms） */
+    private materialUniforms;
+    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-webgpu';
+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 '../BasePlugin';
+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/index.d.ts

@@ -1,2 +1,8 @@
+export * from './BackgroundPlugin';
+export * from './Object3DHelperPlugin';
+export * from './PanoAnimePlugin';
+export * from './CSS2DPlugin';
+export * from './CSS3DPlugin';
+export * from './FloorplanPlugin';
 export { GaussianSplattingEntranceAnimationPlugin, type GaussianSplattingEntranceAnimationPluginType, type GaussianSplattingEntranceAnimationController, } from './GaussianSplattingEntranceAnimationPlugin';
 export { BasePlugin } from './BasePlugin';