@realsee/dnalogel 0.1.7 → 2.0.0-alpha.11

package/libs/CSS3DRenderPlugin/index.js

@@ -0,0 +1,179 @@
+import * as THREE from 'three';
+import { Scene, Vector3 } from 'three';
+import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import evenNumber from '../shared-utils/math/evenNumber';
+import centerPoint from '../shared-utils/three/centerPoint';
+import transformPositionToVector3 from '../shared-utils/three/transformPositionToVector3';
+import createResizeObserver from './utils/createResizeObserver';
+/**
+ * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
+ * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
+ *
+ * @returns
+ */
+export const CSS3DRenderPlugin = (five) => {
+    const state = { disposeCallbacks: [] };
+    const create3DDomContainer = (...params) => {
+        const points = params[0].map((point) => (point instanceof Vector3 ? point : transformPositionToVector3(point)));
+        const config = params[1];
+        if (points?.length < 4)
+            return console.error('points must be equal or greater than than 4');
+        if (!five?.model?.loaded)
+            return console.error('five.model.loaded is: ', five?.model?.loaded);
+        const fiveElement = five.getElement();
+        if (!fiveElement)
+            return console.error('five.getElement() is ' + fiveElement);
+        const disposers = [];
+        const ratio = config?.ratio || 0.00216;
+        if (ratio <= 0.00215)
+            console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215');
+        const dpr = config?.dpr || 1;
+        const mode = config?.mode || 'front';
+        const autoRender = config?.autoRender ?? true;
+        const behindFiveContainer = config?.behindFiveContainer || fiveElement.parentElement || document.body;
+        const container = config?.container || document.createElement('div');
+        container.classList.add('__Dnalogel-plugin--CSS3DRenderPlugin');
+        // 获取css3DObject, 如果mode为behind的话，一起获取mesh
+        const { css3DObject, mesh } = createObject(points, { ratio, dpr, container, mode });
+        // ======= INIT START =======
+        let resizeObserver;
+        const frontModeUnInited = mode === 'front' && !state.frontMode;
+        const behindModeUnInited = mode === 'behind' && !state.behindMode;
+        const inited = !(frontModeUnInited || behindModeUnInited);
+        if (behindModeUnInited) {
+            state.behindMode = { scene: new Scene(), css3DRenderer: new CSS3DRenderer() };
+        }
+        if (frontModeUnInited) {
+            state.frontMode = { scene: new Scene(), css3DRenderer: new CSS3DRenderer() };
+        }
+        const stateMode = mode === 'behind' ? state.behindMode : state.frontMode;
+        const { scene, css3DRenderer } = stateMode;
+        const render = (() => {
+            if (!inited) {
+                const css3DRendererSetSize = () => {
+                    // 这里evenNumber策略是遇到奇数会加1，不知道为啥会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
+                    // 为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
+                    const rendererWidth = evenNumber(fiveElement.clientWidth, { smaller: true });
+                    const rendererHeight = evenNumber(fiveElement.clientHeight, { smaller: true });
+                    css3DRenderer.setSize(rendererWidth, rendererHeight);
+                };
+                css3DRendererSetSize();
+                resizeObserver = createResizeObserver(css3DRendererSetSize, fiveElement);
+                css3DRenderer.domElement.style.position = 'absolute';
+                css3DRenderer.domElement.style.top = '0';
+                css3DRenderer.domElement.style.userSelect = 'none';
+                css3DRenderer.domElement.style.pointerEvents = 'none';
+                const renderEveryFrame = () => {
+                    const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
+                    stateMode.requestAnimationFrameId = requestAnimationFrameId;
+                    css3DRenderer.render(scene, five.camera);
+                };
+                return () => {
+                    scene.add(css3DObject);
+                    resizeObserver?.observe?.();
+                    renderEveryFrame();
+                    if (mode === 'behind' && mesh) {
+                        five.scene.add(mesh);
+                        disposers.push(() => mesh && five.scene.remove(mesh));
+                    }
+                };
+            }
+            else {
+                return () => {
+                    scene.add(css3DObject);
+                };
+            }
+        })();
+        if (frontModeUnInited) {
+            const wrapper = fiveElement.parentElement || document.body;
+            wrapper.appendChild(css3DRenderer.domElement);
+        }
+        if (behindModeUnInited) {
+            const wrapper = behindFiveContainer;
+            wrapper.appendChild(css3DRenderer.domElement);
+        }
+        // ======= INIT END =======
+        const dispose = () => {
+            disposers.forEach((d) => d?.());
+            scene.remove(css3DObject);
+            if (scene.children.length === 0) {
+                if (typeof stateMode.requestAnimationFrameId === 'number') {
+                    cancelAnimationFrame(stateMode.requestAnimationFrameId);
+                }
+                css3DRenderer.domElement.remove();
+                if (mode === 'front')
+                    state.frontMode = undefined;
+                if (mode === 'behind')
+                    state.behindMode = undefined;
+                if (!state.behindMode && !state.frontMode) {
+                    resizeObserver?.unobserve?.();
+                }
+            }
+            return true;
+        };
+        const idx = state.disposeCallbacks.findIndex((item) => item === dispose);
+        if (idx !== -1) {
+            state.disposeCallbacks.splice(idx, 1);
+        }
+        else {
+            state.disposeCallbacks.push(dispose);
+        }
+        if (autoRender)
+            render();
+        return { container, dispose, css3DObject, render: autoRender ? undefined : render };
+    };
+    const createObject = (points, config) => {
+        const { ratio, dpr, container: element, mode } = config;
+        const planeWidth = points[0].distanceTo(points[1]);
+        const planeHeight = points[1].distanceTo(points[2]);
+        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
+        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
+        const css3DObject = new CSS3DObject(element);
+        css3DObject.scale.set(ratio, ratio, ratio);
+        element.style.width = domWidthPx + 'px';
+        element.style.height = domHeightPx + 'px';
+        element.style.pointerEvents = 'none';
+        const centerPosition = centerPoint(points[0], points[2]);
+        const vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
+        const vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
+        // 旋转
+        const rotateXAngle = new Vector3(0, 1, 0).angleTo(new Vector3(0, vector12.y, vector12.z));
+        const rotateYAngle = new Vector3(1, 0, 0).angleTo(new Vector3(vector01.x, 0, vector01.z));
+        const rotateZAngle = vector01.angleTo(new Vector3(vector01.x, 0, vector01.z));
+        /**
+         * [0,1,0] => [0,0,1]  为rotate Worldx正方向
+         * [0,0,1] => [0,1,0]  为rotate Worldy正方向
+         * [0,1,1] => [-1,0,0] 为rotate Worldz正方向
+         */
+        const rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
+        const rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
+        const rotateZ = ((vector01.x > 0 && vector01.y < 0) || (vector01.x < 0 && vector01.y > 0) ? -1 : 1) * rotateZAngle;
+        css3DObject.rotateOnWorldAxis(new Vector3(1, 0, 0), rotateX); // x
+        css3DObject.rotateOnWorldAxis(new Vector3(0, 1, 0), rotateY); // y
+        css3DObject.rotateOnWorldAxis(new Vector3(0, 0, 1), rotateZ); // z
+        css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+        let mesh;
+        if (mode === 'behind') {
+            const material = new THREE.MeshBasicMaterial({
+                opacity: 0,
+                transparent: false,
+                side: THREE.DoubleSide,
+            });
+            const geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx);
+            mesh = new THREE.Mesh(geometry, material);
+            mesh.name = 'CSS3DRenderPlugin-mesh';
+            mesh.position.copy(css3DObject.position);
+            mesh.rotation.copy(css3DObject.rotation);
+            mesh.scale.copy(css3DObject.scale);
+        }
+        return { css3DObject, mesh };
+    };
+    return {
+        create3DDomContainer,
+        disposeAll: () => {
+            state.disposeCallbacks.forEach((d) => d?.());
+            state.disposeCallbacks = [];
+        },
+    };
+};
+export default CSS3DRenderPlugin;

package/libs/CSS3DRenderPlugin/utils/createResizeObserver.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description: 究极简陋的 ResizeObserver polyfill
+ */
+export default function createResizeObserver(func: () => any, element?: HTMLElement): {
+    observe: () => void;
+    unobserve: () => void;
+};

package/libs/CSS3DRenderPlugin/utils/createResizeObserver.js

@@ -0,0 +1,18 @@
+/**
+ * @description: 究极简陋的 ResizeObserver polyfill
+ */
+export default function createResizeObserver(func, element) {
+    if (!element || typeof ResizeObserver === 'undefined') {
+        return {
+            observe: () => window.addEventListener('resize', func),
+            unobserve: () => window.removeEventListener('resize', func),
+        };
+    }
+    else {
+        const observer = new ResizeObserver(func);
+        return {
+            observe: () => observer.observe(element),
+            unobserve: () => observer.unobserve(element),
+        };
+    }
+}

package/libs/CameraMovementPlugin/index.d.ts

@@ -0,0 +1,7 @@
+import type { FivePlugin } from '@realsee/five';
+import { CameraMovementPluginExportType, CameraMovementPluginParameterType } from './typing';
+/**
+ * **运镜插件** 模拟类似于电影运镜效果。
+ */
+export declare const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType, CameraMovementPluginExportType>;
+export default CameraMovementPlugin;

package/libs/CameraMovementPlugin/index.js

@@ -0,0 +1,159 @@
+import { Five } from '@realsee/five';
+import * as TWEEN from '@tweenjs/tween.js';
+import { tweenProgress } from '../shared-utils/animationFrame/tween';
+import { Rotation, } from './typing';
+import { formatLongitude, formatLatitude } from '../shared-utils/animationFrame/formatRad';
+import { progressNumber } from '../shared-utils/animationFrame/calculateProgress';
+const getLongitudeParams = (from, to, rotation) => {
+    const PI = Math.PI;
+    const PI_2 = PI * 2;
+    from = formatLongitude(from);
+    to = formatLongitude(to);
+    // 逆时针旋转，初始值必须是较大的值
+    if (rotation === Rotation.Anticlockwise && from < to)
+        from += PI_2;
+    // 顺时针旋转，结束值必须是较大值
+    if (rotation === Rotation.Clockwise && to < from)
+        to += PI_2;
+    // Loop 旋转，找锐角旋转
+    // 如果 to 比 from 大 180°，逆时针转
+    // 如果 from 比 to 大 180°，顺时针转
+    if (rotation === Rotation.Loop && to - from > PI)
+        return getLongitudeParams(from, to, Rotation.Anticlockwise);
+    if (rotation === Rotation.Loop && from - to > PI)
+        return getLongitudeParams(from, to, Rotation.Clockwise);
+    return { from, to };
+};
+/**
+ * **运镜插件** 模拟类似于电影运镜效果。
+ */
+export const CameraMovementPlugin = (five) => {
+    const state = {};
+    const move = async (args, duration, opts = { preload: true }) => {
+        if (state.interruptCallback) {
+            state.interruptCallback(false);
+        }
+        if (opts.asyncStartCallback) {
+            await opts.asyncStartCallback();
+        }
+        if (args.mode && args.mode !== five.currentMode) {
+            await five.changeMode(args.mode);
+        }
+        if (opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
+            await five.preloadPano(args.panoIndex);
+        }
+        if (opts.asyncEndCallback) {
+            await opts.asyncEndCallback();
+        }
+        if (args.panoIndex === undefined &&
+            args.fov === undefined &&
+            args.latitude === undefined &&
+            args.longitude === undefined) {
+            return true;
+        }
+        return await new Promise((resolve, reject) => {
+            const panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex;
+            if (panoIndex !== undefined) {
+                five.moveToPano(panoIndex, Object.assign({
+                    duration,
+                    moveEndCallback: () => resolve(true),
+                    moveCancelCallback: () => reject(false), // 移动开始
+                }, args));
+            }
+            else {
+                reject(false);
+            }
+        });
+    };
+    const getAnimeParams = (args) => {
+        const currentFiveState = five.state;
+        // latitude
+        const fromLatitude = formatLatitude(currentFiveState.latitude);
+        const toLatitude = formatLatitude(args.latitude);
+        // longitude
+        const { from: fromLongitude, to: toLongitude } = getLongitudeParams(currentFiveState.longitude, args.longitude, args.rotation || Rotation.Loop);
+        // fov
+        const fromFov = currentFiveState.fov;
+        const toFov = args.fov;
+        return {
+            from: { latitude: fromLatitude, longitude: fromLongitude, fov: fromFov },
+            to: { latitude: toLatitude, longitude: toLongitude, fov: toFov },
+        };
+    };
+    const rotate = async (args, duration, opts = {}) => {
+        if (state.interruptCallback) {
+            state.interruptCallback(false);
+        }
+        if (opts.asyncStartCallback) {
+            await opts.asyncStartCallback();
+        }
+        if (five.currentMode !== Five.Mode.Panorama) {
+            await five.changeMode(Five.Mode.Panorama);
+        }
+        if (args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
+            if (opts.preload)
+                await five.preloadPano(args.panoIndex);
+            await new Promise((resolve, reject) => {
+                if (!args.panoIndex) {
+                    resolve(true);
+                    return;
+                }
+                five.moveToPano(args.panoIndex, {
+                    moveEndCallback: () => resolve(true),
+                    moveCancelCallback: () => reject(false), // 移动开始
+                });
+            });
+        }
+        if (opts.asyncEndCallback) {
+            await opts.asyncEndCallback();
+        }
+        const { from, to } = getAnimeParams(args);
+        return await new Promise((resolve) => {
+            const onUpdate = ({ progress }) => {
+                const state = {};
+                state.longitude = progressNumber(from.longitude, to.longitude, progress);
+                state.latitude = progressNumber(from.latitude, to.latitude, progress);
+                state.fov = progressNumber(from.fov, to.fov, progress);
+                five.setState(state, true);
+            };
+            const onComplete = () => {
+                resolve(true);
+            };
+            const onDestroy = () => {
+                resolve(false);
+            };
+            const animeDuration = args.rotateSpeed
+                ? Math.ceil((Math.abs(to.longitude - from.longitude) / args.rotateSpeed) * 1000)
+                : duration;
+            const tween = tweenProgress(animeDuration, TWEEN.Easing.Linear.None)
+                .onUpdate(onUpdate)
+                .onComplete(onComplete)
+                .onDestroy(onDestroy);
+            if (args.rotation === Rotation.Loop) {
+                tween.repeat(Infinity).yoyo(true);
+            }
+            /**
+             * 中断回调：可能会被其他动画中断。
+             */
+            state.interruptCallback = (flag = true) => {
+                tween.destroy();
+                state.interruptCallback = undefined;
+                if (state.timeoutId) {
+                    clearTimeout(state.timeoutId);
+                    state.timeoutId = undefined;
+                }
+                resolve(flag);
+            };
+            state.timeoutId = setTimeout(() => {
+                // 总时间到了之后强制结束，同时也是 Loop 模式的结束方式
+                if (state.interruptCallback)
+                    state.interruptCallback(true);
+            }, duration);
+        });
+    };
+    return {
+        move,
+        rotate,
+    };
+};
+export default CameraMovementPlugin;

package/libs/CameraMovementPlugin/typing.d.ts

@@ -0,0 +1,68 @@
+import { Mode, Pose } from '@realsee/five';
+export interface CameraMovementPluginParameterType {
+}
+export interface CameraMovementPluginExportType {
+    /**
+     * 运镜：移动
+     * @param moveArgs 移动参数
+     * @param duration 移动耗时
+     * @param opts 额外配置
+     */
+    move(moveArgs: Partial<MoveArgs>, duration: number, opts?: MoveOpts): Promise<boolean>;
+    /**
+     * 运镜：旋转
+     * @param rotateArgs 旋转参数
+     * @param duration 旋转耗时
+     * @param opts 额外配置
+     */
+    rotate(rotateArgs: Partial<RotateArgs>, duration: number, opts?: RotateOpts): Promise<boolean>;
+}
+/**
+ * 运镜效果
+ */
+export declare enum CameraMovementEffect {
+    Move = "Move",
+    Rotate = "Rotate"
+}
+/**
+ * 旋转类型
+ */
+export declare enum Rotation {
+    Clockwise = "Clockwise",
+    Anticlockwise = "Anticlockwise",
+    Loop = "Loop"
+}
+/**
+ * 回调配置
+ */
+export interface CameraMovementOptsCallback {
+    asyncStartCallback?: () => void;
+    asyncEndCallback?: () => void;
+}
+/**
+ * 移动运镜参数
+ */
+export declare type MoveArgs = {
+    mode: Mode;
+    panoIndex: number;
+} & Pose;
+/**
+ * 移动运镜配置
+ */
+export declare type MoveOpts = {
+    preload?: boolean;
+} & CameraMovementOptsCallback;
+/**
+ * 旋转运镜参数
+ */
+export declare type RotateArgs = {
+    panoIndex?: number;
+    rotateSpeed?: number;
+    rotation?: Rotation;
+} & Pose;
+/**
+ * 旋转运镜配置
+ */
+export declare type RotateOpts = {
+    preload?: boolean;
+} & CameraMovementOptsCallback;

package/libs/CameraMovementPlugin/typing.js

@@ -0,0 +1,17 @@
+/**
+ * 运镜效果
+ */
+export var CameraMovementEffect;
+(function (CameraMovementEffect) {
+    CameraMovementEffect["Move"] = "Move";
+    CameraMovementEffect["Rotate"] = "Rotate";
+})(CameraMovementEffect || (CameraMovementEffect = {}));
+/**
+ * 旋转类型
+ */
+export var Rotation;
+(function (Rotation) {
+    Rotation["Clockwise"] = "Clockwise";
+    Rotation["Anticlockwise"] = "Anticlockwise";
+    Rotation["Loop"] = "Loop";
+})(Rotation || (Rotation = {}));

package/libs/ModelChassisCompassPlugin/index.d.ts

@@ -0,0 +1,19 @@
+import type { FivePlugin } from '@realsee/five';
+export interface ModelChassisCompassPluginParameterType {
+    north_rad?: number;
+    fbx_url?: string;
+}
+export interface ModelChassisCompassPluginData {
+    north_rad?: number;
+    fbx_url?: string;
+}
+export interface ModelChassisCompassPluginExportType {
+    enable: () => void;
+    disable: () => void;
+    load: (data?: ModelChassisCompassPluginData) => Promise<boolean>;
+}
+/**
+ * 模型底盘指南针插件
+ */
+export declare const ModelChassisCompassPlugin: FivePlugin<ModelChassisCompassPluginParameterType, ModelChassisCompassPluginExportType>;
+export default ModelChassisCompassPlugin;

package/libs/ModelChassisCompassPlugin/index.js

@@ -0,0 +1,75 @@
+import * as THREE from 'three';
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
+import object3d2LocalMatrix from '../shared-utils/object3d2LocalMatrix';
+import transfromToMeshBasicMaterial from '../shared-utils/three/transfromToMeshBasicMaterial';
+/**
+ * 模型底盘指南针插件
+ */
+export const ModelChassisCompassPlugin = (five, params) => {
+    const defaultFbxUrl = params.fbx_url || '//vrlab-static.ljcdn.com/release/web/v3/dipan3/dipan.FBX';
+    const defaultNorthRad = params.north_rad || undefined;
+    // 局部状态
+    const state = {};
+    const load = async (data) => {
+        const fbxUrl = data?.fbx_url || defaultFbxUrl;
+        const northRad = data?.north_rad || defaultNorthRad;
+        if (!northRad) {
+            throw new Error('"northRad"配置参数缺失：未配置指南针指向！');
+        }
+        const bounding = five.model.bounding;
+        const xOffset = bounding.max.x - bounding.min.x;
+        const zOffset = bounding.max.z - bounding.min.z;
+        const maxOffset = Math.max(xOffset, zOffset);
+        const fbxLoader = new FBXLoader();
+        const object = await fbxLoader.loadAsync(fbxUrl);
+        transfromToMeshBasicMaterial(object, {
+            transparent: true,
+            side: THREE.DoubleSide,
+            blending: THREE.AdditiveBlending,
+        });
+        const rotation = [0, northRad - Math.PI / 2, 0];
+        const { model: { bounding: { max: { x: xMax, z: zMax }, min: { x: xMin, y: yMin, z: zMin }, }, }, } = five;
+        state.yBase = yMin;
+        const position = { x: (xMax + xMin) / 2, y: yMin - 1.6, z: (zMax + zMin) / 2 };
+        const scale = 0.0045 * maxOffset;
+        object3d2LocalMatrix(object, { position, rotation, scale });
+        state.object = object;
+        return true;
+    };
+    const onCameraUpdate = ({ latitude }) => {
+        if (!state.object)
+            return;
+        const y = getPositionY(latitude);
+        if (y) {
+            state.object.position.y = y;
+        }
+    };
+    const getPositionY = (latitude) => {
+        if (state.yBase === undefined)
+            return;
+        const difference = 0.6;
+        if (latitude >= Math.PI / 4)
+            return state.yBase - (difference + 1.6);
+        const ratio = latitude * (4 / Math.PI);
+        return state.yBase - (difference * ratio + 1.6);
+    };
+    const enable = () => {
+        if (!state.object)
+            return;
+        const y = getPositionY(five.getPose().latitude);
+        if (y)
+            state.object.position.y = y;
+        five.scene.add(state.object);
+        five.needsRender = true;
+        five.on('cameraDirectionUpdate', onCameraUpdate);
+    };
+    const disable = () => {
+        if (!state.object)
+            return;
+        five.scene.remove(state.object);
+        five.needsRender = true;
+        five.off('cameraDirectionUpdate', onCameraUpdate);
+    };
+    return { load, disable, enable };
+};
+export default ModelChassisCompassPlugin;

package/libs/ModelEntryDoorGuidePlugin/index.d.ts

@@ -0,0 +1,26 @@
+import type { FivePlugin } from '@realsee/five';
+import { Vector3Position } from '../typings/math.type';
+export interface ModelEntryDoorGuidePluginData {
+    position?: Vector3Position;
+    rad?: number;
+    fbx_url?: string;
+}
+export declare type ModelEntryDoorGuidePluginParameterType = {
+    animationEnabled?: boolean;
+} & ModelEntryDoorGuidePluginData;
+export interface ModelEntryDoorGuidePluginExportType {
+    enable: (config?: {
+        animationEnable?: boolean;
+    }) => boolean;
+    disable: () => boolean;
+    load: (data?: Partial<ModelEntryDoorGuidePluginData>) => Promise<boolean>;
+}
+/**
+ * 模型入户门引导插件
+ */
+export declare const ModelEntryDoorGuidePlugin: FivePlugin<ModelEntryDoorGuidePluginParameterType, ModelEntryDoorGuidePluginExportType>;
+export declare const modelEntryDoorGuidePluginServerParams: {
+    name: string;
+    version: number;
+};
+export default ModelEntryDoorGuidePlugin;