@realsee/dnalogel 2.0.0-alpha.9 → 2.0.0-beta.36

package/libs/ModelItemLabelPlugin/typings.d.ts

@@ -0,0 +1,56 @@
+import type { Subscribe } from "@realsee/five";
+import type { PluginEvent } from "./events.type";
+import type ItemLabelComponent from './ItemLabelComponent';
+export declare enum DISPLAY_STRATEGY_TYPE {
+    SMALL = "small",
+    MIDLLE = "middle",
+    LARGE = "large",
+    EXTRA_LARGE = "x-large"
+}
+export interface ModelItemLabelPluginParametersType {
+    modelOcclusionEnable?: boolean;
+    displayStrategyType?: Partial<DISPLAY_STRATEGY_TYPE>;
+}
+export interface ModelItemLabelPluginData {
+    model_item_labels: Readonly<{
+        id: string;
+        library: string;
+        name: string;
+        size: [number, number, number];
+        center: [number, number, number];
+        position: [number, number, number];
+        type: string[];
+        [key: string]: any;
+    }>[];
+}
+export interface ItemLabel {
+    id: string;
+    library: string;
+    name: string;
+    size: [number, number, number];
+    center: [number, number, number];
+    position: [number, number, number];
+    type: string[];
+    modelPosition: [number, number, number];
+    [key: string]: any;
+}
+export interface ModelItemLabelPluginExportReturnsType {
+    appendTo: (wrapper: Element) => void;
+    load: (data: ModelItemLabelPluginData) => void;
+    disable: () => void;
+    enable: () => void;
+    dispose: () => void;
+    hooks: Subscribe<PluginEvent>;
+}
+export interface ModelItemLabelPluginState {
+    container: HTMLDivElement;
+    data: ModelItemLabelPluginData | null;
+    enabled: boolean;
+    itemLabels: ItemLabel[];
+    wrapper: HTMLElement | null;
+    fiveModeEnabled: boolean;
+    app?: ItemLabelComponent | undefined;
+    hooks: Subscribe<PluginEvent>;
+    modelOcclusionEnable: boolean;
+    displayStrategyType: Partial<DISPLAY_STRATEGY_TYPE>;
+}

package/libs/ModelItemLabelPlugin/typings.js

@@ -0,0 +1,7 @@
+export var DISPLAY_STRATEGY_TYPE;
+(function (DISPLAY_STRATEGY_TYPE) {
+    DISPLAY_STRATEGY_TYPE["SMALL"] = "small";
+    DISPLAY_STRATEGY_TYPE["MIDLLE"] = "middle";
+    DISPLAY_STRATEGY_TYPE["LARGE"] = "large";
+    DISPLAY_STRATEGY_TYPE["EXTRA_LARGE"] = "x-large";
+})(DISPLAY_STRATEGY_TYPE || (DISPLAY_STRATEGY_TYPE = {}));

package/libs/ModelItemLabelPlugin/utils/parseData.d.ts

@@ -0,0 +1,3 @@
+import type { ModelItemLabelPluginData, ItemLabel } from '../typings';
+/** @description 转成内部所需数据 */
+export declare function parseModelItemLabelPluginData(data: ModelItemLabelPluginData): ItemLabel[];

package/libs/ModelItemLabelPlugin/utils/parseData.js

@@ -0,0 +1,4 @@
+/** @description 转成内部所需数据 */
+export function parseModelItemLabelPluginData(data) {
+    return data.model_item_labels.map(label => (Object.assign({ modelPosition: [label.position[0], label.position[1] + label.size[1], label.position[2]] }, label)));
+}

package/libs/ModelRoomLabelPlugin/Controller.js

@@ -1,14 +1,69 @@
 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) {
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "enabled", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "fiveModeEnabled", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "app", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: undefined
+        });
+        Object.defineProperty(this, "wrapper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "roomLabels", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: document.createElement('div')
+        });
+        /** 监听 Five Mode 变化
+         * @description
+         * Mode 不符合要求时，立刻消失，满足要求时，需要等待动画结束再展示
+         */
+        Object.defineProperty(this, "onFiveModeChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (mode) => {
+                if (mode !== 'Floorplan') {
+                    this.fiveModeEnabled = false;
+                    this.render();
+                    return;
+                }
+                this.five.once('initAnimationEnded', () => {
+                    this.fiveModeEnabled = this.five.currentMode === 'Floorplan';
+                    this.render();
+                });
+            }
+        });
         this.five = five;
         this.fiveModeEnabled = this.five.currentMode === 'Floorplan';
         // init container style
@@ -19,6 +74,7 @@ export class ModelRoomLabelController {
         this.container.style.pointerEvents = 'none';
         this.container.style.left = '0';
         this.container.style.top = '0';
+        this.container.style.zIndex = '5';
         // five listener
         this.five.once('dispose', () => this.dispose());
         this.five.on('modeChange', this.onFiveModeChange);
@@ -61,26 +117,12 @@ export class ModelRoomLabelController {
         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() {
+        var _a;
         if (!this.wrapper)
             return;
         if (!this.enabled || !this.fiveModeEnabled) {
-            this.app?.$destroy();
+            (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
             this.app = undefined;
             return;
         }

package/libs/ModelRoomLabelPlugin/RoomLabelItems.js

@@ -11,6 +11,7 @@ import {
 	detach,
 	element,
 	empty,
+	globals,
 	group_outros,
 	init,
 	insert,
@@ -22,7 +23,8 @@ import {
 	update_keyed_each
 } from "svelte/internal";
 
-import { onDestroy, onMount } from 'svelte';
+const { Map: Map_1 } = globals;
+import { onDestroy } from 'svelte';
 import { Raycaster, Vector3 } from 'three';
 import RoomLabelItem from './RoomLabelItem';
 
@@ -32,11 +34,11 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[9] = list[i];
+	child_ctx[12] = list[i];
 	return child_ctx;
 }
 
-// (68:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
+// (82:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let roomlabelitem;
@@ -44,7 +46,7 @@ function create_each_block(key_1, ctx) {
 
 	roomlabelitem = new RoomLabelItem({
 			props: {
-				roomLabel: /*roomLableItem*/ ctx[9],
+				roomLabel: /*roomLableItem*/ ctx[12],
 				five: /*five*/ ctx[1]
 			}
 		});
@@ -65,7 +67,7 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const roomlabelitem_changes = {};
-			if (dirty & /*roomLabels*/ 1) roomlabelitem_changes.roomLabel = /*roomLableItem*/ ctx[9];
+			if (dirty & /*roomLabels*/ 1) roomlabelitem_changes.roomLabel = /*roomLableItem*/ ctx[12];
 			if (dirty & /*five*/ 2) roomlabelitem_changes.five = /*five*/ ctx[1];
 			roomlabelitem.$set(roomlabelitem_changes);
 		},
@@ -88,11 +90,11 @@ function create_each_block(key_1, ctx) {
 function create_fragment(ctx) {
 	let div;
 	let each_blocks = [];
-	let each_1_lookup = new Map();
+	let each_1_lookup = new Map_1();
 	let div_resize_listener;
 	let current;
 	let each_value = /*roomLabels*/ ctx[0];
-	const get_key = ctx => /*roomLableItem*/ ctx[9].id;
+	const get_key = ctx => /*roomLableItem*/ ctx[12].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -109,7 +111,7 @@ function create_fragment(ctx) {
 			}
 
 			attr(div, "class", "room-labels-container svelte-185yvaa");
-			add_render_callback(() => /*div_elementresize_handler*/ ctx[4].call(div));
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[6].call(div));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -118,7 +120,7 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[4].bind(div));
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[6].bind(div));
 			current = true;
 		},
 		p(ctx, [dirty]) {
@@ -158,22 +160,17 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
+	let rendererSize;
 	let { five } = $$props;
 	let { roomLabels } = $$props;
 	let containerWidth;
 	let containerHeight;
+	let shownFloor = null;
 
-	function getLabelVisible(five, roomLabelItem) {
-		// 先看是不是在当前展示的楼层上
-		const isLabelInFloor = five.model.shownFloor === null || roomLabelItem.floorIndex === five.model.shownFloor;
-
-		if (!isLabelInFloor) return false;
-
-		// 再看是不是被模型遮挡
+	function getLabelVisible(item) {
 		const raycaster = new Raycaster();
-
 		const cameraPosition = five.camera.position.clone();
-		const position = new Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+		const position = new Vector3(item.position.x, item.position.y, item.position.z);
 		const vectorDistance = position.distanceTo(cameraPosition);
 		raycaster.set(cameraPosition.clone(), position.clone().sub(cameraPosition).normalize());
 		const [intersection] = five.model.intersectRaycaster(raycaster);
@@ -181,51 +178,60 @@ function instance($$self, $$props, $$invalidate) {
 		return true;
 	}
 
-	function getLabelTransform(five, roomLabelItem) {
-		const position = new Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+	function getLabelTransform(item, rendererSize) {
+		const position = new Vector3(item.position.x, item.position.y, item.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);
+		const xOffset = Math.ceil((mouse.x + 1) / 2 * rendererSize.x);
+		const yOffset = Math.ceil((-mouse.y + 1) / 2 * rendererSize.y);
 		return `translate(${xOffset}px, ${yOffset}px)`;
 	}
 
-	function getFormatedRoomLabels(five, labels) {
-		const newLabels = labels.map(roomLabelItem => {
-			// 计算是否可见，入股不可见，不会更新位置
-			const visible = getLabelVisible(five, roomLabelItem);
+	function getFormatedRoomLabels(rendererSize) {
+		// 因为 item distance 需要重复计算，所以缓存一下
+		const distanceMap = new Map();
+
+		function getItemDistance(item) {
+			const cacheDistance = distanceMap.get(item.id);
+			if (cacheDistance) return cacheDistance;
+			const { x, y, z } = item.position;
+			const distance = new Vector3(x, y, z).clone().distanceTo(five.camera.position);
+			distanceMap.set(item.id, distance);
+			return distance;
+		}
 
-			if (!visible) return { ...roomLabelItem, visible };
+		const formatedItems = roomLabels.map(item => {
+			const visible = getLabelVisible(item);
 
-			// 更新位置
-			const transform = getLabelTransform(five, roomLabelItem);
+			const transform = visible
+			? getLabelTransform(item, rendererSize)
+			: item.transform;
 
-			return { ...roomLabelItem, visible, transform };
-		});
+			const itemDistance = getItemDistance(item);
 
-		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);
+			// visible === true 的 item 中，distance 比自己小的 item 个数
+			const minItemLen = roomLabels.filter(item => item.visible && getItemDistance(item) < itemDistance).length;
 
-		return newLabels.map(roomLabelItem => {
-			const sortIndex = sortedRoomLabelItems.findIndex(item => item.roomLabelItem.id === roomLabelItem.id);
-			if (sortIndex !== undefined) return { ...roomLabelItem, zIndex: sortIndex * 10 };
-			return roomLabelItem;
+			const zIndex = minItemLen * 10;
+			return Object.assign(Object.assign({}, item), { visible, transform, zIndex });
 		});
+
+		return formatedItems;
 	}
 
 	function onFiveCameraUpdate() {
-		$$invalidate(0, roomLabels = getFormatedRoomLabels(five, roomLabels));
+		$$invalidate(0, roomLabels = getFormatedRoomLabels(rendererSize));
+	}
+
+	function onFiveModelShownFloorChange(floorIndex) {
+		$$invalidate(4, shownFloor = floorIndex);
 	}
 
 	five.on('cameraUpdate', onFiveCameraUpdate);
+	five.on('modelShownFloorChange', onFiveModelShownFloorChange);
 
 	onDestroy(() => {
 		five.off('cameraUpdate', onFiveCameraUpdate);
-	});
-
-	onMount(() => {
-		onFiveCameraUpdate();
+		five.off('modelShownFloorChange', onFiveModelShownFloorChange);
 	});
 
 	function div_elementresize_handler() {
@@ -240,7 +246,39 @@ function instance($$self, $$props, $$invalidate) {
 		if ('roomLabels' in $$props) $$invalidate(0, roomLabels = $$props.roomLabels);
 	};
 
-	return [roomLabels, five, containerWidth, containerHeight, div_elementresize_handler];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*containerWidth, containerHeight*/ 12) {
+			$: $$invalidate(5, rendererSize = { x: containerWidth, y: containerHeight });
+		}
+
+		if ($$self.$$.dirty & /*rendererSize*/ 32) {
+			$: {
+				// rendererSize 变化时，触发 reRender
+				$$invalidate(0, roomLabels = getFormatedRoomLabels(rendererSize));
+			}
+		}
+
+		if ($$self.$$.dirty & /*roomLabels, shownFloor*/ 17) {
+			$: {
+				// shownFloor 变化时，更新 item visible
+				$$invalidate(0, roomLabels = roomLabels.map(item => {
+					const isLabelInFloor = shownFloor === null || item.floorIndex === shownFloor;
+					const visible = isLabelInFloor ? item.visible : false;
+					return Object.assign(Object.assign({}, item), { visible });
+				}));
+			}
+		}
+	};
+
+	return [
+		roomLabels,
+		five,
+		containerWidth,
+		containerHeight,
+		shownFloor,
+		rendererSize,
+		div_elementresize_handler
+	];
 }
 
 class Component extends SvelteComponent {

package/libs/ModelRoomLabelPlugin/utils/parseData.d.ts

@@ -1,3 +1,3 @@
-import { ModelRoomLabelPluginData, RoomLabel } from '../typings';
+import type { ModelRoomLabelPluginData, RoomLabel } from '../typings';
 /** @description 下划线转驼峰 */
 export declare function parseModelRoomLabelPluginData(data: ModelRoomLabelPluginData): RoomLabel[];

package/libs/ModelSimulationPlugin/index.d.ts

@@ -0,0 +1,33 @@
+import type { FivePlugin } from '@realsee/five';
+export interface ModelSimulationPluginExportType {
+    enable: () => void;
+    disable: () => void;
+    play: () => void;
+    dispose: () => void;
+    init: () => void;
+}
+export interface ModelSimulationPluginParameterType {
+    simulationWorkData: ModelSimulationPluginWorkDataType;
+    simulationOptions: ModelSimulationPluginOptionsType;
+}
+export interface ModelSimulationPluginWorkDataType {
+    resourceUrl: string;
+    colorMapPath: string;
+    width: number;
+    height: number;
+    depth: number;
+    origin: number[];
+    step: number;
+    maxT: number;
+    minT: number;
+    maxKeyframes: number;
+    houseHeight: number;
+}
+export interface ModelSimulationPluginOptionsType {
+    globalOpacity: number;
+    boundingOpacity: number;
+    boundingOffset?: number;
+    keyFrameRate?: number;
+}
+declare const ModelSimulationPlugin: FivePlugin<ModelSimulationPluginParameterType, ModelSimulationPluginExportType>;
+export default ModelSimulationPlugin;

package/libs/ModelSimulationPlugin/index.js

@@ -0,0 +1,166 @@
+import * as THREE from 'three';
+import vertexShader from './shaders/vertex';
+import fragmentShader from './shaders/fragment';
+import tap from '../shared-utils/tap';
+const houseOutLinePath = [
+    [-3.089, -4.219], [-4.834, -4.219],
+    [-8.197, -4.219], [-10.31, -4.219],
+    [-10.31, -1.002], [-10.31, 0.835],
+    [-10.31, 3.927], [-11.237, 3.927],
+    [-11.237, 5.45], [-8.104, 5.45],
+    [-8.104, 4.557], [-6.914, 4.557],
+    [-6.244, 4.557], [-6.244, 5.436],
+    [-3.78, 5.436], [-0.356, 5.436],
+    [0.286, 5.436], [0.286, 4.073],
+    [0.286, 0.395], [2.31, 0.395],
+    [2.31, -1.323], [2.31, -4.199],
+    [0.468, -4.199], [0.468, -3.547],
+    [-2.969, -3.547], [-3.089, -3.547]
+];
+const defaultKeyframes = 50;
+const defaultBoundingOffset = 0.2;
+let isTexutreReady = false;
+const ModelSimulationPlugin = (five, options) => {
+    let heatTexutres = [];
+    let geometryTexture = null;
+    let simulationMaterial = null;
+    let boundingMaterial = null;
+    let boundingMesh = null;
+    let originMaterial = null;
+    const enable = () => {
+    };
+    const disable = () => {
+        five.model.setMaterial(originMaterial);
+    };
+    const createBounding = (path, material) => {
+        const shape = tap(new THREE.Shape(), shape => {
+            shape.moveTo(path[path.length - 1][0], path[path.length - 1][1]);
+            path.forEach(xz => shape.lineTo(xz[0], xz[1]));
+        });
+        const settings = {
+            depth: options.simulationWorkData.houseHeight + 2 * options.simulationOptions.boundingOffset ?? defaultBoundingOffset,
+            bevelEnabled: false,
+        };
+        const geometry = new THREE.ExtrudeGeometry(shape, settings);
+        boundingMesh = new THREE.Mesh(geometry, material);
+        boundingMesh.rotateX(Math.PI / 2);
+        boundingMesh.translateZ(-options.simulationWorkData.houseHeight - options.simulationOptions.boundingOffset);
+        boundingMesh.updateMatrix();
+        boundingMesh.updateMatrixWorld();
+        return boundingMesh;
+    };
+    const createSimulationMaterial = (isBounding) => {
+        const simulationMaterial = new THREE.RawShaderMaterial({
+            uniforms: {
+                heatMap: { value: new THREE.Texture() },
+                geometryMap: { value: new THREE.Texture() },
+                colorMap: { value: new THREE.TextureLoader().load(options.simulationWorkData.colorMapPath) },
+                bboxMin: { value: new THREE.Vector3().fromArray(options.simulationWorkData.origin) },
+                bboxMax: { value: new THREE.Vector3().fromArray(options.simulationWorkData.origin).add(new THREE.Vector3(options.simulationWorkData.width, options.simulationWorkData.height, options.simulationWorkData.depth).multiplyScalar(options.simulationWorkData.step)) },
+                step: { value: options.simulationWorkData.step },
+                maxT: { value: options.simulationWorkData.maxT },
+                minT: { value: options.simulationWorkData.minT },
+                opacity: { value: isBounding ? options.simulationOptions.boundingOpacity : options.simulationOptions.globalOpacity }
+            },
+            vertexShader,
+            fragmentShader,
+        });
+        if (isBounding)
+            simulationMaterial.transparent = true;
+        return simulationMaterial;
+    };
+    const create3DTextureTask = (url) => {
+        return fetch(url)
+            .then(res => {
+            return res.arrayBuffer();
+        })
+            .then(res => {
+            const texture = new THREE.DataTexture3D(new Float32Array(res), options.simulationWorkData.width, options.simulationWorkData.height, options.simulationWorkData.depth);
+            texture.type = THREE.FloatType;
+            texture.format = THREE.RedFormat;
+            texture.minFilter = THREE.LinearMipmapLinearFilter;
+            texture.magFilter = THREE.LinearFilter;
+            texture.generateMipmaps = true;
+            texture.unpackAlignment = 1;
+            return texture;
+        })
+            .catch(err => console.error("拉取三维纹理数据时发生错误"));
+    };
+    const init = () => {
+        simulationMaterial = createSimulationMaterial(false);
+        boundingMaterial = createSimulationMaterial(true);
+        //加载外bounding
+        five.scene.add(createBounding(houseOutLinePath, boundingMaterial));
+        //缓存原来的材质
+        originMaterial = five.model.getMaterial();
+        five.model.traverse(obj => {
+            if (!(obj instanceof THREE.Mesh))
+                return;
+            if (Array.isArray(obj.material)) {
+                obj.material = obj.material.map(_mtl => simulationMaterial);
+            }
+            else {
+                obj.material = simulationMaterial;
+            }
+        });
+        //温度数据
+        // const geometryTaskUrl = options.resourceUrl + 'geometry.vti'
+        const heatTextureTasks = [];
+        for (let i = 0; i < options.simulationWorkData.maxKeyframes; i++) {
+            const fileUrl = options.simulationWorkData.resourceUrl + i + '.vti';
+            heatTextureTasks.push(create3DTextureTask(fileUrl));
+        }
+        // //有效值数据
+        // create3DTextureTask(geometryTaskUrl)
+        // 	.then(texture => {
+        // 		simulationMaterial.uniforms.geometryMap.value = texture
+        // 		boundingMaterial.uniforms.geometryMap.value = texture
+        // 	})
+        // 	.catch(err => console.error("geometry texture loading failed"))
+        //加载首帧进行初始化
+        create3DTextureTask(options.simulationWorkData.resourceUrl + '0.vti')
+            .then(texture => {
+            simulationMaterial.uniforms.heatMap.value = texture;
+            boundingMaterial.uniforms.heatMap.value = texture;
+            five.needsRender = true;
+        })
+            .catch(err => console.error("loading textures failed"));
+        //加载全部
+        Promise.all(heatTextureTasks)
+            .then(textures => {
+            //缓存结果
+            isTexutreReady = true;
+            console.log("ready");
+            heatTexutres = textures;
+        })
+            .catch(err => console.error("loading textures failed"));
+    };
+    const play = () => {
+        if (!isTexutreReady)
+            throw new Error("textures are not ready yet,plz try again later");
+        let timeCount = 0;
+        const stop = setInterval(() => {
+            if (timeCount < options.simulationWorkData.maxKeyframes) {
+                simulationMaterial.uniforms.heatMap.value = heatTexutres[timeCount];
+                boundingMaterial.uniforms.heatMap.value = heatTexutres[timeCount];
+                timeCount++;
+                five.needsRender = true;
+            }
+        }, 1000 / options.simulationOptions.keyFrameRate ?? defaultKeyframes);
+    };
+    const dispose = () => {
+        simulationMaterial.dispose();
+        boundingMaterial.dispose();
+        boundingMesh.geometry.dispose();
+        geometryTexture.dispose();
+        heatTexutres.forEach(texture => texture.dispose());
+    };
+    return {
+        enable,
+        disable,
+        play,
+        init,
+        dispose
+    };
+};
+export default ModelSimulationPlugin;

package/libs/ModelSimulationPlugin/shaders/fragment.d.ts

@@ -0,0 +1,2 @@
+declare var _default: "#version 300 es\n#define MAX_STEPS 50\nprecision highp float;\nprecision highp sampler3D;\n\nuniform sampler3D heatMap;\nuniform sampler3D geometryMap;\nuniform sampler2D colorMap;\n\nuniform vec3 bboxMin;\nuniform vec3 bboxMax;\nuniform float step;\nuniform float minT;\nuniform float maxT;\nuniform float opacity;\n\nvec4 LinearTosRGB( in vec4 value ) {\n\treturn vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );\n}\nvec4 linearToOutputTexel( vec4 value ) { return LinearTosRGB( value ); }\n\n\nfloat getHeatByLegalPos(vec3 pos){\n\tfloat geometryFactor = texture(geometryMap,pos).r;\n\tfloat legalFactor = clamp(geometryFactor,0.0,1.0);\n\treturn texture(heatMap,pos).r * legalFactor;\n}\n\nfloat sampleOc(vec3 pos){\n\t//平滑滤波步长\n\t//todo:可以作为define传入的外部常量还是直接传\n\tfloat step_x = step / (bboxMax.x - bboxMin.x) * 0.5;\n\tfloat step_y = step / (bboxMax.y - bboxMin.y) * 0.5;\n\tfloat step_z = step / (bboxMax.z - bboxMin.z) * 0.5;\n\tvec3 p1 = pos + vec3(step_x,step_y,step_z);\n\tvec3 p2 = pos + vec3(step_x,-step_y,step_z);\n\tvec3 p3 = pos + vec3(step_x,step_y,-step_z);\n\tvec3 p4 = pos + vec3(step_x,-step_y,-step_z);\n\tvec3 p5 = pos + vec3(-step_x,step_y,step_z);\n\tvec3 p6 = pos + vec3(-step_x,-step_y,step_z);\n\tvec3 p7 = pos + vec3(-step_x,step_y,-step_z);\n\tvec3 p8 = pos + vec3(-step_x,-step_y,-step_z);\n\n\treturn (getHeatByLegalPos(p1) + getHeatByLegalPos(p2) + getHeatByLegalPos(p3) + getHeatByLegalPos(p4) + getHeatByLegalPos(p5) + getHeatByLegalPos(p6) + getHeatByLegalPos(p7) + getHeatByLegalPos(p8)) * 0.125;\n\n}\n\n//考虑到有效仿真值连通域在三维空间中是封闭流形，这里直接按照normal方向搜索，牺牲一定精度，以保证展示效果\nfloat sampleByNormal(vec3 normal, vec3 pos){\n\tfloat searchStep = step ;\n\tvec3 currentPos = pos;\n\tfor (int iter=0; iter < MAX_STEPS; iter++) {\n\t\tif(iter >= MAX_STEPS){\n\t\t\treturn texture(heatMap,currentPos).r;\n\t\t}\n\t\tif(texture(geometryMap,currentPos).r < 0.5){\n\t\t\tcurrentPos += normal * searchStep;\n\t\t}else{\n\t\t\treturn texture(heatMap,currentPos).r;\n\t\t}\n\t}\n}\n\nfloat sample1(vec3 normal, vec3 pos){\n\treturn texture(heatMap,pos).r;\n}\n\nin vec2 vUv;\nin vec3 vPosition;\nin vec3 vNormal;\nout highp vec4 pc_fragColor;\n\n\nfloat normalizeHeat(float t){\n\tfloat _t = clamp(t,minT,maxT);\n\treturn (_t - minT)/(maxT - minT);\n}\n\nvec3 posToTexCood(vec3 pos){\n\tfloat x = (pos.x - bboxMin.x) / (bboxMax.x - bboxMin.x);\n\tfloat y = (pos.y - bboxMin.y) / (bboxMax.y - bboxMin.y);\n\tfloat z = (pos.z - bboxMin.z) / (bboxMax.z - bboxMin.z);\n\treturn vec3(x,y,z);\n}\n\n\nvoid main() {\n\tvec3 texCood = posToTexCood(vPosition);\n\t// float color = sampleByNormal(vNormal,texCood);\n\tfloat color = sample1(vNormal,texCood);\n\tfloat normalColor= normalizeHeat(color);\n\tvec4 colorMapColor = texture(colorMap,vec2(normalColor,0.2));\n\tpc_fragColor = vec4(colorMapColor.xyz,opacity);\n\t// pc_fragColor = linearToOutputTexel(vec4(colorMapColor.xyz,opacity));\n\t}\n";
+export default _default;