@realsee/dnalogel 0.1.7 → 2.0.0-alpha.11

package/libs/ModelEntryDoorGuidePlugin/index.js

@@ -0,0 +1,137 @@
+import { AnimationMixer, MeshBasicMaterial } from 'three';
+import * as THREE from 'three';
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
+import createCanvasTextTexture from '../shared-utils/createCanvasTextTexture';
+import transformPositionToVector3 from '../shared-utils/three/transformPositionToVector3';
+import transfromToMeshBasicMaterial from '../shared-utils/three/transfromToMeshBasicMaterial';
+/**
+ * 模型入户门引导插件
+ */
+export const ModelEntryDoorGuidePlugin = (five, params) => {
+    // 局部状态
+    const state = {};
+    const defaultAnimationEnable = params.animationEnabled ?? true;
+    const defaultModelPosition = params.position ?? undefined;
+    const defaultRad = params.rad ?? undefined;
+    const defaultFbxUrl = params.fbx_url || '//vrlab-image4.ljcdn.com/release/web/entryDoorMini/Anim_Door1.fbx';
+    const mixers = [];
+    const load = async (data) => {
+        const position = data?.position ?? defaultModelPosition;
+        if (!position)
+            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): position is undefined`);
+        const modelPosition = transformPositionToVector3(position);
+        const rad = data?.rad ?? defaultRad;
+        const fbxUrl = data?.fbx_url ?? defaultFbxUrl;
+        state.rad = rad;
+        if (rad === undefined)
+            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): rad is ${rad}`);
+        // 加载模型
+        const object = await new FBXLoader().loadAsync(fbxUrl);
+        // 设置位置
+        object.position.copy(modelPosition);
+        object.rotation.z = rad;
+        object.scale.set(0.8, 0.8, 0.8);
+        transfromToMeshBasicMaterial(object, { transparent: true, side: THREE.DoubleSide });
+        const textMesh = object.children?.[0]?.children?.[3]?.clone();
+        if (!textMesh)
+            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): textMesh is ${textMesh}`);
+        textMesh.material = new MeshBasicMaterial({ transparent: true, map: createCanvasTextTexture('入户门') });
+        textMesh.renderOrder = 3;
+        object.children[0].add(textMesh);
+        state.object = object;
+        return true;
+    };
+    const initAnimation = () => {
+        if (state.animation)
+            return;
+        if (!state.object)
+            return console.error('ModelEntryDoorGuidePlugin.initAnimation(): state.object is ', state.object);
+        // action
+        const animationSpeed = 1;
+        const mixer = new AnimationMixer(state.object);
+        mixers.push(mixer);
+        const action = mixer.clipAction(state.object.animations[0]);
+        action.timeScale = animationSpeed;
+        let stopAnimation;
+        const requestAnimationFrameLoop = () => {
+            let index = 0;
+            let oldTime = 0;
+            const minDeltaTime = 1000 / 30;
+            const animation = (time) => {
+                index = requestAnimationFrame(animation);
+                const deltaTime = time - oldTime;
+                if (deltaTime < minDeltaTime)
+                    return;
+                oldTime = time;
+                mixers.forEach((mixer) => mixer.update(deltaTime / 1000));
+                five.needsRender = true;
+            };
+            index = requestAnimationFrame(animation);
+            return () => {
+                cancelAnimationFrame(index);
+            };
+        };
+        const play = () => {
+            if (stopAnimation)
+                return;
+            action.play();
+            stopAnimation = requestAnimationFrameLoop();
+            // 开始播动画时，rotation可能会还原
+            requestAnimationFrame(() => {
+                if (state.object && state.object.rotation.z !== state.rad)
+                    state.object.rotation.z = state.rad;
+            });
+        };
+        const stop = () => {
+            action.stop();
+            stopAnimation?.();
+            stopAnimation = undefined;
+        };
+        const animation = { play, stop };
+        state.animation = animation;
+    };
+    const show = (config) => {
+        if (!state.object)
+            return console.error('ModelEntryDoorGuidePlugin.enable(): object is ', state.object);
+        const animationEnable = config?.animationEnable ?? defaultAnimationEnable;
+        if (animationEnable) {
+            if (!state.animation)
+                initAnimation();
+            state.animation.play();
+        }
+        five.scene.add(state.object);
+        five.needsRender = true;
+    };
+    const hide = () => {
+        if (!state.object)
+            return;
+        if (state.animation)
+            state.animation.stop();
+        five.scene.remove(state.object);
+        five.needsRender = true;
+    };
+    const modeChangeHandler = (mode) => (mode === 'Floorplan' ? show() : hide());
+    const enable = (config) => {
+        if (state.enabled)
+            return true;
+        state.enabled = true;
+        modeChangeHandler(five.currentMode);
+        five.on('modeChange', modeChangeHandler);
+        show(config);
+        return true;
+    };
+    const disable = () => {
+        if (!state.enabled)
+            return true;
+        state.enabled = false;
+        hide();
+        five.off('modeChange', modeChangeHandler);
+        return true;
+    };
+    return { load, enable, disable };
+};
+export const modelEntryDoorGuidePluginServerParams = {
+    name: 'ModelEntryDoorGuidePlugin',
+    version: 0,
+};
+export default ModelEntryDoorGuidePlugin;

package/libs/ModelRoomLabelPlugin/Assets/roomLabelBg.d.ts

@@ -0,0 +1 @@
+export declare const ROOM_LABEL_BG = "data:image/png;base64,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";

package/libs/ModelRoomLabelPlugin/Assets/roomLabelBg.js

@@ -0,0 +1 @@
+export const ROOM_LABEL_BG = 'data:image/png;base64,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';

package/libs/ModelRoomLabelPlugin/Controller.d.ts

@@ -0,0 +1,36 @@
+import type { Five } from '@realsee/five';
+import type { ModelRoomLabelPluginData } from './typings';
+export declare type ModelRoomLabelPluginParameters = undefined;
+export declare class ModelRoomLabelController {
+    private five;
+    private enabled;
+    private fiveModeEnabled;
+    private app?;
+    private wrapper?;
+    private roomLabels;
+    private container;
+    constructor(five: Five);
+    dispose(): void;
+    /** 加载数据 */
+    load(data: ModelRoomLabelPluginData): void;
+    /** 设置插件容器 */
+    appendTo(wrapper: Element): this;
+    /** 禁用插件功能
+     * @description
+     * - 如果当前正在展示中，会清除所有展示的 DOM
+     * - 如果当前未展示，即使后续 Five 状态满足展示要求，也不会展示
+     * */
+    disable(): this;
+    /** 启用插件功能
+     * @description
+     * - 如果当前符合展示条件，会立刻展示
+     * - 如果不符合展示条件，会等待 Five 状态满足条件后再展示
+     */
+    enable(): this;
+    /** 监听 Five Mode 变化
+     * @description
+     * Mode 不符合要求时，立刻消失，满足要求时，需要等待动画结束再展示
+     */
+    private onFiveModeChange;
+    private render;
+}

package/libs/ModelRoomLabelPlugin/Controller.js

@@ -0,0 +1,100 @@
+import RoomLabelItems from './RoomLabelItems';
+import { parseModelRoomLabelPluginData } from './utils/parseData';
+export class ModelRoomLabelController {
+    five;
+    enabled = true;
+    fiveModeEnabled;
+    app = undefined;
+    wrapper;
+    roomLabels = [];
+    container = document.createElement('div');
+    constructor(five) {
+        this.five = five;
+        this.fiveModeEnabled = this.five.currentMode === 'Floorplan';
+        // init container style
+        this.container.classList.add('model-room-label-plugin-container');
+        this.container.style.width = '100%';
+        this.container.style.height = '100%';
+        this.container.style.position = 'absolute';
+        this.container.style.pointerEvents = 'none';
+        this.container.style.left = '0';
+        this.container.style.top = '0';
+        // five listener
+        this.five.once('dispose', () => this.dispose());
+        this.five.on('modeChange', this.onFiveModeChange);
+        this.render();
+    }
+    dispose() {
+        this.five.off('modeChange', this.onFiveModeChange);
+        // ReactDOM.unmountComponentAtNode(this.container)
+        this.container.remove();
+    }
+    /** 加载数据 */
+    load(data) {
+        this.roomLabels = parseModelRoomLabelPluginData(data);
+        this.render();
+    }
+    /** 设置插件容器 */
+    appendTo(wrapper) {
+        this.wrapper = wrapper;
+        wrapper.appendChild(this.container);
+        this.render();
+        return this;
+    }
+    /** 禁用插件功能
+     * @description
+     * - 如果当前正在展示中，会清除所有展示的 DOM
+     * - 如果当前未展示，即使后续 Five 状态满足展示要求，也不会展示
+     * */
+    disable() {
+        this.enabled = false;
+        this.render();
+        return this;
+    }
+    /** 启用插件功能
+     * @description
+     * - 如果当前符合展示条件，会立刻展示
+     * - 如果不符合展示条件，会等待 Five 状态满足条件后再展示
+     */
+    enable() {
+        this.enabled = true;
+        this.render();
+        return this;
+    }
+    /** 监听 Five Mode 变化
+     * @description
+     * Mode 不符合要求时，立刻消失，满足要求时，需要等待动画结束再展示
+     */
+    onFiveModeChange = (mode) => {
+        if (mode !== 'Floorplan') {
+            this.fiveModeEnabled = false;
+            this.render();
+            return;
+        }
+        this.five.once('initAnimationEnded', () => {
+            this.fiveModeEnabled = this.five.currentMode === 'Floorplan';
+            this.render();
+        });
+    };
+    render() {
+        if (!this.wrapper)
+            return;
+        if (!this.enabled || !this.fiveModeEnabled) {
+            this.app?.$destroy();
+            this.app = undefined;
+            return;
+        }
+        if (!this.app) {
+            this.app = new RoomLabelItems({
+                target: this.container,
+                props: {
+                    five: this.five,
+                    roomLabels: this.roomLabels,
+                },
+            });
+        }
+        else {
+            this.app.$set({ five: this.five, roomLabels: this.roomLabels });
+        }
+    }
+}

package/libs/ModelRoomLabelPlugin/RoomLabelItem.js

@@ -0,0 +1,121 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	append,
+	append_styles,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_data,
+	set_style,
+	space,
+	text,
+	toggle_class
+} from "svelte/internal";
+
+import { ROOM_LABEL_BG } from './Assets/roomLabelBg';
+
+function add_css(target) {
+	append_styles(target, "svelte-17nkflf", ".room-label-item.svelte-17nkflf{position:absolute;font-size:8px;z-index:0;transform:none;cursor:pointer;pointer-events:none;user-select:none}.room-label-item__text.svelte-17nkflf{position:absolute;left:0;top:-64px;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center;height:20px;min-width:32px;padding:0 6px;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap}.room-label-item__bar.svelte-17nkflf{position:absolute;top:-44px;height:48px;width:1px;background-image:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))}.wide.svelte-17nkflf{font-size:10px}");
+}
+
+function create_fragment(ctx) {
+	let div1;
+	let span;
+	let t0_value = /*roomLabel*/ ctx[0].name + "";
+	let t0;
+	let t1;
+	let div0;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div1 = element("div");
+			span = element("span");
+			t0 = text(t0_value);
+			t1 = space();
+			div0 = element("div");
+			attr(span, "class", "room-label-item__text svelte-17nkflf");
+			set_style(span, "background-image", "url(" + ROOM_LABEL_BG + ")");
+			toggle_class(span, "wide", /*roomLabel*/ ctx[0].name.length > 3);
+			attr(div0, "class", "room-label-item__bar svelte-17nkflf");
+			attr(div1, "class", "room-label-item svelte-17nkflf");
+			set_style(div1, "z-index", /*roomLabel*/ ctx[0].zIndex, false);
+			set_style(div1, "transform", /*roomLabel*/ ctx[0].transform, false);
+			set_style(div1, "opacity", /*roomLabel*/ ctx[0].visible ? 1 : 0, false);
+		},
+		m(target, anchor) {
+			insert(target, div1, anchor);
+			append(div1, span);
+			append(span, t0);
+			append(div1, t1);
+			append(div1, div0);
+
+			if (!mounted) {
+				dispose = listen(span, "click", /*onClick*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*roomLabel*/ 1 && t0_value !== (t0_value = /*roomLabel*/ ctx[0].name + "")) set_data(t0, t0_value);
+
+			if (dirty & /*roomLabel*/ 1) {
+				toggle_class(span, "wide", /*roomLabel*/ ctx[0].name.length > 3);
+			}
+
+			if (dirty & /*roomLabel*/ 1) {
+				set_style(div1, "z-index", /*roomLabel*/ ctx[0].zIndex, false);
+			}
+
+			if (dirty & /*roomLabel*/ 1) {
+				set_style(div1, "transform", /*roomLabel*/ ctx[0].transform, false);
+			}
+
+			if (dirty & /*roomLabel*/ 1) {
+				set_style(div1, "opacity", /*roomLabel*/ ctx[0].visible ? 1 : 0, false);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div1);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { five } = $$props;
+	let { roomLabel } = $$props;
+
+	function onClick() {
+		five.setState({
+			panoIndex: roomLabel.panoIndex,
+			mode: 'Panorama',
+			longitude: roomLabel.longitude
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(2, five = $$props.five);
+		if ('roomLabel' in $$props) $$invalidate(0, roomLabel = $$props.roomLabel);
+	};
+
+	return [roomLabel, onClick, five];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { five: 2, roomLabel: 0 }, add_css);
+	}
+}
+
+export default Component;

package/libs/ModelRoomLabelPlugin/RoomLabelItems.js

@@ -0,0 +1,255 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	add_render_callback,
+	add_resize_listener,
+	append_styles,
+	attr,
+	check_outros,
+	create_component,
+	destroy_component,
+	detach,
+	element,
+	empty,
+	group_outros,
+	init,
+	insert,
+	mount_component,
+	outro_and_destroy_block,
+	safe_not_equal,
+	transition_in,
+	transition_out,
+	update_keyed_each
+} from "svelte/internal";
+
+import { onDestroy, onMount } from 'svelte';
+import { Raycaster, Vector3 } from 'three';
+import RoomLabelItem from './RoomLabelItem';
+
+function add_css(target) {
+	append_styles(target, "svelte-185yvaa", ".room-labels-container.svelte-185yvaa{width:100%;height:100%;position:relative;color:#fff}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[9] = list[i];
+	return child_ctx;
+}
+
+// (70:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
+function create_each_block(key_1, ctx) {
+	let first;
+	let roomlabelitem;
+	let current;
+
+	roomlabelitem = new RoomLabelItem({
+			props: {
+				roomLabel: /*roomLableItem*/ ctx[9],
+				five: /*five*/ ctx[1]
+			}
+		});
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			first = empty();
+			create_component(roomlabelitem.$$.fragment);
+			this.first = first;
+		},
+		m(target, anchor) {
+			insert(target, first, anchor);
+			mount_component(roomlabelitem, target, anchor);
+			current = true;
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			const roomlabelitem_changes = {};
+			if (dirty & /*roomLabels*/ 1) roomlabelitem_changes.roomLabel = /*roomLableItem*/ ctx[9];
+			if (dirty & /*five*/ 2) roomlabelitem_changes.five = /*five*/ ctx[1];
+			roomlabelitem.$set(roomlabelitem_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(roomlabelitem.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(roomlabelitem.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(first);
+			destroy_component(roomlabelitem, detaching);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let div_resize_listener;
+	let current;
+	let each_value = /*roomLabels*/ ctx[0];
+	const get_key = ctx => /*roomLableItem*/ ctx[9].id;
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		let child_ctx = get_each_context(ctx, each_value, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+	}
+
+	return {
+		c() {
+			div = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			attr(div, "class", "room-labels-container svelte-185yvaa");
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[4].call(div));
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[4].bind(div));
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*roomLabels, five*/ 3) {
+				each_value = /*roomLabels*/ ctx[0];
+				group_outros();
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block, null, get_each_context);
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+
+			for (let i = 0; i < each_value.length; i += 1) {
+				transition_in(each_blocks[i]);
+			}
+
+			current = true;
+		},
+		o(local) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				transition_out(each_blocks[i]);
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d();
+			}
+
+			div_resize_listener();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { five } = $$props;
+	let { roomLabels } = $$props;
+	let containerWidth;
+	let containerHeight;
+
+	function getLabelVisible(five, roomLabelItem) {
+		// 先看是不是在当前展示的楼层上
+		const isLabelInFloor = five.model.shownFloor === null || roomLabelItem.floorIndex === five.model.shownFloor;
+
+		if (!isLabelInFloor) return false;
+
+		// 再看是不是被模型遮挡
+		const raycaster = new Raycaster();
+
+		const cameraPosition = five.camera.position.clone();
+		const position = new Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+		const vectorDistance = position.distanceTo(cameraPosition);
+		raycaster.set(cameraPosition.clone(), position.clone().sub(cameraPosition).normalize());
+		const [intersection] = five.model.intersectRaycaster(raycaster);
+		if (intersection && intersection.distance + 1 < vectorDistance) return false;
+		return true;
+	}
+
+	function getLabelTransform(five, roomLabelItem) {
+		const position = new Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+		const mouse = position.clone().project(five.camera);
+		const xOffset = Math.ceil((mouse.x + 1) / 2 * containerWidth);
+		const yOffset = Math.ceil((-mouse.y + 1) / 2 * containerHeight);
+		return `translate(${xOffset}px, ${yOffset}px)`;
+	}
+
+	function getFormatedRoomLabels(five, labels) {
+		const newLabels = labels.map(roomLabelItem => {
+			// 计算是否可见，入股不可见，不会更新位置
+			const visible = getLabelVisible(five, roomLabelItem);
+
+			if (!visible) return { ...roomLabelItem, visible };
+
+			// 更新位置
+			const transform = getLabelTransform(five, roomLabelItem);
+
+			return { ...roomLabelItem, visible, transform };
+		});
+
+		const sortedRoomLabelItems = newLabels.filter(({ visible }) => visible).map(roomLabelItem => ({
+			roomLabelItem,
+			distance: new Vector3(...Object.values(roomLabelItem.position)).clone().distanceTo(five.camera.position)
+		})).sort((a, b) => a.distance - b.distance);
+
+		return newLabels.map(roomLabelItem => {
+			const sortIndex = sortedRoomLabelItems.findIndex(item => item.roomLabelItem.id === roomLabelItem.id);
+			if (sortIndex !== undefined) return { ...roomLabelItem, zIndex: sortIndex * 10 };
+			return roomLabelItem;
+		});
+	}
+
+	function onFiveCameraUpdate() {
+		$$invalidate(0, roomLabels = getFormatedRoomLabels(five, roomLabels));
+	}
+
+	five.on('cameraUpdate', onFiveCameraUpdate);
+	five.on('modelShownFloorChange', onFiveCameraUpdate);
+
+	onDestroy(() => {
+		five.off('cameraUpdate', onFiveCameraUpdate);
+		five.off('modelShownFloorChange', onFiveCameraUpdate);
+	});
+
+	onMount(() => {
+		onFiveCameraUpdate();
+	});
+
+	function div_elementresize_handler() {
+		containerWidth = this.clientWidth;
+		containerHeight = this.clientHeight;
+		$$invalidate(2, containerWidth);
+		$$invalidate(3, containerHeight);
+	}
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(1, five = $$props.five);
+		if ('roomLabels' in $$props) $$invalidate(0, roomLabels = $$props.roomLabels);
+	};
+
+	return [roomLabels, five, containerWidth, containerHeight, div_elementresize_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { five: 1, roomLabels: 0 }, add_css);
+	}
+}
+
+export default Component;