fl-web-component 2.1.1-beta.0 → 2.1.1-beta.10

package/packages/components/com-graphics/index.vue

@@ -165,7 +165,7 @@ import { onContextHandle } from './component/context';
 
 const isDebug = process.env.NODE_ENV !== 'production' || process.env.VUE_APP_IS_WATCH === true;
 // const isDebug = false;
-const COLLISION_PENETRATION_EPSILON = 10;
+const COLLISION_PENETRATION_EPSILON = 1;
 const COLLISION_OBB_AXIS_EPSILON = 1e-8;
 const COLLISION_DEBUG_GROUP_NAME = '__collision_obb_debug_group__';
 
@@ -215,7 +215,9 @@ export default {
         isPaused: false,
       },
       isolateMode: false,
-      collisionObbDebugEnabled: true,
+      sceneBoundingBoxDebugEnabled: false,
+      // collisionObbDebugEnabled: isDebug,
+      collisionObbDebugEnabled: false,
     };
   },
   watch: {
@@ -224,6 +226,13 @@ export default {
         this.detachTransformControls();
       }
     },
+    sceneBoundingBoxDebugEnabled(val) {
+      if (val) {
+        this.refreshSceneBoundingBoxHelper(true);
+      } else {
+        this.hideSceneBoundingBox();
+      }
+    },
   },
   beforeCreate() {
     this.spaceUp = true;
@@ -360,11 +369,16 @@ export default {
           wheelTimeout: null,
         },
       },
+      cameraControlMoveObserver: {
+        enabled: false,
+        interval: 500,
+      },
       streamLoader: null,
       // isPerformingInitialCentering: false, // 标记是否正在执行初始居中
       isObserverEnabled: true, // 标记相机变更观察者是否启用
       sceneBoxes: new Map(),
       documentModelIds: new Map(),
+      documentSceneBoundsIds: new Map(),
       outlineInstanceProxyMap: new Map(),
       occlusionWorker: null,
       occlusionWorkerRequestMap: new Map(),
@@ -1469,71 +1483,108 @@ export default {
     updateGlobalSceneBoundingBox() {
       const state = this.noObserver || {};
       const occScene = state.occlusionState && state.occlusionState._occScene;
+      const mergedBox = new this.THREE.Box3();
+      let hasValidBox = false;
+      const mergeBox = box => {
+        if (!box || !box.isBox3 || box.isEmpty()) return;
+        if (!hasValidBox) {
+          mergedBox.copy(box);
+          hasValidBox = true;
+          return;
+        }
+        mergedBox.union(box);
+      };
 
-      // 优先使用由 boxIndex 构建出的离屏全场景，作为整体居中与 home 的统一范围
+      // 离屏遮挡场景只包含参与遮挡的模型，需要继续合并场景范围索引中的二维图形范围。
       if (occScene && occScene.children && occScene.children.length > 0) {
         const occBox = new this.THREE.Box3().setFromObject(occScene);
-        if (!occBox.isEmpty()) {
-          this.sceneBoundingBox = occBox;
-          return this.sceneBoundingBox;
-        }
+        mergeBox(occBox);
       }
 
-      // 离屏场景尚未完成时，回退到 boxIndex 联合包围盒，确保每次 add boxIndex 都能更新全场景范围
-      if (this._boxIndex && this._boxIndex.size > 0) {
-        let minX = Infinity,
-          minY = Infinity,
-          minZ = Infinity;
-        let maxX = -Infinity,
-          maxY = -Infinity,
-          maxZ = -Infinity;
-        this._boxIndex.forEach(box => {
-          if (!box || !box.isBox3 || box.isEmpty()) return;
-          const mn = box.min;
-          const mx = box.max;
-          if (mn.x < minX) minX = mn.x;
-          if (mn.y < minY) minY = mn.y;
-          if (mn.z < minZ) minZ = mn.z;
-          if (mx.x > maxX) maxX = mx.x;
-          if (mx.y > maxY) maxY = mx.y;
-          if (mx.z > maxZ) maxZ = mx.z;
+      // sceneBoundsIndex 包含二维和三维图形，是全场景 dolly 距离的主要范围来源。
+      if (this._sceneBoundsIndex && this._sceneBoundsIndex.size > 0) {
+        this._sceneBoundsIndex.forEach(box => {
+          mergeBox(box);
         });
-        if (
-          Number.isFinite(minX) &&
-          Number.isFinite(minY) &&
-          Number.isFinite(minZ) &&
-          Number.isFinite(maxX) &&
-          Number.isFinite(maxY) &&
-          Number.isFinite(maxZ)
-        ) {
-          this.sceneBoundingBox = new this.THREE.Box3(
-            new this.THREE.Vector3(minX, minY, minZ),
-            new this.THREE.Vector3(maxX, maxY, maxZ)
-          );
-          return this.sceneBoundingBox;
-        }
       }
 
       const boxes = Array.from((state.sceneBoxes && state.sceneBoxes.values()) || []);
       if (boxes.length > 0) {
-        const firstBox = boxes[0].clone();
-        for (let i = 1; i < boxes.length; i++) {
-          firstBox.union(boxes[i]);
+        for (let i = 0; i < boxes.length; i++) {
+          mergeBox(boxes[i]);
         }
-        this.sceneBoundingBox = firstBox;
+      }
+
+      if (hasValidBox) {
+        this.sceneBoundingBox = mergedBox;
+        this.refreshSceneBoundingBoxHelper(this.sceneBoundingBoxDebugEnabled);
         return this.sceneBoundingBox;
       }
 
       this.sceneBoundingBox = new this.THREE.Box3();
+      this.refreshSceneBoundingBoxHelper(this.sceneBoundingBoxDebugEnabled);
       return this.sceneBoundingBox;
     },
+    upsertIndexedBox(indexMap, modelId, box) {
+      if (!indexMap || !modelId || !box || !box.isBox3) return null;
+      const key = String(modelId);
+      const existingBox = indexMap.get(key);
+      if (!existingBox) {
+        indexMap.set(key, box);
+        return box;
+      }
+      existingBox.union(box);
+      return existingBox;
+    },
+    mergeModelBoxUserData(targetBox, sourceUserData) {
+      if (!targetBox || !sourceUserData) return;
+      if (!targetBox.userData) {
+        targetBox.userData = sourceUserData;
+        return;
+      }
+
+      const targetUserData = targetBox.userData;
+      targetUserData.visible = targetUserData.visible !== false || sourceUserData.visible !== false;
+      targetUserData.sourceVisible =
+        targetUserData.sourceVisible !== false || sourceUserData.sourceVisible !== false;
+      targetUserData.transparent = !!targetUserData.transparent && !!sourceUserData.transparent;
+      targetUserData.mergedBoxCount = (targetUserData.mergedBoxCount || 1) + 1;
+      // 同一模型包含多个图元时，单个图元的遮挡代理不再可靠，改由视锥体合并盒兜底加载。
+      targetUserData.occlusionEnabled = false;
+
+      const targetObbs = Array.isArray(targetUserData.collisionObbs)
+        ? targetUserData.collisionObbs
+        : [];
+      const sourceObbs = Array.isArray(sourceUserData.collisionObbs)
+        ? sourceUserData.collisionObbs
+        : [];
+      if (sourceObbs.length > 0) {
+        targetUserData.collisionObbs = targetObbs.concat(sourceObbs);
+      }
+    },
+    upsertModelBox(modelId, box) {
+      if (!this._boxIndex || !modelId || !box || !box.isBox3) return;
+      const key = String(modelId);
+      const existingBox = this._boxIndex.get(key);
+      if (!existingBox) {
+        this._boxIndex.set(key, box);
+        return;
+      }
+      existingBox.union(box);
+      this.mergeModelBoxUserData(existingBox, box.userData);
+    },
     setBoxIndex(boxJson, documentId, isAdd = true) {
       if (!this._boxIndex) this._boxIndex = new Map();
+      if (!this._sceneBoundsIndex) this._sceneBoundsIndex = new Map();
       if (!documentId) {
         this._boxIndex.clear();
+        this._sceneBoundsIndex.clear();
         if (this.noObserver && this.noObserver.documentModelIds) {
           this.noObserver.documentModelIds.clear();
         }
+        if (this.noObserver && this.noObserver.documentSceneBoundsIds) {
+          this.noObserver.documentSceneBoundsIds.clear();
+        }
         this.hasExecutedCentering = false;
         this.buildOctreeFromBoxIndex();
         return;
@@ -1542,19 +1593,35 @@ export default {
       if (isAdd && boxJson) {
         const arr = boxJson ? boxJson : [];
         const modelIds = new Set();
+        const sceneBoundIds = new Set();
         const validGeomTypes = new Set(Object.values(GEOM_TYPES));
         for (let i = 0; i < arr.length; i++) {
           const it = arr[i];
           if (!validGeomTypes.has(it.geomType)) {
             continue;
           }
-          if (it.obb.length == 0) {
+          const minSource = it.min;
+          const maxSource = it.max;
+          const hasValidMinMax =
+            minSource &&
+            maxSource &&
+            minSource.length >= 3 &&
+            maxSource.length >= 3 &&
+            Number.isFinite(minSource[0]) &&
+            Number.isFinite(minSource[1]) &&
+            Number.isFinite(minSource[2]) &&
+            Number.isFinite(maxSource[0]) &&
+            Number.isFinite(maxSource[1]) &&
+            Number.isFinite(maxSource[2]);
+          if (!hasValidMinMax) {
             continue;
           }
+          const obbData = it.obb || [];
+          const modelId = String(it.id);
 
           // 使用新的 min/max 数据结构
-          const min = new this.THREE.Vector3(it.min[0], it.min[1], it.min[2]);
-          const max = new this.THREE.Vector3(it.max[0], it.max[1], it.max[2]);
+          const min = new this.THREE.Vector3(minSource[0], minSource[1], minSource[2]);
+          const max = new this.THREE.Vector3(maxSource[0], maxSource[1], maxSource[2]);
 
           const sourceBox = new this.THREE.Box3(min.clone(), max.clone());
           // 八叉树仍使用 AABB 粗筛，最终碰撞使用 sourceBox 派生的 OBB 精筛
@@ -1588,10 +1655,18 @@ export default {
             boxThree.applyMatrix4(collisionMatrix);
           }
 
+          this.upsertIndexedBox(this._sceneBoundsIndex, modelId, boxThree.clone());
+          sceneBoundIds.add(modelId);
+
+          // 没有 OBB 数据的二维图形只参与全场景范围，不纳入碰撞和遮挡索引。
+          if (obbData.length === 0) {
+            continue;
+          }
+
           const userData = {
             flag: it.flag || 1, // 默认为 1
             geomType: it.geomType,
-            obbData: it.obb, // 存储原始 OBB 数据
+            obbData, // 存储原始 OBB 数据
             transparent: it.transp > 0,
             sourceVisible: it.visible === false ? false : true,
             visible: it.visible === false ? false : true, // 默认显示
@@ -1605,8 +1680,7 @@ export default {
             // userData.matrix = new this.THREE.Matrix4().identity();
           }
           // 如果是 flag=3，解析并存储中心点、半轴长、旋转矩阵
-          else if (it.flag === 3 && it.obb && it.obb.length === 15) {
-            const obbData = it.obb;
+          else if (it.flag === 3 && obbData.length === 15) {
             const center = new this.THREE.Vector3(obbData[0], obbData[1], obbData[2]);
             const halfSize = new this.THREE.Vector3(obbData[3], obbData[4], obbData[5]);
             const rotation = new this.THREE.Matrix3().fromArray(obbData.slice(6, 15));
@@ -1636,13 +1710,13 @@ export default {
             userData.collisionObbs = [collisionObb];
           }
           // 如果是 flag=2，解析并存储多个子包围盒 (min, max)
-          else if (it.flag === 2 && it.obb && it.obb.length > 0) {
+          else if (it.flag === 2 && obbData.length > 0) {
             const subBoxes = [];
             const collisionObbs = [];
-            for (let k = 0; k < it.obb.length; k += 6) {
-              if (k + 5 < it.obb.length) {
-                const min = new this.THREE.Vector3(it.obb[k], it.obb[k + 1], it.obb[k + 2]);
-                const max = new this.THREE.Vector3(it.obb[k + 3], it.obb[k + 4], it.obb[k + 5]);
+            for (let k = 0; k < obbData.length; k += 6) {
+              if (k + 5 < obbData.length) {
+                const min = new this.THREE.Vector3(obbData[k], obbData[k + 1], obbData[k + 2]);
+                const max = new this.THREE.Vector3(obbData[k + 3], obbData[k + 4], obbData[k + 5]);
                 subBoxes.push({ min, max });
 
                 const subBox = new this.THREE.Box3(min.clone(), max.clone());
@@ -1669,11 +1743,11 @@ export default {
 
           boxThree.userData = userData;
 
-          const modelId = String(it.id);
-          this._boxIndex.set(modelId, boxThree);
+          this.upsertModelBox(modelId, boxThree);
           modelIds.add(modelId);
         }
         this.noObserver.documentModelIds.set(documentId, modelIds);
+        this.noObserver.documentSceneBoundsIds.set(documentId, sceneBoundIds);
       } else {
         const modelIds = this.noObserver.documentModelIds.get(documentId);
         if (modelIds) {
@@ -1687,6 +1761,15 @@ export default {
             this.hasExecutedCentering = false;
           }
         }
+        const sceneBoundIds =
+          this.noObserver.documentSceneBoundsIds &&
+          this.noObserver.documentSceneBoundsIds.get(documentId);
+        if (sceneBoundIds) {
+          sceneBoundIds.forEach(id => {
+            this._sceneBoundsIndex.delete(id);
+          });
+          this.noObserver.documentSceneBoundsIds.delete(documentId);
+        }
       }
       this.buildOctreeFromBoxIndex();
       this.refreshCollisionObbDebug();
@@ -1703,7 +1786,9 @@ export default {
         this.sceneBoundingBox.isEmpty()
       )
         return;
-      if (!this._boxIndex || this._boxIndex.size === 0) return;
+      const hasBoxIndex = this._boxIndex && this._boxIndex.size > 0;
+      const hasSceneBoundsIndex = this._sceneBoundsIndex && this._sceneBoundsIndex.size > 0;
+      if (!hasBoxIndex && !hasSceneBoundsIndex) return;
 
       this.smartModelCenter(this.sceneBoundingBox, 0);
     },
@@ -1805,6 +1890,53 @@ export default {
       }
       node.items.push({ id, box });
     },
+    _buildCollisionOctreeFromEntries(entries) {
+      if (!Array.isArray(entries) || entries.length === 0) {
+        return null;
+      }
+
+      let minX = Infinity;
+      let minY = Infinity;
+      let minZ = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      let maxZ = -Infinity;
+
+      entries.forEach(item => {
+        const box = item && item.box;
+        if (!box || !box.isBox3) return;
+        const mn = box.min;
+        const mx = box.max;
+        if (mn.x < minX) minX = mn.x;
+        if (mn.y < minY) minY = mn.y;
+        if (mn.z < minZ) minZ = mn.z;
+        if (mx.x > maxX) maxX = mx.x;
+        if (mx.y > maxY) maxY = mx.y;
+        if (mx.z > maxZ) maxZ = mx.z;
+      });
+
+      if (minX === Infinity) {
+        return null;
+      }
+
+      const rootBox = new this.THREE.Box3(
+        new this.THREE.Vector3(minX, minY, minZ),
+        new this.THREE.Vector3(maxX, maxY, maxZ)
+      );
+      const root = {
+        box: rootBox,
+        items: [],
+        children: null,
+        depth: 0,
+      };
+
+      entries.forEach(item => {
+        if (!item || !item.box) return;
+        this._octreeInsert(root, String(item.id), item.box);
+      });
+
+      return root;
+    },
     _isCollisionBoxAvailable(box) {
       if (!box || !box.isBox3 || box.isEmpty()) return false;
       if (box.userData && box.userData.visible === false) return false;
@@ -1935,7 +2067,8 @@ export default {
     _buildCollisionPairMap() {
       const pairMap = new Map();
       const collisionPairs = this.getOctreeCollisionPairs();
-      const pairs = collisionPairs && Array.isArray(collisionPairs.pairs) ? collisionPairs.pairs : [];
+      const pairs =
+        collisionPairs && Array.isArray(collisionPairs.pairs) ? collisionPairs.pairs : [];
       for (let i = 0; i < pairs.length; i++) {
         const pair = pairs[i];
         if (!pair) continue;
@@ -2071,9 +2204,8 @@ export default {
       }
       return false;
     },
-    _queryOctreeByBox(box) {
+    _queryOctreeByBoxWithRoot(root, box) {
       const results = [];
-      const root = this._octree;
       if (!root || !this._isCollisionBoxAvailable(box)) return results;
 
       const stack = [root];
@@ -2099,25 +2231,88 @@ export default {
 
       return results;
     },
-    getOctreeCollisionPairs() {
+    _queryOctreeByBox(box) {
+      return this._queryOctreeByBoxWithRoot(this._octree, box);
+    },
+    getOctreeCollisionPairs(options = {}) {
       const pairs = [];
       if (!this._boxIndex || this._boxIndex.size === 0) return { pairs };
 
-      if (!this._octree) {
-        this.buildOctreeFromBoxIndex();
+      const normalizeIds = value =>
+        Array.isArray(value)
+          ? Array.from(
+              new Set(
+                value
+                  .map(item => (item === null || item === undefined ? '' : String(item)))
+                  .filter(item => item !== '')
+              )
+            )
+          : [];
+
+      const getEntriesByIds = ids => {
+        const entries = [];
+        const idSet = new Set(ids);
+        this._boxIndex.forEach((box, id) => {
+          const key = String(id);
+          if (idSet.has(key)) {
+            entries.push({
+              id: key,
+              box,
+            });
+          }
+        });
+        return entries;
+      };
+
+      const sourceIds = normalizeIds(options.sourceIds);
+      const targetIds = normalizeIds(options.targetIds);
+      const includeIds = Array.isArray(options.includeIds) ? normalizeIds(options.includeIds) : [];
+
+      let root = this._octree;
+      let sourceEntries = [];
+      let dedupePairKeySet = null;
+
+      if (sourceIds.length > 0 && targetIds.length > 0) {
+        const targetEntries = getEntriesByIds(targetIds);
+        sourceEntries = getEntriesByIds(sourceIds);
+        if (sourceEntries.length === 0 || targetEntries.length === 0) return { pairs };
+        root = this._buildCollisionOctreeFromEntries(targetEntries);
+        if (!root) return { pairs };
+        dedupePairKeySet = new Set();
+      } else if (includeIds.length > 0) {
+        sourceEntries = getEntriesByIds(includeIds);
+        if (sourceEntries.length === 0) return { pairs };
+        root = this._buildCollisionOctreeFromEntries(sourceEntries);
+        if (!root) return { pairs };
+      } else {
+        if (!this._octree) {
+          this.buildOctreeFromBoxIndex();
+        }
+        if (!this._octree) return { pairs };
+        this._boxIndex.forEach((box, id) => {
+          sourceEntries.push({
+            id: String(id),
+            box,
+          });
+        });
       }
-      if (!this._octree) return { pairs };
 
-      this._boxIndex.forEach((boxA, idA) => {
+      sourceEntries.forEach(({ id: idA, box: boxA }) => {
         if (!this._isCollisionBoxAvailable(boxA)) return;
 
-        const hits = this._queryOctreeByBox(boxA);
+        const hits = this._queryOctreeByBoxWithRoot(root, boxA);
         for (let i = 0; i < hits.length; i++) {
           const item = hits[i];
           if (!item || String(item.id) === String(idA)) continue;
           const boxB = item.box;
           if (!this._isCollisionBoxMatched(boxA, boxB)) continue;
 
+          if (dedupePairKeySet) {
+            const pairKey = `${String(idA)}__${String(item.id)}`;
+            if (dedupePairKeySet.has(pairKey)) continue;
+            dedupePairKeySet.add(pairKey);
+          }
+
           pairs.push({
             idA: this._formatCollisionPairId(idA),
             idB: this._formatCollisionPairId(item.id),
@@ -2571,7 +2766,8 @@ export default {
     /**
      * 执行视椎体裁切，清理视椎体外的InstancedMesh实例
      */
-    async performFrustumCulling() {
+    async performFrustumCulling(options = {}) {
+      const skipUnload = !!(options && options.skipUnload);
       const modelState = this.noObserver
         ? this.noObserver.modelStateManager
         : this.modelStateManager;
@@ -3340,7 +3536,7 @@ export default {
               }
 
               // 仅当所有实例都不活跃时，才执行卸载
-              if (!this.firstPerSign && !this.roaming && allInactive) {
+              if (!skipUnload && !this.firstPerSign && !this.roaming && allInactive) {
                 toUnload.push({ modelId, child });
               }
             }
@@ -3373,7 +3569,7 @@ export default {
         if (modelInVisible) {
           toLoadSet.delete(modelId);
         }
-        if (!this.firstPerSign && !this.roaming && (!inFrustum || !modelInVisible)) {
+        if (!skipUnload && !this.firstPerSign && !this.roaming && (!inFrustum || !modelInVisible)) {
           toUnload.push({ modelId, child });
         }
       });
@@ -3491,9 +3687,15 @@ export default {
      * @param {Object} config - 配置项
      * @param {Object} config.modelApi - 模型API接口
      * @param {string} [config.projectId] - 项目ID
+     * @param {Object} [config.cameraControlMoveObserver] - 普通视角运动中触发加载的配置
+     * @param {boolean} [config.cameraControlMoveObserver.enabled=false] - 是否开启普通视角运动中加载
+     * @param {number} [config.cameraControlMoveObserver.interval=500] - 触发间隔，单位毫秒
+     * @param {boolean} [config.enableCameraControlMoveObserver=false] - 是否开启普通视角运动中加载
+     * @param {number} [config.cameraControlMoveInterval=500] - 触发间隔，单位毫秒
      */
     init(config = {}) {
       console.log('init');
+      this.setCameraControlMoveObserverConfig(config);
       this.initStreamLoader(config.modelApi, config);
     },
 
@@ -3920,6 +4122,124 @@ export default {
       this.noObserver.isObserverEnabled = enabled;
     },
 
+    setCameraControlMoveObserverConfig(config = {}) {
+      if (!this.noObserver) return;
+      const nestedConfig = config.cameraControlMoveObserver || {};
+      const enabled =
+        typeof nestedConfig.enabled === 'boolean'
+          ? nestedConfig.enabled
+          : typeof config.enableCameraControlMoveObserver === 'boolean'
+          ? config.enableCameraControlMoveObserver
+          : false;
+      const rawInterval =
+        nestedConfig.interval !== undefined
+          ? nestedConfig.interval
+          : config.cameraControlMoveInterval;
+      const interval = Number(rawInterval);
+      const safeInterval = Number.isFinite(interval) && interval > 0 ? interval : 500;
+
+      this.noObserver.cameraControlMoveObserver = {
+        enabled,
+        interval: safeInterval,
+      };
+      this.resetCameraControlMoveSnapshot(false);
+    },
+
+    isCameraControlMoveObserverEnabled() {
+      const config = this.noObserver && this.noObserver.cameraControlMoveObserver;
+      return !!(config && config.enabled);
+    },
+
+    getCameraControlTarget(target) {
+      if (!target || !this.cameraControls) return false;
+      if (typeof this.cameraControls.getTarget === 'function') {
+        this.cameraControls.getTarget(target);
+        return true;
+      }
+      if (this.cameraControls._target) {
+        target.copy(this.cameraControls._target);
+        return true;
+      }
+      return false;
+    },
+
+    resetCameraControlMoveSnapshot(syncCurrent = false) {
+      if (!this.noObserver) return;
+      if (!this.noObserver._cameraControlMoveState) {
+        this.noObserver._cameraControlMoveState = {
+          position: new this.THREE.Vector3(),
+          quaternion: new this.THREE.Quaternion(),
+          target: new this.THREE.Vector3(),
+          currentTarget: new this.THREE.Vector3(),
+          initialized: false,
+          hasTarget: false,
+        };
+      }
+      const state = this.noObserver._cameraControlMoveState;
+      if (!syncCurrent || !this.camera) {
+        state.initialized = false;
+        state.hasTarget = false;
+        return;
+      }
+
+      this.camera.updateMatrixWorld(true);
+      state.position.copy(this.camera.position);
+      state.quaternion.copy(this.camera.quaternion);
+      state.hasTarget = this.getCameraControlTarget(state.target);
+      state.initialized = true;
+    },
+
+    observeCameraControlMove() {
+      if (
+        !this.noObserver ||
+        !this.noObserver.isObserverEnabled ||
+        !this.isCameraControlMoveObserverEnabled() ||
+        !this.camera ||
+        !this.cameraControls ||
+        typeof this._cameraChangeObserver !== 'function'
+      ) {
+        return;
+      }
+
+      const loadingState = this.noObserver.batchLoadingState || {};
+      const interactionState = loadingState.interactionState || {};
+      const wheelActive = !!interactionState.wheelTimeout;
+      const controlActive = !!this.noObserver.isControlActive;
+      if ((!controlActive && !wheelActive) || this.firstPerSign) {
+        this.resetCameraControlMoveSnapshot(false);
+        return;
+      }
+
+      if (!this.noObserver._cameraControlMoveState) {
+        this.resetCameraControlMoveSnapshot(true);
+        return;
+      }
+
+      const state = this.noObserver._cameraControlMoveState;
+      if (!state.initialized) {
+        this.resetCameraControlMoveSnapshot(true);
+        return;
+      }
+
+      this.camera.updateMatrixWorld(true);
+      const hasTarget = this.getCameraControlTarget(state.currentTarget);
+      const positionMoved = state.position.distanceToSquared(this.camera.position) > 1e-8;
+      const quaternionMoved = 1 - Math.abs(state.quaternion.dot(this.camera.quaternion)) > 1e-10;
+      const targetMoved =
+        hasTarget !== state.hasTarget ||
+        (hasTarget && state.target.distanceToSquared(state.currentTarget) > 1e-8);
+
+      if (!positionMoved && !quaternionMoved && !targetMoved) return;
+
+      state.position.copy(this.camera.position);
+      state.quaternion.copy(this.camera.quaternion);
+      state.hasTarget = hasTarget;
+      if (hasTarget) {
+        state.target.copy(state.currentTarget);
+      }
+      this._cameraChangeObserver('controlMove');
+    },
+
     /**
      * 初始化相机变更观察者 (CameraChangeObserver)
      * 统一监听：用户交互(Wheel/Control)、程序化动画、API调用
@@ -3954,7 +4274,9 @@ export default {
           // 执行视锥体裁剪
           // 第一视角不裁切
           if (this.modelStateManager.frustumCheckEnabled) {
-            await this.performFrustumCulling();
+            await this.performFrustumCulling({
+              skipUnload: source === 'controlMove',
+            });
           }
 
           // 执行流式加载请求
@@ -3966,11 +4288,19 @@ export default {
           }
         },
         source => {
-          // 漫游模式下，或者第一人称移动时，使用节流策略（每300ms触发一次）
+          // 漫游、第一人称移动、普通视角拖拽/缩放中，使用节流策略避免持续运动被防抖吞掉。
           // 避免在持续运动中因防抖重置定时器而无法触发
           if (source === 'roam' || source === 'firstPersonMove') {
             return { type: 'throttle', limit: 1000 };
           }
+          if (source === 'controlMove') {
+            const config = this.noObserver && this.noObserver.cameraControlMoveObserver;
+            const interval =
+              config && Number.isFinite(config.interval) && config.interval > 0
+                ? config.interval
+                : 500;
+            return { type: 'throttle', limit: interval };
+          }
           return 300; // 默认防抖 300ms
         }
       );
@@ -3984,8 +4314,20 @@ export default {
       this._wheelHandler = res => {
         this.$emit('wheelStart', res);
 
-        // 统一交互开始处理
-        this.beginInteraction('wheel');
+        const cameraControlMoveEnabled = this.isCameraControlMoveObserverEnabled();
+        const loadingState = this.noObserver
+          ? this.noObserver.batchLoadingState
+          : this.batchLoadingState;
+        const wheelAlreadyActive =
+          loadingState &&
+          loadingState.interactionState &&
+          loadingState.interactionState.wheelTimeout;
+        if (cameraControlMoveEnabled && !wheelAlreadyActive) {
+          this.resetCameraControlMoveSnapshot(true);
+        } else if (!cameraControlMoveEnabled) {
+          // 未开启普通视角运动加载时，保持原有交互中断流程。
+          this.beginInteraction('wheel');
+        }
 
         // 设置滚轮交互的结束检测
         this.scheduleWheelInteractionEnd(res, 100);
@@ -4027,9 +4369,12 @@ export default {
       // 4. 监听器 - Controls (用户拖拽/操作)
       this._onControlStart = res => {
         this.noObserver.isControlActive = true;
-
-        // 统一交互开始处理（相机）
-        this.beginInteraction('this.camera');
+        if (this.isCameraControlMoveObserverEnabled()) {
+          this.resetCameraControlMoveSnapshot(true);
+        } else {
+          // 未开启普通视角运动加载时，保持原有交互中断流程。
+          this.beginInteraction('this.camera');
+        }
         this.$emit('controlStart', res);
 
         // 记录鼠标按下时的位置
@@ -4046,8 +4391,10 @@ export default {
 
         this.$emit('controlEnd', res);
 
-        // 统一交互结束处理（相机）
-        this.endInteraction('this.camera', res, { immediateResume: false });
+        if (!this.isCameraControlMoveObserverEnabled()) {
+          // 未开启普通视角运动加载时，保持原有交互中断流程。
+          this.endInteraction('this.camera', res, { immediateResume: false });
+        }
 
         // 记录鼠标抬起时的位置并计算是否发生了拖拽
         const event = res.originalEvent || window.event;
@@ -4076,6 +4423,9 @@ export default {
           // 触发观察者
           this._cameraChangeObserver('control');
         }
+        if (this.isCameraControlMoveObserverEnabled()) {
+          this.resetCameraControlMoveSnapshot(false);
+        }
       };
 
       this.cameraControls.addEventListener('controlstart', this._onControlStart);
@@ -4136,12 +4486,37 @@ export default {
     },
     // 动态设置视角滚轮的距离
     setCameraConfig() {
+      if (
+        !this.sceneBoundingBox ||
+        !this.sceneBoundingBox.isBox3 ||
+        this.sceneBoundingBox.isEmpty()
+      ) {
+        return;
+      }
       // let box3 = new this.THREE.Box3().setFromObject(this.sceneBoundingBox);
       let size = new this.THREE.Vector3();
       this.sceneBoundingBox.getSize(size);
       const maxBorder = Math.max(size.x, size.y, size.z);
+      if (isDebug) {
+        const center = this.sceneBoundingBox.getCenter(new this.THREE.Vector3());
+        console.log('sceneBoundingBox 调试信息', {
+          size: {
+            x: size.x,
+            y: size.y,
+            z: size.z,
+          },
+          center: {
+            x: center.x,
+            y: center.y,
+            z: center.z,
+          },
+          maxBorder,
+        });
+        this.refreshSceneBoundingBoxHelper(this.sceneBoundingBoxDebugEnabled);
+      }
       // this.cameraControls.this.camera.far = maxBorder * 10; // 设置相机的远裁剪面
       this.cameraControls.minDistance = maxBorder * 0.2; // 动态设置视角滚轮的距离
+      // this.cameraControls.minDistance = 1000; // 动态设置视角滚轮的距离
       this.camera.updateProjectionMatrix();
     },
     // 获取mesh的中心点
@@ -4469,8 +4844,19 @@ export default {
         if (this.threeMeasure) {
           this.threeMeasure.updateParams(width, height);
         }
+        this.updateMeshLineResolution(width, height);
       }
     },
+    updateMeshLineResolution(width, height) {
+      if (!this.modelGroup || !width || !height) return;
+      this.modelGroup.traverse(child => {
+        const material = child && child.material;
+        if (material && material.type === 'MeshLineMaterial' && material.resolution) {
+          material.resolution.set(width, height);
+          material.needsUpdate = true;
+        }
+      });
+    },
     setModelCenter(target, options = {}) {
       // return
       let box3;
@@ -6545,6 +6931,7 @@ export default {
           });
         }
         this.cameraControls.enabled && this.cameraControls.update(this.timeStamp);
+        this.observeCameraControlMove();
         // 计算相机近裁面到包围盒当前面的距离
         this.cameraTrack();
         this.firstPerspective();
@@ -6755,6 +7142,13 @@ export default {
       const loadingState = this.noObserver
         ? this.noObserver.batchLoadingState
         : this.batchLoadingState;
+      const rect = this.renderer
+        ? this.renderer.domElement.getBoundingClientRect()
+        : { width: window.innerWidth, height: window.innerHeight };
+      options.meshLineResolution = {
+        width: rect.width || window.innerWidth || 1,
+        height: rect.height || window.innerHeight || 1,
+      };
       // 如果已经在加载中，先停止之前的加载
       if (loadingState.isLoading) {
         this.stopBatchLoading('restart');
@@ -7318,8 +7712,15 @@ export default {
 
       loadingState.interactionState.wheelTimeout = setTimeout(() => {
         this.$emit('wheelEnd', event);
-        this.endInteraction('wheel', event, { immediateResume: false });
         loadingState.interactionState.wheelTimeout = null;
+        if (this.isCameraControlMoveObserverEnabled()) {
+          this.resetCameraControlMoveSnapshot(false);
+          if (typeof this._cameraChangeObserver === 'function') {
+            this._cameraChangeObserver('wheel');
+          }
+        } else {
+          this.endInteraction('wheel', event, { immediateResume: false });
+        }
       }, delay);
     },
 
@@ -7347,9 +7748,87 @@ export default {
     /**
      * 隐藏场景包围盒
      */
+    refreshSceneBoundingBoxHelper(forceVisible = this.boundingBoxVisible) {
+      if (this.sceneBoundingBoxHelper && this.scene) {
+        this.scene.remove(this.sceneBoundingBoxHelper);
+        this.sceneBoundingBoxHelper.geometry && this.sceneBoundingBoxHelper.geometry.dispose();
+        if (Array.isArray(this.sceneBoundingBoxHelper.material)) {
+          this.sceneBoundingBoxHelper.material.forEach(material => {
+            material && material.dispose && material.dispose();
+          });
+        } else if (
+          this.sceneBoundingBoxHelper.material &&
+          this.sceneBoundingBoxHelper.material.dispose
+        ) {
+          this.sceneBoundingBoxHelper.material.dispose();
+        }
+        this.sceneBoundingBoxHelper = null;
+      }
+
+      if (
+        !forceVisible ||
+        !this.scene ||
+        !this.sceneBoundingBox ||
+        !this.sceneBoundingBox.isBox3 ||
+        this.sceneBoundingBox.isEmpty()
+      ) {
+        this.boundingBoxVisible = false;
+        return false;
+      }
+
+      const helper = new this.THREE.Box3Helper(this.sceneBoundingBox, 0x00ff88);
+      helper.name = 'sceneBoundingBoxHelper';
+      helper.renderOrder = 999;
+      if (helper.material) {
+        helper.material.depthTest = false;
+        helper.material.transparent = true;
+        helper.material.opacity = 0.9;
+      }
+      this.scene.add(helper);
+      this.sceneBoundingBoxHelper = helper;
+      this.boundingBoxVisible = true;
+      return true;
+    },
+
+    showSceneBoundingBox() {
+      this.sceneBoundingBoxDebugEnabled = true;
+      const shown = this.refreshSceneBoundingBoxHelper(true);
+      if (!shown) {
+        console.warn('sceneBoundingBox 无有效范围，无法绘制调试线框');
+        return;
+      }
+
+      const size = this.sceneBoundingBox.getSize(new this.THREE.Vector3());
+      const center = this.sceneBoundingBox.getCenter(new this.THREE.Vector3());
+      console.log('sceneBoundingBox 线框已绘制', {
+        size: {
+          x: size.x,
+          y: size.y,
+          z: size.z,
+        },
+        center: {
+          x: center.x,
+          y: center.y,
+          z: center.z,
+        },
+      });
+    },
+
     hideSceneBoundingBox() {
+      this.sceneBoundingBoxDebugEnabled = false;
       if (this.sceneBoundingBoxHelper && this.scene) {
         this.scene.remove(this.sceneBoundingBoxHelper);
+        this.sceneBoundingBoxHelper.geometry && this.sceneBoundingBoxHelper.geometry.dispose();
+        if (Array.isArray(this.sceneBoundingBoxHelper.material)) {
+          this.sceneBoundingBoxHelper.material.forEach(material => {
+            material && material.dispose && material.dispose();
+          });
+        } else if (
+          this.sceneBoundingBoxHelper.material &&
+          this.sceneBoundingBoxHelper.material.dispose
+        ) {
+          this.sceneBoundingBoxHelper.material.dispose();
+        }
         this.sceneBoundingBoxHelper = null;
         this.boundingBoxVisible = false;
         console.log('场景包围盒已隐藏');
@@ -7360,7 +7839,7 @@ export default {
      * 切换场景包围盒显示状态
      */
     toggleSceneBoundingBox() {
-      if (this.boundingBoxVisible) {
+      if (this.sceneBoundingBoxDebugEnabled) {
         this.hideSceneBoundingBox();
       } else {
         this.showSceneBoundingBox();