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

package/react/rendererPool.d.ts

@@ -0,0 +1,7 @@
+import * as THREE from "three";
+declare function getRenderer({ preserveDrawingBuffer, webgl2 }?: {
+    preserveDrawingBuffer?: boolean;
+    webgl2?: boolean;
+}): THREE.WebGLRenderer | undefined;
+declare function revokeRenderer(renderer?: THREE.WebGLRenderer): void;
+export { getRenderer, revokeRenderer };

package/react/withFive.d.ts

@@ -0,0 +1,213 @@
+import * as React from "react";
+import * as THREE from "three";
+import { Five, Model, State, WorkObserver, EventTypes, Subscribe } from "@realsee/five";
+declare const INJECTION_PROPNAME = "$five";
+type FiveInjectionDataFeature = "unsafe__fiveInstance" | "currentState" | "currentObserver" | "state" | "works" | "model" | "scene" | "cameraDirection" | "cameraRaycaster" | "modelReadyState" | "shownFloor" | "helperVisible";
+type FiveInjectionActionFeature = "loadWork" | "setState" | "on" | "off" | "intersectRaycaster" | "project2d" | "updateCamera" | "getPixels" | "render" | "needsRender" | "preloadPano" | "showFloor" | "toggleHelperVisible";
+type FiveInjectionFeature = FiveInjectionDataFeature | FiveInjectionActionFeature;
+interface FiveInjectionTypes extends Subscribe<EventTypes> {
+    /**
+     * Five React Inject: 获取 five 实例
+     * @description 不到万不得已，并不推荐直接使用。
+     * @deprecated 不到万不得已，并不推荐直接使用。
+     */
+    unsafe__fiveInstance: Five;
+    /**
+     * Five React Inject: Five 的目标状态
+     * @description
+     * ```text
+     * five 设置了以下状态
+     *
+     * - mode: Mode
+     * - panoId: string
+     * - panoIndex: number
+     * - longitude: number
+     * - latitude: number
+     * - fov: number
+     * - offset: THREE.Vector3
+     *
+     * 可以通过 state, currentState 和 setState 来获取和设置。
+     * 通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
+     * 来迎合一些通过数据驱动的场景。
+     * ```
+     */
+    state: State;
+    /**
+     * Five React Inject: Five 的当前状态
+     * @description
+     * ```text
+     * five 设置了以下状态
+     *
+     * - mode: Mode
+     * - panoId: string
+     * - panoIndex: number
+     * - longitude: number
+     * - latitude: number
+     * - fov: number
+     * - offset: THREE.Vector3
+     *
+     * 可以通过 state, currentState 和 setState 来获取和设置。
+     * 通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
+     * 来迎合一些通过数据驱动的场景。
+     * ```
+     */
+    currentState: State;
+    /**
+     * Five React Inject: Five currentState
+     */
+    currentObserver: WorkObserver;
+    /**
+     * Five React Inject: Five cameraDirection
+     */
+    cameraDirection: THREE.Vector3;
+    /**
+     * Five React Inject: Five cameraRaycaster
+     */
+    cameraRaycaster: THREE.Raycaster;
+    /**
+     * Five React Inject: Five Work
+     */
+    work: Five['work'];
+    /**
+     * Five React Inject: Five Work
+     */
+    works: Five['works'];
+    /**
+     * Five React Inject: Five model
+     */
+    model: Five['model'];
+    /**
+     * Five React Inject: Five models
+     */
+    models: Five['models'];
+    /**
+     * Five React Inject: Five models
+     */
+    scene: Five['scene'];
+    /**
+     * Five React Inject: Five modelReadyState
+     */
+    modelReadyState: "Empty" | "Loaded" | undefined;
+    /**
+     * Five React Inject: Five shownFloor
+     */
+    shownFloor: number | null | undefined;
+    /**
+     * Five React Inject: Five helperVisible
+     */
+    helperVisible: boolean | undefined;
+    /**
+     * 设置 State
+     * @description
+     * ```text
+     * five 设置了以下状态
+     *
+     * - mode: Mode
+     * - panoId: string
+     * - panoIndex: number
+     * - longitude: number
+     * - latitude: number
+     * - fov: number
+     * - offset: THREE.Vector3
+     *
+     * 可以通过 state, currentState 和 setState 来获取和设置。
+     * 通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
+     * 来迎合一些通过数据驱动的场景。
+     * ```
+     * @param state - 目标状态
+     * @param immediately - 是否马上转换，马上转换会尽快达到目标状态，尽量减少中间状态，更少动画。
+     */
+    setState: Five["setState"];
+    /**
+     * 加载 Work 数据
+     * @param inputWork - Work 数据
+     * @param state - 初始化姿态
+     *  - "inherit" 使用当前姿态
+     *  - "initial" 使用 Work 数据中的 initial 姿态
+     *  - State 自定义姿态
+     * @param duration - 切换时间
+     */
+    loadWork: Five["load"];
+    /**
+     * 计算模型射线碰撞检测
+     * @param raycaster - THREE 射线对象
+     * @param floor - 和某一楼层做碰撞检测， 不传为和所有楼层做碰撞检测
+     * @returns 返回碰撞
+     */
+    intersectRaycaster: Model["intersectRaycaster"];
+    /**
+     * 计算三维坐标对应到屏幕的二维坐标
+     * @description
+     * 如果三维坐标不在屏幕中，则返回 null
+     * @param vector - 三维坐标
+     * @param testModel - 是否计算模型遮挡
+     * @returns 二维坐标 或者 null
+     */
+    project2d: Five["project2d"];
+    /**
+     * 移动相机。（不触发点位移动）
+     * @description
+     * 如果动画中途被打断（用户触发行为，或者调用 setState, load, changeMode）的等
+     * 会 Promise.reject。运动完成则 Promise.resolve
+     * @param pose - 相机目标位置
+     * @param duration - 动画触发的时常
+     * @returns Promise 是否移动成功
+     */
+    updateCamera: Five["updateCamera"];
+    /**
+     * 获取画面中的像素颜色
+     * @param x - 获取像素区域的起始坐标 x
+     * @param y - 获取像素区域的起始坐标 y
+     * @param width - 获取像素区域的宽度
+     * @param height - 获取像素区域的高度
+     * @param pixelRatio - 获取区域的像素比
+     * @returns rgba颜色平铺的 Uint8Array
+     */
+    getPixels: Five["getPixels"];
+    /**
+     * 强制渲染
+     * @description
+     * 调用 `render()` 和设置 `needsRender()` 均可在按需渲染时，使得画面渲染一次
+     * 区别在于：
+     * - `needsRender()` 为在下帧渲染画面
+     * - `render()` 在当前帧渲染画面
+     * 推荐使用 `needsRender()`, 可以更加流畅。但是如果需要截图等同步操作，可以使用 `render()`
+     *
+     * @param callback - 渲染完成回调
+     */
+    render: Five["render"];
+    /**
+     * 下一帧渲染
+     * @description
+     * 调用 `render()` 和设置 `needsRender()` 均可在按需渲染时，使得画面渲染一次
+     * 区别在于：
+     * - `needsRender()` 为在下帧渲染画面
+     * - `render()` 在当前帧渲染画面
+     * 推荐使用 `needsRender()`, 可以更加流畅。但是如果需要截图等同步操作，可以使用 `render()`
+     *
+     */
+    needsRender: () => void;
+    /**
+     * 预加载点位图片资源
+     * @param panoId - 观察点
+     * @param callback - 加载完成回调, 并传递加载用时。
+     * @returns 加载完成的 Promise 参数同 callback
+     */
+    preloadPano: Five["preloadPano"];
+    /**
+     * 显示楼层
+     * @param floorIndex - 楼层，如果不传则都显示
+     */
+    showFloor: (floorIndex?: number) => void;
+    /**
+     * 帮助元素的隐藏/显示
+     * @param visible - 隐藏/显示
+     */
+    toggleHelperVisible: (visible: boolean) => void;
+}
+interface PropTypeOfFiveFeatures<F extends FiveInjectionFeature[]> {
+    [INJECTION_PROPNAME]: Pick<FiveInjectionTypes, F[number]>;
+}
+declare function withFive<F extends FiveInjectionFeature[]>(features: F): <P extends PropTypeOfFiveFeatures<F>, C extends React.ComponentClass<P>>(Component: C & React.ComponentClass<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<P, "$five">> & React.RefAttributes<Omit<InstanceType<C>, "render" | "context" | "state" | "setState" | "componentDidMount" | "shouldComponentUpdate" | "componentWillUnmount" | "componentDidCatch" | "getSnapshotBeforeUpdate" | "componentDidUpdate" | "componentWillMount" | "UNSAFE_componentWillMount" | "componentWillReceiveProps" | "UNSAFE_componentWillReceiveProps" | "componentWillUpdate" | "UNSAFE_componentWillUpdate" | "forceUpdate" | "props" | "refs">>>;
+declare function createFiveFeature<T extends FiveInjectionFeature>(...features: T[]): T[];
+export { createFiveFeature, withFive, INJECTION_PROPNAME, PropTypeOfFiveFeatures, FiveInjectionTypes, FiveInjectionFeature, FiveInjectionDataFeature, FiveInjectionActionFeature, };

package/shader-lib/EvenessPlane/index.d.ts

@@ -0,0 +1,10 @@
+import { CustomShader } from '@realsee/five';
+import * as THREE from 'three';
+export declare class EvenessPlaneShader extends CustomShader {
+    /** 平整度的参数*/
+    evennessPlane: {
+        depth: number;
+        points: THREE.Vector3[];
+    };
+    constructor();
+}

package/shader-lib/PointCloudExpand/index.d.ts

@@ -0,0 +1,59 @@
+import { CustomShader } from '@realsee/five';
+export declare class PointCloudExpandShader extends CustomShader {
+    constructor();
+    get progress(): number;
+    set progress(value: number);
+}
+/**
+float pointEffectSizeScale = 1.0;
+float pointEffectSizeBasis = 0.0;
+
+==== start effect 1 =====
+vec4 basis = vec4((modelBoundingMax + modelBoundingMin) / 2.0, 1.0);
+float boundingRadius = length(modelBoundingMax - modelBoundingMin) / 2.0;
+
+vec4 rPosition1 = vWorldPosition - basis;
+vec4 rPosition2 = normalize(rPosition1) * (boundingRadius * 20.0) * gln_simplex(vWorldPosition.xyz * 20.0);
+
+float progress = clamp(pointEffect * pointEffect * pointEffect, 0.0, 1.0);
+vec4 rPosition = mix(rPosition1, rPosition2, progress);
+
+float rLength = length(rPosition.xz);
+float rad = atan(rPosition.z, rPosition.x) + sqrt(length(rPosition - rPosition1) / 100.0);
+rPosition.x = cos(rad) * rLength;
+rPosition.z = sin(rad) * rLength;
+
+vWorldPosition = basis + rPosition;
+==== end effect 1 =====
+
+==== start effect 2 =====
+vec4 basis = vec4((modelBoundingMax + modelBoundingMin) / 2.0, 1.0);
+float boundingRadius = length(modelBoundingMax - modelBoundingMin) / 2.0;
+float p = length(vWorldPosition - basis) / boundingRadius;
+float progress = smoothstep(p, p - 0.03, 1.0 - pointEffect);
+float noise = gln_simplex(vWorldPosition.xyz * 10.0);
+progress = step(abs(noise), progress);
+pointEffectSizeScale = mix(pointEffectSizeScale, 0.0, progress);
+
+float progress2 = step(pointEffect, 1.0 - p);
+pointEffectSizeBasis = mix(0.1 * step(abs(noise), 0.5 / boundingRadius), pointEffectSizeBasis, progress2);
+==== end effect 2 =====
+
+==== start effect 3 =====
+vec4 basis = vec4((modelBoundingMax + modelBoundingMin) / 2.0, 1.0);
+float boundingRadius = length(modelBoundingMax - modelBoundingMin) / 2.0;
+float boundingSizeZ = length(modelBoundingMax.z - modelBoundingMin.z);
+float p = 1.0 - length(vWorldPosition.z - modelBoundingMin.z) / boundingSizeZ;
+float progress = 1.0 - pointEffect;
+progress = progress * 0.9 + 0.1;
+progress = smoothstep(p, p - 0.03, 1.0 - pointEffect);
+float noise = gln_simplex(vWorldPosition.xyz * 10.0);
+progress = step(abs(noise), progress);
+pointEffectSizeScale = mix(pointEffectSizeScale, 0.0, progress);
+
+float progress2 = step(pointEffect, 1.0 - p);
+float noise2 = gln_simplex(vWorldPosition.xyz * 10.0);
+pointEffectSizeBasis = mix(0.7 * step(abs(noise2), 0.2 / boundingRadius), pointEffectSizeBasis, progress2);
+pointEffectSizeBasis = mix(0.0, pointEffectSizeBasis, step(p - 0.3, (1.0 - pointEffect) * 0.9));
+==== end effect 3 =====
+ */ 

package/shader-lib/PolygonCuter/index.d.ts

@@ -0,0 +1,52 @@
+import { CustomShader } from '@realsee/five';
+import * as THREE from 'three';
+export interface PolygonClipper {
+    polygon: number[][];
+    polygonTransform: THREE.Matrix4;
+    polygonHeight: number;
+    cutOutSide: boolean;
+    floorIndex?: number;
+}
+export interface AlignmentResult {
+    /** 变换矩阵，使得法线与Y轴重合，底面与XZ平面重合 */
+    transformMatrix: THREE.Matrix4;
+    /** 变换后的二维坐标数组 [x, z] */
+    points2D: number[][];
+}
+/**
+ * 计算将共面点集对齐到XZ平面的变换矩阵，并返回变换后的二维坐标
+ * @returns 包含变换矩阵和二维坐标的结果对象
+ */
+export declare function computeAlignmentMatrix(points: THREE.Vector3[]): AlignmentResult;
+/**
+ * @class PolygonCuterShader
+ * @description 用于多边形切割的shader，请注意，在定义的polygon的底面时，一定是定义在xz平面上，如果在y方向时有位移，请体现在polygonCuterTransform上
+ */
+export declare class PolygonGenerater {
+    canvas: HTMLCanvasElement;
+    polygonTexture: THREE.CanvasTexture;
+    polygonCount: number;
+    canvasCache: Map<string, HTMLCanvasElement>;
+    constructor();
+    setSize(size: number): void;
+    generatePolygonCanvas(polygon: number[][]): HTMLCanvasElement;
+    static generatePolygonGeometry(polygon: number[][], height: number): THREE.BufferGeometry;
+    generatePolygonTexture(canvases: HTMLCanvasElement[]): THREE.CanvasTexture;
+}
+export declare class PolygonCuterShader extends CustomShader {
+    private _polygonClippers;
+    private polygonGenerater;
+    private _radio;
+    private workerPool;
+    constructor(radio?: 256 | 512 | 1024 | 2048);
+    /**
+     * 异步设置 polygonClippers，使用 web worker 处理纹理生成
+     */
+    setPolygonClippersAsync(value: PolygonClipper[]): Promise<void>;
+    get polygonClippers(): PolygonClipper[];
+    set polygonClippers(value: PolygonClipper[]);
+    get radio(): 256 | 512 | 1024 | 2048;
+    set radio(value: 256 | 512 | 1024 | 2048);
+    dispose(): void;
+    onBeforeCompile(shader: THREE.Shader, renderer: THREE.WebGLRenderer): void;
+}

package/shader-lib/PolygonCuter/worker.d.ts

@@ -0,0 +1,14 @@
+import { WorkerType } from '../../five/utils/worker';
+interface PolygonCanvasData {
+    polygon: number[][];
+    width: number;
+    height: number;
+}
+export type PolygonWorkerType = WorkerType<{
+    canvasDataList: PolygonCanvasData[];
+    width: number;
+    height: number;
+}, {
+    imageData: ImageData;
+}>;
+export {};

package/shader-lib/ShineModel/index.d.ts

@@ -0,0 +1,7 @@
+import { CustomShader } from '@realsee/five';
+import * as THREE from 'three';
+export declare class ShineModelShader extends CustomShader {
+    shineBoxes: THREE.Box3[];
+    constructor();
+    onBeforeCompile(shader: THREE.Shader, renderer: THREE.WebGLRenderer): void;
+}

package/shader-lib/SweepModel/index.d.ts

@@ -0,0 +1,7 @@
+import { CustomShader } from '@realsee/five';
+import * as THREE from 'three';
+export declare class SweepModelShader extends CustomShader {
+    sweepBoxs: THREE.Box3[];
+    constructor();
+    onBeforeCompile(shader: THREE.Shader, renderer: THREE.WebGLRenderer): void;
+}

package/shader-lib/index.d.ts

@@ -1,86 +1,5 @@
-import { CustomShader } from '@realsee/five';
-import * as THREE_2 from 'three';
-
-export declare interface AlignmentResult {
-    /** 变换矩阵，使得法线与Y轴重合，底面与XZ平面重合 */
-    transformMatrix: THREE_2.Matrix4;
-    /** 变换后的二维坐标数组 [x, z] */
-    points2D: number[][];
-}
-
-/**
- * 计算将共面点集对齐到XZ平面的变换矩阵，并返回变换后的二维坐标
- * @returns 包含变换矩阵和二维坐标的结果对象
- */
-export declare function computeAlignmentMatrix(points: THREE_2.Vector3[]): AlignmentResult;
-
-export declare class EvenessPlaneShader extends CustomShader {
-    /** 平整度的参数*/
-    evennessPlane: {
-        depth: number;
-        points: THREE_2.Vector3[];
-    };
-    constructor();
-}
-
-export declare class PointCloudExpandShader extends CustomShader {
-    constructor();
-    get progress(): number;
-    set progress(value: number);
-}
-
-export declare interface PolygonClipper {
-    polygon: number[][];
-    polygonTransform: THREE_2.Matrix4;
-    polygonHeight: number;
-    cutOutSide: boolean;
-    floorIndex?: number;
-}
-
-export declare class PolygonCuterShader extends CustomShader {
-    private _polygonClippers;
-    private polygonGenerater;
-    private _radio;
-    private workerPool;
-    constructor(radio?: 256 | 512 | 1024 | 2048);
-    /**
-     * 异步设置 polygonClippers，使用 web worker 处理纹理生成
-     */
-    setPolygonClippersAsync(value: PolygonClipper[]): Promise<void>;
-    get polygonClippers(): PolygonClipper[];
-    set polygonClippers(value: PolygonClipper[]);
-    get radio(): 256 | 512 | 1024 | 2048;
-    set radio(value: 256 | 512 | 1024 | 2048);
-    dispose(): void;
-    onBeforeCompile(shader: THREE_2.Shader, renderer: THREE_2.WebGLRenderer): void;
-}
-
-/**
- * @class PolygonCuterShader
- * @description 用于多边形切割的shader，请注意，在定义的polygon的底面时，一定是定义在xz平面上，如果在y方向时有位移，请体现在polygonCuterTransform上
- */
-export declare class PolygonGenerater {
-    canvas: HTMLCanvasElement;
-    polygonTexture: THREE_2.CanvasTexture;
-    polygonCount: number;
-    canvasCache: Map<string, HTMLCanvasElement>;
-    constructor();
-    setSize(size: number): void;
-    generatePolygonCanvas(polygon: number[][]): HTMLCanvasElement;
-    static generatePolygonGeometry(polygon: number[][], height: number): THREE_2.BufferGeometry;
-    generatePolygonTexture(canvases: HTMLCanvasElement[]): THREE_2.CanvasTexture;
-}
-
-export declare class ShineModelShader extends CustomShader {
-    shineBoxes: THREE_2.Box3[];
-    constructor();
-    onBeforeCompile(shader: THREE_2.Shader, renderer: THREE_2.WebGLRenderer): void;
-}
-
-export declare class SweepModelShader extends CustomShader {
-    sweepBoxs: THREE_2.Box3[];
-    constructor();
-    onBeforeCompile(shader: THREE_2.Shader, renderer: THREE_2.WebGLRenderer): void;
-}
-
-export { }
+export * from './EvenessPlane';
+export * from './SweepModel';
+export * from './PointCloudExpand';
+export * from './PolygonCuter';
+export * from './ShineModel';