fl-web-component 1.4.8 → 2.0.0-beta.1

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

@@ -20,13 +20,15 @@
     pointControls,
     threeMeasure,
     modelGroup,
-    gui,
     animateId,
     scenePass,
     outlineComposer,
+    outlinePass,
     renderTarget,
     sceneClock,
-    mat4,
+    bizToThreeMatrix,
+    threeToBizMatrix,
+    stats,
   ] = (function* (v) {
     while (true) yield v;
   })(null);
@@ -45,6 +47,7 @@
     moveLeft,
     moveRight,
     measureFlag,
+    // rotatedSceneFlag,
   ] = (function* (v) {
     while (true) yield v;
   })(false);
@@ -53,9 +56,41 @@
     while (true) yield v;
   })(true);
 
+  const renderedThisFrame = new Set();
+
+  function markRendered(mesh) {
+    mesh.onBeforeRender = function (renderer, scene, camera, geometry, material, group) {
+      renderedThisFrame.add(mesh);
+    };
+  }
+
+  // 交互期间丢弃当前帧渲染的标记
+  let skipNextRenderFrame = false;
+  // 增强的交互检测标记
+  let forceSkipRendering = false;
+  // let interactionFrameCount = 0; // 交互期间跳过的帧数计数
+
   var clippingMesh = [],
     modelActive = [],
-    modelActions = [];
+    modelActions = [],
+    modelGroups = [], // 存储所有模型组的数组，支持增量渲染
+    userInteracting = false, // 用户交互标志位
+    centeringDebounceTimer = null, // 居中防抖定时器
+    hasExecutedCentering = false, // 是否已经执行过居中操作
+    needsCenteringAfterInteraction = false, // 用户交互结束后是否需要居中
+    // 用于区分点击和拖拽的变量
+    mouseDownPosition = { x: 0, y: 0 }, // 鼠标按下时的位置
+    mouseUpPosition = { x: 0, y: 0 }, // 鼠标抬起时的位置
+    isDragging = false, // 是否正在拖拽
+    dragThreshold = 5, // 拖拽阈值，像素单位
+    sceneBoundingBox = null, // 场景包围盒
+    // 包围盒显示相关变量
+    sceneBoundingBoxHelper = null, // 场景包围盒辅助线
+    boundingBoxVisible = false; // 包围盒是否可见
+
+  // 根据场景包围盒动态计算的最大dolly距离（对角线长度）
+  let maxDollyDistance = Infinity;
+
   var removeSpeed = 200,
     upSpeed = 200; //控制器移动速度 , //控制跳起时的速度
   var roamConfig = {
@@ -67,7 +102,24 @@
     x轴: 0,
     y轴: 0,
     z轴: 0,
+    '-x轴': 0,
+    '-y轴': 0,
+    '-z轴': 0,
   };
+  // let lodLevel = 0; // 模型初始等级
+  // 性能优化：记录上一次的formatMin和formatMax值
+  let lastFormatMin = null;
+  let lastFormatMax = null;
+  let firstDraw = true;
+  let highSSE = 3;
+  let sseValue = 80;
+  let gui = null;
+
+  let frameCounter = 0;
+  let perfLogFrameCount = 0;
+  let lastPerfLogTime = 0;
+  const LOG_INTERVAL = 30;
+
   //  绘制对象映射实例表
   import CameraControls from 'camera-controls';
   import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
@@ -79,13 +131,31 @@
   import MeasureDistance from '@/utils/threejs/measure-distance.js';
   import MeasureArea from '@/utils/threejs/measure-area.js';
   import MeasureAngle from '@/utils/threejs/measure-angle.js';
-  import { parseData } from '@/utils/flgltf-parser';
-  import { handleInstancedMeshModel } from '@/utils/instance-parser';
+  import { parseData, processMeshData, processNodeData } from '@/utils/flgltf-parser';
+  import {
+    handleInstancedMeshModel,
+    resetProcessingState,
+    PRIMITIVE_TYPE,
+    draw3Dmodel,
+    getDrawObjectInstance,
+    instanceToInstancedMeshMap,
+  } from '@/utils/instance-parser';
   import { RainShader } from '@/utils/threejs/rain-shader.js';
   import { SnowShader } from '@/utils/threejs/snow-shader.js';
   import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
   import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
   import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
+  import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
+  import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
+  import Stats from 'three/examples/jsm/libs/stats.module.js';
+  import { OBB } from 'three/examples/jsm/math/OBB.js';
+  import boxJson from './box.json';
+  import { StreamLoader } from '../../utils/StreamLoader.js';
+  import StreamLoaderParserWorker from '../../utils/StreamLoaderParser.worker.js';
+
+  const isDebug = process.env.NODE_ENV !== 'production' || process.env.VUE_APP_IS_WATCH === true;
+  // const isDebug = false;
+
   export default {
     name: 'FlModel',
     props: {
@@ -97,12 +167,102 @@
       },
     },
     data() {
-      return {};
+      return {
+        // modelStateManager 和 occlusionState 中的大部分属性无需 Vue 响应式监听
+        modelStateManager: {
+          frustumCheckEnabled: true,
+          // isloadedModelsIds 需要响应式，可能用于外部展示或 computed
+          isloadedModelsIds: [],
+        },
+        occlusionState: {
+          // enabled: false,
+          enabled: true,
+          // previewEnabled: false,
+          previewEnabled: isDebug,
+          bufferWidth: 1700,
+          sampleStride: 1,
+          minSampleCount: 5,
+          // asyncBuildEnabled: true,
+        },
+        // 分帧加载状态管理
+        batchLoadingState: {
+          isLoading: false,
+          currentBatch: 0,
+          totalBatches: 0,
+          loadedCount: 0,
+          totalCount: 0,
+          isPaused: false,
+        },
+      };
     },
     created() {
+      // 初始化非响应式的高频状态对象
+      this.noObserver = {
+        modelStateManager: {
+          // frustumBounds: null,
+          lastUpdateTime: 0,
+          debounceTimer: null,
+          debounceDelay: 0,
+          lastCullingTime: 0,
+          pendingRemovals: [],
+          pendingBoundingToFull: {},
+          cameraBoxFaceDistance: null,
+          bypassCullingModelIds: new Set(),
+          colorConfig: new Map(),
+        },
+        occlusionState: {
+          zBuffer: null,
+          screenWidth: 0,
+          screenHeight: 0,
+          scale: 1,
+          _colorRT: null,
+          _rtW: 0,
+          _rtH: 0,
+          _colorBuffer: null,
+          _occScene: null,
+          _occMat: null,
+          _sharedBoxGeom: null,
+          metrics: null,
+          _previewCanvas: null,
+          _previewCtx: null,
+          _previewBuffer: null,
+          _previewImageData: null,
+        },
+        batchLoadingState: {
+          batchSize: 5,
+          pendingData: [],
+          animationFrameId: null,
+          onProgress: null,
+          onComplete: null,
+          pauseReason: '',
+          pauseStartTime: 0,
+          resumeTimer: null,
+          resumeDelay: 0,
+          interactionState: {
+            isInteracting: false,
+            lastInteractionTime: 0,
+            interactionType: '',
+            wheelTimeout: null,
+          },
+        },
+        streamLoader: null,
+        // isPerformingInitialCentering: false, // 标记是否正在执行初始居中
+        isObserverEnabled: true, // 标记相机变更观察者是否启用
+        sceneBoxes: new Map(),
+        documentModelIds: new Map(),
+        outlineInstanceProxyMap: new Map(),
+        occlusionWorker: null,
+        occlusionWorkerRequestMap: new Map(),
+        occlusionWorkerRequestId: 0,
+      };
+
+      this.initOcclusionWorker();
+
       CameraControls.install({ THREE: this.THREE });
-      mat4 = new this.THREE.Matrix4();
-      mat4.makeRotationX(-Math.PI / 2);
+      bizToThreeMatrix = new this.THREE.Matrix4();
+      bizToThreeMatrix.makeRotationX(-Math.PI / 2);
+      threeToBizMatrix = new this.THREE.Matrix4();
+      threeToBizMatrix.makeRotationX(Math.PI / 2);
       fpsClock = new this.THREE.Clock();
       raycaster = new this.THREE.Raycaster();
       sceneClock = new this.THREE.Clock();
@@ -112,6 +272,7 @@
         magFilter: this.THREE.LinearFilter,
         format: this.THREE.RGBAFormat,
         stencilBuffer: true,
+        samples: 0
       });
     },
     mounted() {
@@ -120,9 +281,13 @@
       this.initScene();
       this.initCamera();
       this.initControl();
+      this.initPostProcessing();
+      // 初始化统一的相机事件监听
+      this.initCameraChangeObserver();
       this.initLight();
       this.initLabelRender();
       this.exportParmas();
+
       // 判断是设备是手机还是电脑
       let isMobileDevice = this.isMobileDevice();
       if (isMobileDevice) {
@@ -134,7 +299,73 @@
       }
       this.animate();
     },
+    beforeDestroy() {
+      // 组件销毁前清理资源
+      this.destroyScene();
+    },
     methods: {
+      getOutlineInstanceProxyKey(instancedMesh, instanceIndex) {
+        return `${instancedMesh.uuid}:${instanceIndex}`;
+      },
+      ensureOutlineInstanceProxy(instancedMesh, instanceIndex) {
+        if (!scene || !instancedMesh || !instancedMesh.isInstancedMesh) return null;
+        const state = this.noObserver;
+        if (!state || !state.outlineInstanceProxyMap) return null;
+
+        instancedMesh.updateMatrixWorld(true);
+        const key = this.getOutlineInstanceProxyKey(instancedMesh, instanceIndex);
+        const cached = state.outlineInstanceProxyMap.get(key);
+        if (cached) {
+          const instanceMatrix = new this.THREE.Matrix4();
+          instancedMesh.getMatrixAt(instanceIndex, instanceMatrix);
+          cached.matrix.copy(instancedMesh.matrixWorld).multiply(instanceMatrix);
+          cached.matrixWorldNeedsUpdate = true;
+          return cached;
+        }
+
+        const proxyMaterial = new this.THREE.MeshBasicMaterial({
+          color: 0xffffff,
+          transparent: true,
+          opacity: 0,
+          depthWrite: false,
+        });
+        proxyMaterial.colorWrite = false;
+
+        const proxy = new this.THREE.Mesh(instancedMesh.geometry, proxyMaterial);
+        proxy.matrixAutoUpdate = false;
+        proxy.frustumCulled = false;
+        proxy.layers.mask = instancedMesh.layers.mask;
+
+        const instanceMatrix = new this.THREE.Matrix4();
+        instancedMesh.getMatrixAt(instanceIndex, instanceMatrix);
+        proxy.matrix.copy(instancedMesh.matrixWorld).multiply(instanceMatrix);
+        proxy.matrixWorldNeedsUpdate = true;
+        proxy.userData = {
+          outlineProxy: true,
+          instancedMeshUuid: instancedMesh.uuid,
+          instanceIndex,
+        };
+
+        scene.add(proxy);
+        state.outlineInstanceProxyMap.set(key, proxy);
+        return proxy;
+      },
+      removeOutlineInstanceProxy(instancedMesh, instanceIndex) {
+        const state = this.noObserver;
+        if (!state || !state.outlineInstanceProxyMap || !instancedMesh) return null;
+        const key = this.getOutlineInstanceProxyKey(instancedMesh, instanceIndex);
+        const proxy = state.outlineInstanceProxyMap.get(key);
+        if (!proxy) return null;
+
+        state.outlineInstanceProxyMap.delete(key);
+        if (outlinePass) {
+          const idx = outlinePass.selectedObjects.indexOf(proxy);
+          if (idx !== -1) outlinePass.selectedObjects.splice(idx, 1);
+        }
+        if (scene) scene.remove(proxy);
+        if (proxy.material) proxy.material.dispose && proxy.material.dispose();
+        return proxy;
+      },
       // 判断是设备是手机还是电脑
       isMobileDevice() {
         const userAgent = navigator.userAgent || navigator.vendor || window.opera;
@@ -149,149 +380,2235 @@
         }
         return false;
       },
-      initRender() {
-        renderer = new this.THREE.WebGLRenderer({
-          antialias: true,
-          alpha: true,
-          logarithmicDepthBuffer: true,
-          powerPreference: 'high-performance',
-          preserveDrawingBuffer: true, //保留图形缓冲区 TODO 临时截图使用
-        });
-        renderer.setPixelRatio(window.devicePixelRatio);
-        const rect = instructions.getBoundingClientRect();
-        renderer.setSize(rect.width, rect.height);
-        renderer.domElement.id = 'three-model';
-        renderer.shadowMap.enabled = true;
-        // 暂时注释这句 还有worker里面的 这跟渲染出的模型浅或暗有关系
-        renderer.outputEncoding = this.THREE.sRGBEncoding;
-        instructions.appendChild(renderer.domElement);
-        renderer.setClearAlpha(0);
+      // 节流工具方法
+      throttle(func, limit) {
+        let lastFunc;
+        let lastRan;
+        return function (...args) {
+          if (!lastRan) {
+            func.apply(this, args);
+            lastRan = Date.now();
+          } else {
+            clearTimeout(lastFunc);
+            lastFunc = setTimeout(function () {
+              if (Date.now() - lastRan >= limit) {
+                func.apply(this, args);
+                lastRan = Date.now();
+              }
+            }, limit - (Date.now() - lastRan));
+          }
+        };
+      },
+      // 防抖工具方法，支持动态延迟
+      debounce(func, delay) {
+        let timeoutId;
+        // 增加 throttle 支持
+        let throttleLastRan = 0;
+        let throttleTimer = null;
 
-        // 与校审截图功能冲突，暂时先注释掉
-        // -----------
-        // renderer.autoClear = false;
-        // renderer.autoClearColor = false;
-        // renderer.autoClearDepth = false;
-        // renderer.autoClearStencil = false;
-        // -----------
+        return function (...args) {
+          const currentDelay = typeof delay === 'function' ? delay(...args) : delay;
+
+          // 如果返回 'throttle' 策略，则执行节流逻辑 (默认间隔 300ms，或可扩展)
+          if (
+            currentDelay === 'throttle' ||
+            (typeof currentDelay === 'object' && currentDelay.type === 'throttle')
+          ) {
+            const limit =
+              typeof currentDelay === 'object' && currentDelay.limit ? currentDelay.limit : 300;
+            const now = Date.now();
+
+            // 清除之前的防抖定时器，避免冲突
+            if (timeoutId) {
+              clearTimeout(timeoutId);
+              timeoutId = null;
+            }
+
+            if (now - throttleLastRan >= limit) {
+              func.apply(this, args);
+              throttleLastRan = now;
+            } else {
+              // 确保最后一次触发也能执行
+              clearTimeout(throttleTimer);
+              throttleTimer = setTimeout(() => {
+                if (Date.now() - throttleLastRan >= limit) {
+                  func.apply(this, args);
+                  throttleLastRan = Date.now();
+                }
+              }, limit - (now - throttleLastRan));
+            }
+            return;
+          }
+
+          // 常规防抖逻辑
+          clearTimeout(timeoutId);
+          // 切换回防抖模式时，清除节流定时器
+          if (throttleTimer) {
+            clearTimeout(throttleTimer);
+            throttleTimer = null;
+          }
+
+          if (currentDelay <= 0) {
+            func.apply(this, args);
+          } else {
+            timeoutId = setTimeout(() => func.apply(this, args), currentDelay);
+          }
+        };
       },
-      initScene() {
-        modelGroup = new this.THREE.Group();
-        scene = new this.THREE.Scene();
+      initOcclusionWorker() {
+        if (!this.noObserver) return;
+        let worker = null;
+        try {
+          worker = new StreamLoaderParserWorker();
+        } catch (e) {
+          worker = null;
+        }
+        this.noObserver.occlusionWorker = worker;
+        this.noObserver.occlusionWorkerRequestId = 0;
+        this.noObserver.occlusionWorkerRequestMap = new Map();
+        if (worker) {
+          worker.addEventListener('message', e => {
+            const payload = e.data || {};
+            const pending = this.noObserver.occlusionWorkerRequestMap.get(payload.id);
+            if (!pending) return;
+            this.noObserver.occlusionWorkerRequestMap.delete(payload.id);
+            pending.resolve(payload);
+          });
+        }
       },
-      initCamera() {
-        camera = new this.THREE.PerspectiveCamera(
-          45,
-          window.innerWidth / window.innerHeight,
-          0.1,
-          1000000000
-        );
-        camera.position.set(0, 100, 150);
+      occlusionWorkerRequest(type, data, transferable = []) {
+        const state = this.noObserver;
+        if (!state || !state.occlusionWorker) {
+          return Promise.resolve({ type: 'error', error: 'Worker is not initialized' });
+        }
+        return new Promise(resolve => {
+          const id = state.occlusionWorkerRequestId++;
+          state.occlusionWorkerRequestMap.set(id, { resolve });
+          state.occlusionWorker.postMessage({ id, type, data }, transferable);
+        });
       },
-      initControl() {
-        // 初始化控件
-        cameraControls = new CameraControls(camera, renderer.domElement);
-        cameraControls.dollyToCursor = true;
-        cameraControls.smoothTime = 0.1;
-        cameraControls.draggingSmoothTime = 0.05;
-        cameraControls.truckSpeed = 2.0;
-        cameraControls.infinityDolly = true;
-        cameraControls.minDistance = 4;
+      scanOcclusionBufferSync(buffer, sw, sh, stride, maxIdx, minSampleCount) {
+        const indices = [];
+        if (!buffer || !sw || !sh || !maxIdx) return { indices };
+        const view = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+        const step = Math.max(1, stride || 1);
+        const minCount = Math.max(1, minSampleCount || 1);
+        const counts = new Uint32Array(maxIdx + 1);
+        for (let y = 0; y < sh; y += step) {
+          const row = y * sw * 4;
+          for (let x = 0; x < sw; x += step) {
+            const p = row + x * 4;
+            const idxColor = view[p] + (view[p + 1] << 8) + (view[p + 2] << 16);
+            if (idxColor > 0 && idxColor <= maxIdx) {
+              const next = counts[idxColor] + 1;
+              counts[idxColor] = next;
+              if (next === minCount) {
+                indices.push(idxColor);
+              }
+            }
+          }
+        }
+        return { indices };
       },
-      // 初始化光源
-      initLight() {
-        const pmremGenerator = new this.THREE.PMREMGenerator(renderer);
-        scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+      async scanOcclusionIndices(buffer, sw, sh, stride, maxIdx, minSampleCount) {
+        const state = this.noObserver;
+        const canWorker = state && state.occlusionWorker && buffer && buffer.buffer;
+        if (canWorker) {
+          const response = await this.occlusionWorkerRequest(
+            'occlusionScan',
+            {
+              buffer: buffer.buffer,
+              sw,
+              sh,
+              stride,
+              maxIdx,
+              minSampleCount,
+            },
+            [buffer.buffer]
+          );
+          const restored = response && response.buffer ? new Uint8Array(response.buffer) : buffer;
+          if (response && response.type === 'success' && response.result) {
+            return { indices: response.result.indices || [], buffer: restored.buffer };
+          }
+          const syncRes = this.scanOcclusionBufferSync(
+            restored,
+            sw,
+            sh,
+            stride,
+            maxIdx,
+            minSampleCount
+          );
+          return { indices: syncRes.indices, buffer: restored.buffer };
+        }
+        const syncRes = this.scanOcclusionBufferSync(
+          buffer,
+          sw,
+          sh,
+          stride,
+          maxIdx,
+          minSampleCount
+        );
+        return { indices: syncRes.indices, buffer: buffer && buffer.buffer ? buffer.buffer : null };
       },
-      // 初始化文字画布
-      initLabelRender() {
-        labelRenderer = new CSS2DRenderer();
-        const rect = instructions.getBoundingClientRect();
-        labelRenderer.setSize(rect.width, rect.height);
-        labelRenderer.domElement.style.position = 'absolute';
+      setSceneBox(boundingBox, documentId, isAdd = true) {
+        if (!documentId) {
+          if (this.noObserver && this.noObserver.sceneBoxes) {
+            this.noObserver.sceneBoxes.clear();
+          }
+          sceneBoundingBox = new this.THREE.Box3();
+          return;
+        }
 
-        labelRenderer.domElement.style.top = `${rect.top}px`;
-        labelRenderer.domElement.style.pointerEvents = 'none';
-        instructions.appendChild(labelRenderer.domElement);
+        if (isAdd && boundingBox) {
+          const {
+            max_x: maxX,
+            max_z: maxZ,
+            max_y: maxY,
+            min_x: minX,
+            min_z: minZ,
+            min_y: minY,
+          } = boundingBox;
+
+          const box = new this.THREE.Box3(
+            new this.THREE.Vector3(minX, minY, minZ),
+            new this.THREE.Vector3(maxX, maxY, maxZ)
+          ).applyMatrix4(bizToThreeMatrix);
+          this.noObserver.sceneBoxes.set(documentId, box);
+        } else {
+          this.noObserver.sceneBoxes.delete(documentId);
+        }
+
+        const boxes = Array.from(this.noObserver.sceneBoxes.values());
+        if (boxes.length > 0) {
+          const firstBox = boxes[0].clone();
+          for (let i = 1; i < boxes.length; i++) {
+            firstBox.union(boxes[i]);
+          }
+          sceneBoundingBox = firstBox;
+        } else {
+          sceneBoundingBox = new this.THREE.Box3();
+        }
       },
-      // 根据模型数据绘制模型实体 业务平台可调用此方法加载模型
-      /*
-        参数：data 模型数据
-          color: '' 初始化模型的颜色 在业务方 有这个需求
-          meshNameConfig: {}
-      */
-      drawModel(data, color = '', meshNameConfig = {}, options = {}) {
-        if (Object.keys(data).length === 0) {
+      setBoxIndex(boxJson, documentId, isAdd = true) {
+        if (!this._boxIndex) this._boxIndex = new Map();
+        if (!documentId) {
+          this._boxIndex.clear();
+          if (this.noObserver && this.noObserver.documentModelIds) {
+            this.noObserver.documentModelIds.clear();
+          }
+          hasExecutedCentering = false;
+          this.buildOctreeFromBoxIndex();
           return;
         }
-        const { instances, drawObjs } = parseData(data);
-        if (instances.length > 0) {
-          handleInstancedMeshModel(
-            modelGroup,
-            instances,
-            drawObjs,
-            '',
-            scene,
-            color,
-            meshNameConfig
-          );
-          let modelBox3 = new this.THREE.Box3();
-          modelBox3.expandByObject(modelGroup);
-          let modelWorldPs = new this.THREE.Vector3()
-            .addVectors(modelBox3.max, modelBox3.min)
-            .multiplyScalar(0.5);
-          scene.add(modelGroup);
-          // 适配客户端的坐标系，threejs坐标需绕x轴旋转90度
-          modelGroup.applyMatrix4(mat4);
-          modelGroup.updateMatrixWorld();
-          modelGroup.traverse(child => {
-            if (child.isMesh) {
-              const json = this.getMeshCenterAndVolume(child);
-              let meshBox3 = new this.THREE.Box3();
-              meshBox3.setFromObject(child);
-              // 获取每个mesh的中心点，爆炸方向为爆炸中心点指向mesh中心点
-              let worldPs = new this.THREE.Vector3()
-                .addVectors(meshBox3.max, meshBox3.min)
-                .multiplyScalar(0.5);
-              if (isNaN(worldPs.x)) return;
-              // 计算爆炸方向
-              child.worldDir = new this.THREE.Vector3()
-                .subVectors(worldPs, modelWorldPs)
-                .normalize();
-              // 保存初始坐标
-              child.userData.center = json.center;
-              child.userData.worldPs = worldPs;
-              child.userData.oldPs = child.getWorldPosition(new this.THREE.Vector3());
-              child.userData.box = json.box;
-              child.userData.position = new this.THREE.Vector3().copy(child.position);
-              child.userData.translate = {
-                x: 0,
-                y: 0,
-                z: 0,
-              };
-              child.userData.rotate = {
-                x: 0,
-                y: 0,
-                z: 0,
+
+        if (isAdd && boxJson) {
+          const arr = boxJson ? boxJson : [];
+          const modelIds = new Set();
+          for (let i = 0; i < arr.length; i++) {
+            const it = arr[i];
+
+            // 使用新的 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]);
+
+            // 构造 AABB
+            const boxThree = new this.THREE.Box3(min, max);
+
+            // 应用坐标系转换 (Biz -> Three)
+            // 注意：applyMatrix4 会重新计算 AABB
+            boxThree.applyMatrix4(bizToThreeMatrix);
+
+            const userData = {
+              flag: it.flag || 1, // 默认为 1
+              obbData: it.obb, // 存储原始 OBB 数据
+              transparent: it.transp > 0,
+            };
+            if(it.flag === 1) {
+              userData.indices = it.indices;
+              userData.matrix = it.matrix;
+              // userData.matrix = new this.THREE.Matrix4().identity();
+            }
+            // 如果是 flag=3，解析并存储中心点、半轴长、旋转矩阵
+            else if (it.flag === 3 && it.obb && it.obb.length === 15) {
+              const obbData = it.obb;
+              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));
+
+              // 预计算局部到世界的变换矩阵 (不含 bizToThreeMatrix，后续渲染时统一处理)
+              const rotationMatrix4 = new this.THREE.Matrix4().setFromMatrix3(rotation);
+              const obbMatrix = new this.THREE.Matrix4().makeTranslation(
+                center.x,
+                center.y,
+                center.z
+              );
+              obbMatrix.multiply(rotationMatrix4);
+
+              userData.obb = {
+                matrix: obbMatrix,
+                center: center,
+                halfSize: halfSize,
               };
-              child.userData.modelWorldPs = modelWorldPs;
             }
+            // 如果是 flag=2，解析并存储多个子包围盒 (min, max)
+            else if (it.flag === 2 && it.obb && it.obb.length > 0) {
+              const subBoxes = [];
+              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]);
+                  subBoxes.push({ min, max });
+                }
+              }
+              userData.subBoxes = subBoxes;
+            }
+
+            boxThree.userData = userData;
+
+            const modelId = String(it.id);
+            this._boxIndex.set(modelId, boxThree);
+            modelIds.add(modelId);
+          }
+          this.noObserver.documentModelIds.set(documentId, modelIds);
+        } else {
+          const modelIds = this.noObserver.documentModelIds.get(documentId);
+          if (modelIds) {
+            modelIds.forEach(id => {
+              this._boxIndex.delete(id);
+            });
+            this.noObserver.documentModelIds.delete(documentId);
+
+            // 当前无模型了，重置相机中心状态
+            if(this.noObserver.documentModelIds.size == 0){
+              hasExecutedCentering = false
+            }
+          }
+        }
+        this.buildOctreeFromBoxIndex();
+        console.log('time end', Date.now());
+      },
+      buildOctreeFromBoxIndex() {
+        if (!this._boxIndex || this._boxIndex.size === 0) {
+          this._octree = null;
+          return;
+        }
+        let minX = Infinity,
+          minY = Infinity,
+          minZ = Infinity;
+        let maxX = -Infinity,
+          maxY = -Infinity,
+          maxZ = -Infinity;
+        this._boxIndex.forEach(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;
+        });
+        const rootBox = new this.THREE.Box3(
+          new this.THREE.Vector3(minX, minY, minZ),
+          new this.THREE.Vector3(maxX, maxY, maxZ)
+        );
+        this._octreeMaxItems = 64;
+        this._octreeMaxDepth = 12;
+        this._octree = { box: rootBox, items: [], children: null, depth: 0 };
+        this._boxIndex.forEach((box, id) => {
+          this._octreeInsert(this._octree, String(id), box);
+        });
+      },
+      _octreeSubdivide(node) {
+        const min = node.box.min;
+        const max = node.box.max;
+        const mid = new this.THREE.Vector3(
+          (min.x + max.x) * 0.5,
+          (min.y + max.y) * 0.5,
+          (min.z + max.z) * 0.5
+        );
+        const children = [];
+        for (let i = 0; i < 8; i++) {
+          const cx0 = i & 1 ? mid.x : min.x;
+          const cy0 = i & 2 ? mid.y : min.y;
+          const cz0 = i & 4 ? mid.z : min.z;
+          const cx1 = i & 1 ? max.x : mid.x;
+          const cy1 = i & 2 ? max.y : mid.y;
+          const cz1 = i & 4 ? max.z : mid.z;
+          const cmin = new this.THREE.Vector3(cx0, cy0, cz0);
+          const cmax = new this.THREE.Vector3(cx1, cy1, cz1);
+          const cbox = new this.THREE.Box3(cmin, cmax);
+          children.push({ box: cbox, items: [], children: null, depth: node.depth + 1 });
+        }
+        node.children = children;
+        if (node.items && node.items.length) {
+          const keep = [];
+          for (let k = 0; k < node.items.length; k++) {
+            const it = node.items[k];
+            let placed = false;
+            for (let c = 0; c < 8; c++) {
+              const child = node.children[c];
+              if (child.box.containsBox(it.box)) {
+                child.items.push(it);
+                placed = true;
+                break;
+              }
+            }
+            if (!placed) keep.push(it);
+          }
+          node.items = keep;
+        }
+      },
+      _octreeInsert(node, id, box) {
+        if (!node.children) {
+          node.items.push({ id, box });
+          if (node.items.length > this._octreeMaxItems && node.depth < this._octreeMaxDepth) {
+            this._octreeSubdivide(node);
+          }
+          return;
+        }
+        for (let i = 0; i < 8; i++) {
+          const child = node.children[i];
+          if (child.box.containsBox(box)) {
+            this._octreeInsert(child, id, box);
+            return;
+          }
+        }
+        node.items.push({ id, box });
+      },
+      _getCurrentFrustum() {
+        // 确保相机矩阵是最新的
+        if (camera) {
+          camera.updateMatrixWorld();
+          camera.matrixWorldInverse.copy(camera.matrixWorld).invert();
+        }
+        const frustum = new this.THREE.Frustum();
+        const vpMatrix = new this.THREE.Matrix4().multiplyMatrices(
+          camera.projectionMatrix,
+          camera.matrixWorldInverse
+        );
+        frustum.setFromProjectionMatrix(vpMatrix);
+        return frustum;
+      },
+      queryOctreeByFrustum(frustum, excludeSet) {
+        const results = [];
+        const stack = [];
+        const root = this._octree;
+        if (!root) return results;
+        stack.push(root);
+
+        // 预分配临时对象以减少GC
+        const inverseMatrix = new this.THREE.Matrix4();
+        const localFrustum = new this.THREE.Frustum();
+        const localBox = new this.THREE.Box3();
+
+        while (stack.length) {
+          const node = stack.pop();
+          if (!frustum.intersectsBox(node.box)) continue;
+          if (node.children) {
+            for (let i = 0; i < 8; i++) {
+              stack.push(node.children[i]);
+            }
+          }
+          if (node.items && node.items.length) {
+            for (let k = 0; k < node.items.length; k++) {
+              const it = node.items[k];
+              if (excludeSet && excludeSet.size > 0 && excludeSet.has(it.id)) continue;
+
+              // 1. 粗测：World AABB
+              if (frustum.intersectsBox(it.box)) {
+                // let isIntersect = true;
+                // if (it.box.userData && it.box.userData.obb) {
+                //   const obb = it.box.userData.obb;
+                //   // 计算从 World 到 Local 的变换矩阵
+                //   // inverseMatrix = (BizToThree * LocalMatrix)^-1 = LocalMatrix^-1 * ThreeToBiz
+                //   inverseMatrix.copy(obb.matrix).invert();
+
+                //   // 将 Frustum 变换到 Local Space
+                //   // 注意：这里需要深拷贝 Planes，因为 applyMatrix4 会修改 Plane
+                //   for (let i = 0; i < 6; i++) {
+                //     localFrustum.planes[i].copy(frustum.planes[i]).applyMatrix4(inverseMatrix);
+                //   }
+
+                //   // 构造 Local AABB
+                //   localBox.min.copy(obb.localMin);
+                //   localBox.max.copy(obb.localMax);
+
+                //   if (!localFrustum.intersectsBox(localBox)) {
+                //     isIntersect = false;
+                //   }
+                // }
+
+                // if (isIntersect) {
+                //   results.push({ modelId: it.id, box: it.box });
+                // }
+                results.push({ modelId: it.id, box: it.box });
+              }
+            }
+          }
+        }
+        return results;
+      },
+      setCameraFar() {
+        const bbox = sceneBoundingBox;
+        const center = bbox.getCenter(new this.THREE.Vector3());
+        const size = bbox.getSize(new this.THREE.Vector3());
+        const maxDist = size.length();
+        // const distance = camera.position.distanceTo(center);
+        camera.far = maxDist * 2;
+        // camera.far = 100;
+        camera.updateProjectionMatrix();
+      },
+      // 新增：当相机位于场景包围盒内时，动态调整相机远裁剪面
+      adjustCameraFarPlaneForSceneBox() {
+        try {
+          if (!camera || !sceneBoundingBox || !sceneBoundingBox.isBox3) return;
+
+          // 获取最新相机位置
+          camera.updateMatrixWorld(true);
+          const camPos = new this.THREE.Vector3().setFromMatrixPosition(camera.matrixWorld);
+
+          const min = sceneBoundingBox.min;
+          const max = sceneBoundingBox.max;
+
+          // 包围盒八个顶点
+          const vertices = [
+            new this.THREE.Vector3(min.x, min.y, min.z),
+            new this.THREE.Vector3(min.x, min.y, max.z),
+            new this.THREE.Vector3(min.x, max.y, min.z),
+            new this.THREE.Vector3(min.x, max.y, max.z),
+            new this.THREE.Vector3(max.x, min.y, min.z),
+            new this.THREE.Vector3(max.x, min.y, max.z),
+            new this.THREE.Vector3(max.x, max.y, min.z),
+            new this.THREE.Vector3(max.x, max.y, max.z),
+          ];
+
+          // 计算到最远顶点的距离
+          let maxDistance = 0;
+          for (const v of vertices) {
+            const dist = camPos.distanceTo(v);
+            if (dist > maxDistance) maxDistance = dist;
+          }
+
+          // 确保 newFar > near，且更新投影矩阵
+          const newFar = Math.max(maxDistance, camera.near + 0.1);
+          if (Math.abs(camera.far - newFar) > 1e-6) {
+            camera.far = newFar;
+            camera.updateProjectionMatrix();
+          }
+
+          // console.log('camera.far', camera.far)
+        } catch (e) {
+          // 防御式处理，避免交互中断
+        }
+      },
+      /**
+       * 计算当前相机视口在指定平面上的投影范围，并返回视椎体高度（min/max）。
+       * frustumY.min 会被限制：不小于平面在视椎体 x/z 范围内的最低 y 值（如果可计算）。
+       *
+       * @param {THREE.Camera} camera
+       * @param {number} width
+       * @param {number} height
+       * @param {THREE.Plane} plane - three.js 的 Plane，方程为: normal.dot(p) + constant = 0
+       * @param {Object} [opts]
+       * @param {boolean} [opts.includeFrustumY=false]
+       * @returns {Object|null} { planeBox: THREE.Box3|null, frustumBox: THREE.Box3, frustumY: {min, max} } 或 null（当没有平面交点且未请求 frustumY）
+       */
+      getScreenPlaneBounds(camera, width, height, plane, opts = {}) {
+        const { includeFrustumY = false } = opts;
+
+        camera.updateMatrixWorld();
+        if (camera.projectionMatrixNeedsUpdate) camera.updateProjectionMatrix();
+
+        const screenCorners = [
+          [0, 0], // 左下
+          [width, 0], // 右下
+          [0, height], // 左上
+          [width, height], // 右上
+        ];
+
+        // 计算视椎体 8 个角点（near/far 的四角）
+        const frustumPoints = [];
+        for (const [x, y] of screenCorners) {
+          const ndcBase = new this.THREE.Vector3(
+            (x / width) * 2 - 1,
+            -(y / height) * 2 + 1,
+            undefined
+          );
+
+          const ndcNear = ndcBase.clone();
+          ndcNear.z = -1;
+          frustumPoints.push(ndcNear.clone().unproject(camera));
+
+          const ndcFar = ndcBase.clone();
+          ndcFar.z = 1;
+          frustumPoints.push(ndcFar.clone().unproject(camera));
+        }
+
+        const frustumBox = new this.THREE.Box3().setFromPoints(frustumPoints);
+
+        // 顶视将视椎体投影到 XOZ 平面（沿 Y 方向投影），用其范围替代原来的屏幕到平面的交点范围
+        const a = plane.normal.x;
+        const b = plane.normal.y;
+        const c = plane.normal.z;
+        const d = plane.constant;
+        const EPS = 1e-8;
+
+        let planeBox = null;
+        if (Math.abs(b) >= EPS) {
+          // 使用“近平面 + 远平面”构成的体积进行投影
+          const nearCorners = [
+            frustumPoints[0],
+            frustumPoints[2],
+            frustumPoints[4],
+            frustumPoints[6],
+          ];
+          const farCorners = [
+            frustumPoints[1],
+            frustumPoints[3],
+            frustumPoints[5],
+            frustumPoints[7],
+          ];
+          const volumeCorners = nearCorners.concat(farCorners);
+          const projectedPoints = volumeCorners.map(p => {
+            const yProj = -(a * p.x + c * p.z + d) / b;
+            return new this.THREE.Vector3(p.x, yProj, p.z);
           });
-          // cameraControls.fitToSphere(scene, true); // TODO 待处理，先用 setModelCenter 进行定位
-          // this.setModelCenter(modelGroup);
-          this.home();
-          this.$emit('modelLoaded');
-          // cameraControls.saveState();
+          planeBox = new this.THREE.Box3().setFromPoints(projectedPoints);
+        }
+
+        if (!includeFrustumY && !planeBox) return null;
+
+        // helper: 计算视椎体远近裁剪面的 Y 轴投影范围（min/max）
+        // 基于 frustumPoints 中的 8 个角点：近面 [0,2,4,6]，远面 [1,3,5,7]
+        function computePlaneMinYOverBox(plane, box) {
+          const nearIndices = [0, 2, 4, 6];
+          const farIndices = [1, 3, 5, 7];
+          const nearYs = nearIndices.map(i => frustumPoints[i].y);
+          const farYs = farIndices.map(i => frustumPoints[i].y);
+          const minY = Math.min(...nearYs, ...farYs);
+          const maxY = Math.max(...nearYs, ...farYs);
+          return { min: minY, max: maxY };
         }
 
-        // 动态设置视角滚轮的距离
-        this.setCameraConfig();
+        // 基于远/近裁剪面角点计算在 Y 轴的投影范围（min/max）
+        const nearFarY = computePlaneMinYOverBox(plane, frustumBox);
+
+        const target = this.getCameraTargetOnPlane(camera, plane);
+
+        // 将最终范围限制在 sceneBoundingBox 内（若已存在）
+        let finalMinY = nearFarY.min;
+        let finalMaxY = nearFarY.max;
+        if (sceneBoundingBox && sceneBoundingBox.isBox3) {
+          finalMinY = Math.max(finalMinY, sceneBoundingBox.min.y);
+          finalMaxY = Math.min(finalMaxY, sceneBoundingBox.max.y);
+        }
+
+        return {
+          planeBox, // 顶视投影后的范围包围盒（可能为 null）
+          frustumBox, // 视椎体在世界空间的包围盒
+          frustumY: { min: finalMinY, max: finalMaxY },
+          ...target,
+        };
+      },
+
+      /**
+       * 计算相机射线与场景包围盒(sceneBoundingBox)的交点，以及该点到视椎体近裁剪面。
+       * 优先使用相机的目标点(cameraControls._target)确定射线方向；若不可用则回退为相机世界前向。
+       * 若包围盒为空，回退为根据当前模型组/场景计算一次包围盒。
+       * 若与包围盒无交点且提供了平面参数，则回退为与该平面的交点；仍无交点则将相机位置投影到该平面。
+       *
+       * @param {THREE.Camera} camera - 相机对象
+       * @param {THREE.Plane} [plane] - 可选，用于无包围盒交点时的回退平面
+       * @returns {Object} { targetPoint: THREE.Vector3, distanceToNearPlane: number, cameraPosition: THREE.Vector3, nearPlanePoint: THREE.Vector3 }
+       */
+      getCameraTargetOnPlane(camera, plane) {
+        camera.updateMatrixWorld();
+        if (camera.projectionMatrixNeedsUpdate) camera.updateProjectionMatrix();
+
+        // 相机世界位置
+        const cameraPosition = new this.THREE.Vector3().setFromMatrixPosition(camera.matrixWorld);
+
+        // 从相机指向目标点的射线方向（优先使用 cameraControls._target）
+        const rayDirection = new this.THREE.Vector3();
+        if (
+          typeof cameraControls !== 'undefined' &&
+          cameraControls &&
+          cameraControls.enabled &&
+          cameraControls._target
+        ) {
+          rayDirection.copy(cameraControls._target).sub(cameraPosition).normalize();
+        } else {
+          camera.getWorldDirection(rayDirection); // -Z 方向（世界坐标）
+        }
+
+        const ray = new this.THREE.Ray(cameraPosition.clone(), rayDirection.clone());
+
+        // 准备/计算场景包围盒
+        // if (!sceneBoundingBox) {
+        //   const box3 = new this.THREE.Box3();
+        //   if (typeof modelGroup !== 'undefined' && modelGroup) {
+        //     box3.expandByObject(modelGroup);
+        //   } else if (scene) {
+        //     box3.expandByObject(scene);
+        //   }
+        //   sceneBoundingBox = box3;
+        // }
+
+        // 与场景包围盒的交点（若无交点则进行回退）
+        // 计算与场景包围盒的交点（优先）
+        let boxHitPoint = null;
+        // 若包围盒不存在或为空，兜底从模型组/场景计算一次
+        if (
+          !sceneBoundingBox ||
+          (sceneBoundingBox.isBox3 && sceneBoundingBox.isEmpty && sceneBoundingBox.isEmpty())
+        ) {
+          const obj =
+            typeof modelGroup !== 'undefined' &&
+            modelGroup &&
+            modelGroup.children &&
+            modelGroup.children.length
+              ? modelGroup
+              : scene;
+          if (obj) {
+            sceneBoundingBox = new this.THREE.Box3().setFromObject(obj);
+          }
+        }
+        if (sceneBoundingBox && sceneBoundingBox.isBox3) {
+          boxHitPoint = ray.intersectBox(sceneBoundingBox, new this.THREE.Vector3());
+        }
+
+        // targetPoint 保留原平面回退逻辑（用于其他需要点位的场景）
+        let targetPoint = boxHitPoint;
+        if (!targetPoint) {
+          if (plane && plane.isPlane) {
+            targetPoint = ray.intersectPlane(plane, new this.THREE.Vector3());
+            if (!targetPoint) {
+              targetPoint = new this.THREE.Vector3();
+              plane.projectPoint(cameraPosition, targetPoint);
+            }
+          } else {
+            // 无平面参数时，给出一个前向的占位点
+            targetPoint = new this.THREE.Vector3();
+          }
+        }
+
+        // 以相机为原点，到包围盒交点的直线距离（若无交点则为 null）
+        const distanceToBox = boxHitPoint ? cameraPosition.distanceTo(boxHitPoint) : null;
+
+        return {
+          targetPoint,
+          distanceToNearPlane: distanceToBox, // 兼容旧字段名
+          distanceToBox,
+          cameraPosition,
+          hitPoint: boxHitPoint,
+          nearPlanePoint: null,
+          face: null,
+        };
+      },
+
+      /**
+       * 检测模型是否在当前视椎体内
+       * @param {THREE.Object3D} model - 要检测的模型对象
+       * @param {number} [instanceId] - InstancedMesh 的实例索引
+       * @param {THREE.Frustum} [frustum] - 预计算的视锥体对象
+       * @returns {boolean} 是否在视椎体内
+       */
+      isModelInFrustum(model, instanceId = null, frustum = null) {
+        if (!model || !camera) return true;
+
+        // 优先使用传入的 frustum，避免重复创建
+        if (!frustum) {
+          frustum = new this.THREE.Frustum();
+          const matrix = new this.THREE.Matrix4().multiplyMatrices(
+            camera.projectionMatrix,
+            camera.matrixWorldInverse
+          );
+          frustum.setFromProjectionMatrix(matrix);
+        }
+
+        let box;
+        // 针对 InstancedMesh 的特定实例进行检测
+        if (instanceId !== null && model.isInstancedMesh) {
+          const instanceMatrix = new this.THREE.Matrix4();
+          model.getMatrixAt(instanceId, instanceMatrix);
+          // 计算实例的世界变换矩阵: World = MeshWorld * InstanceLocal
+          const worldMatrix = instanceMatrix.premultiply(model.matrixWorld);
+
+          if (!model.geometry.boundingBox) {
+            model.geometry.computeBoundingBox();
+          }
+          box = model.geometry.boundingBox.clone();
+          box.applyMatrix4(worldMatrix);
+        } else {
+          // 获取模型的包围盒
+          box = new this.THREE.Box3().setFromObject(model);
+        }
+
+        // 检测包围盒是否与视椎体相交
+        return frustum.intersectsBox(box);
+      },
+
+      /**
+       * 计算模型的屏幕空间误差(SSE)
+       * SSE = (物体包围盒大小 * 视口高度) / (2 * 相机到物体包围盒中心距离 * tan(fov/2))
+       * @param {THREE.Object3D} model - 要计算SSE的模型对象
+       * @returns {number} SSE值
+       */
+      calculateSSE(model) {
+        if (!model || !camera || !renderer) return 0;
+
+        // 获取模型的包围盒
+        const box = new this.THREE.Box3().setFromObject(model);
+
+        // 计算包围盒的大小（使用对角线长度作为物体大小）
+        const size = box.getSize(new this.THREE.Vector3());
+        const objectSize = size.length();
+
+        // 获取包围盒中心点
+        const center = box.getCenter(new this.THREE.Vector3());
+
+        // 获取相机世界位置
+        const cameraPosition = new this.THREE.Vector3();
+        camera.getWorldPosition(cameraPosition);
+
+        // 计算相机到物体包围盒中心的距离
+        const distance = cameraPosition.distanceTo(center);
+
+        // 防止除零错误
+        if (distance === 0) return Infinity;
+
+        // 获取视口高度
+        const viewportHeight = renderer.domElement.clientHeight;
+
+        // 计算tan(fov/2)，fov是以度为单位
+        const halfFovRad = this.THREE.MathUtils.degToRad(camera.fov / 2);
+        const tanHalfFov = Math.tan(halfFovRad);
+
+        // 计算SSE
+        const sse = (objectSize * viewportHeight) / (2 * distance * tanHalfFov);
+
+        return { sse, distance };
+      },
+      // 针对已卸载实例的信息进行视锥体检测
+      isInstanceInfoInFrustum(instanceInfo) {
+        if (!instanceInfo || !camera) return true;
+        const { geometry, originalMatrix, parent } = instanceInfo;
+        if (!geometry || !originalMatrix) return false;
+
+        const frustum = new this.THREE.Frustum();
+        const vpMatrix = new this.THREE.Matrix4().multiplyMatrices(
+          camera.projectionMatrix,
+          camera.matrixWorldInverse
+        );
+        frustum.setFromProjectionMatrix(vpMatrix);
+
+        const parentWorld =
+          parent && parent.matrixWorld
+            ? parent.matrixWorld
+            : instanceInfo.parentWorldMatrix || new this.THREE.Matrix4();
+        const worldMatrix = parentWorld.clone().multiply(originalMatrix);
+
+        if (!geometry.boundingBox) {
+          geometry.computeBoundingBox();
+        }
+        const box = geometry.boundingBox.clone();
+        box.applyMatrix4(worldMatrix);
+
+        return frustum.intersectsBox(box);
+      },
+
+      /**
+       * 执行视椎体裁切，清理视椎体外的InstancedMesh实例
+       */
+      async performFrustumCulling() {
+        const modelState = this.noObserver
+          ? this.noObserver.modelStateManager
+          : this.modelStateManager;
+        if (!this.modelStateManager.frustumCheckEnabled || !scene) return;
+        const now = Date.now();
+        if (now - modelState.lastCullingTime < 100) {
+          return;
+        }
+        modelState.lastCullingTime = now;
+
+        // 预先创建视椎体，供后续遍历复用
+        if (!this._frustum) this._frustum = new this.THREE.Frustum();
+        if (!this._vpMatrix) this._vpMatrix = new this.THREE.Matrix4();
+
+        const globalFrustum = this._frustum;
+        const globalVpMatrix = this._vpMatrix.multiplyMatrices(
+          camera.projectionMatrix,
+          camera.matrixWorldInverse
+        );
+        globalFrustum.setFromProjectionMatrix(globalVpMatrix);
+
+        // 使用局部变量收集 ID，最后一次性赋值
+        const toUnload = [];
+        const bypassList = modelState.bypassCullingModelIds;
+        const visibleIds = [];
+        const candidates = [];
+        if (bypassList && bypassList.size > 0) {
+          bypassList.forEach(id => visibleIds.push(id));
+        }
+        const visibleIdSet = new Set(visibleIds);
+        if (this._octree) {
+          const frustum = this._getCurrentFrustum();
+          const exclude = bypassList || new Set();
+          const hits = this.queryOctreeByFrustum(frustum, exclude);
+          for (let i = 0; i < hits.length; i++) {
+            candidates.push(hits[i]);
+          }
+        } else if (this._boxIndex && this._boxIndex.size > 0) {
+          this._boxIndex.forEach((box, modelId) => {
+            if (bypassList && bypassList.size > 0 && bypassList.has(modelId)) return;
+            if (this.isBoxInFrustum(box)) {
+              candidates.push({ modelId, box });
+            }
+          });
+        }
+        const occlusionState = this.noObserver
+          ? this.noObserver.occlusionState
+          : this.occlusionState;
+        // 从响应式对象获取开关状态
+        const occlusionEnabled = this.occlusionState && this.occlusionState.enabled;
+
+        if (occlusionEnabled) {
+          const state = occlusionState;
+          const w =
+            renderer && renderer.domElement
+              ? renderer.domElement.clientWidth || renderer.domElement.width || 0
+              : 0;
+          const h =
+            renderer && renderer.domElement
+              ? renderer.domElement.clientHeight || renderer.domElement.height || 0
+              : 0;
+          // bufferWidth/Height 仍从响应式对象读取以支持动态修改
+          // 性能优化：使用降采样缓冲区进行遮挡剔除，大幅减少 readPixels 耗时 (从全屏降至约 256px 宽)
+          const aspectRatio = h > 0 ? w / h : 1;
+          let sw = this.occlusionState.bufferWidth || 256;
+          let sh = Math.floor(sw / aspectRatio);
+          sw = Math.max(1, sw);
+          sh = Math.max(1, sh);
+          let rt = state._colorRT;
+          const t0 = performance.now();
+          try {
+            if (!rt || state._rtW !== sw || state._rtH !== sh) {
+              if (rt && typeof rt.dispose === 'function') rt.dispose();
+              rt = new this.THREE.WebGLRenderTarget(sw, sh, {
+                depthBuffer: true,
+                stencilBuffer: false,
+                samples: 0
+              });
+              rt.texture.minFilter = this.THREE.NearestFilter;
+              rt.texture.magFilter = this.THREE.NearestFilter;
+              rt.texture.generateMipmaps = false;
+              rt.texture.type = this.THREE.UnsignedByteType;
+              rt.texture.format = this.THREE.RGBAFormat;
+              rt.samples = 0;
+              state._colorRT = rt;
+              state._rtW = sw;
+              state._rtH = sh;
+              state._colorBuffer = new Uint8Array(sw * sh * 4);
+            } else if (!state._colorBuffer || state._colorBuffer.length !== sw * sh * 4) {
+              state._colorBuffer = new Uint8Array(sw * sh * 4);
+            }
+
+            if (!state._occScene) state._occScene = new this.THREE.Scene();
+            // if (!state._occPerfStats) state._occPerfStats = Object.create(null);
+            // const _occRecordPerf = (name, ms, meta) => {
+            //   const stats = state._occPerfStats;
+            //   const prev = stats[name];
+            //   const next = prev || { count: 0, total: 0, max: 0, last: 0, meta: null };
+            //   next.count++;
+            //   next.total += ms;
+            //   next.last = ms;
+            //   if (ms > next.max) next.max = ms;
+            //   if (meta) next.meta = meta;
+            //   stats[name] = next;
+            // };
+
+            // 过滤掉透明物体
+            const opaqueCandidates = [];
+            const transparentCandidates = [];
+            for (let i = 0; i < candidates.length; i++) {
+              if (candidates[i].box.userData && candidates[i].box.userData.transparent) {
+                transparentCandidates.push(candidates[i]);
+              } else {
+                opaqueCandidates.push(candidates[i]);
+              }
+            }
+
+            const totalInstances = opaqueCandidates.length;
+            const transparentTotal = transparentCandidates.length;
+            const activeIdIndexArr =
+              state._occIdIndexArr && Array.isArray(state._occIdIndexArr)
+                ? state._occIdIndexArr
+                : (state._occIdIndexArr = []);
+            const transparentIdIndexArr =
+              state._occTransparentIdIndexArr && Array.isArray(state._occTransparentIdIndexArr)
+                ? state._occTransparentIdIndexArr
+                : (state._occTransparentIdIndexArr = []);
+
+            if (!state._occRenderObjects) state._occRenderObjects = Object.create(null);
+            const occObjs = state._occRenderObjects;
+            if (!occObjs._initialized) {
+              state._occScene.clear();
+              occObjs._initialized = true;
+            }
+
+            // const children = state._occScene.children;
+            // while (children.length > 0) {
+            //   const child = children.pop(); // O(1) 删除末尾
+
+            //   if (child.geometry) child.geometry.dispose();
+            //   if (child.material) {
+            //     if (Array.isArray(child.material)) child.material.forEach(m => m.dispose());
+            //     else child.material.dispose();
+            //   }
+
+            //   // 手动断开引用
+            //   child.parent = null;
+            //   // child.dispatchEvent({ type: 'removed' }); // 保持轻量，暂不触发事件
+            // }
+
+            const asyncBuildEnabled =
+              this.occlusionState && this.occlusionState.asyncBuildEnabled && !!window.requestAnimationFrame;
+
+            const _occBuild = opaqueList => {
+              const tBuild0 = performance.now();
+
+              const flag1Items = [];
+              const flag3Items = [];
+
+              let globalIdx = 1;
+              for (let i = 0; i < opaqueList.length; i++) {
+                const c = opaqueList[i];
+                const obbData = c.box && c.box.userData ? c.box.userData.obbData : null;
+                if (!obbData || !obbData.length) continue;
+                const idx = globalIdx++;
+                activeIdIndexArr[idx] = this.formatModelId(c.modelId);
+
+                const flag = (c.box.userData && c.box.userData.flag) || 1;
+                if (flag === 3 && c.box.userData && c.box.userData.obb) {
+                  flag3Items.push({ c, idx });
+                } else if (flag === 1) {
+                  flag1Items.push({ c, idx });
+                }
+              }
+              const maxIdx = globalIdx - 1;
+              activeIdIndexArr.length = maxIdx + 1;
+
+              const _tempMatrix = occObjs._tempMatrix || (occObjs._tempMatrix = new this.THREE.Matrix4());
+              const _tempColor = occObjs._tempColor || (occObjs._tempColor = new this.THREE.Color());
+              const _tempScale = occObjs._tempScale || (occObjs._tempScale = new this.THREE.Vector3());
+              const _tempVec3 = occObjs._tempVec3 || (occObjs._tempVec3 = new this.THREE.Vector3());
+              const _tempMatA = occObjs._tempMatA || (occObjs._tempMatA = new this.THREE.Matrix4());
+
+              let boxes = occObjs.boxes;
+              const boxCount = flag3Items.length;
+              if (boxCount > 0) {
+                const needCapacity = boxCount;
+                const capacity = boxes && typeof boxes.capacity === 'number' ? boxes.capacity : 0;
+                if (!boxes || capacity < needCapacity) {
+                  if (boxes && boxes.mesh) {
+                    state._occScene.remove(boxes.mesh);
+                    if (boxes.mesh.geometry) boxes.mesh.geometry.dispose();
+                    if (boxes.mesh.material) boxes.mesh.material.dispose();
+                  }
+                  const nextCap = Math.max(needCapacity, capacity > 0 ? capacity * 2 : 256);
+                  const geometry = new this.THREE.BoxGeometry(1, 1, 1);
+                  const mat = new this.THREE.MeshBasicMaterial({
+                    color: 0xffffff,
+                    side: this.THREE.DoubleSide,
+                    blending: this.THREE.NoBlending,
+                    depthTest: true,
+                    depthWrite: true,
+                    toneMapped: false,
+                  });
+                  const mesh = new this.THREE.InstancedMesh(geometry, mat, nextCap);
+                  mesh.frustumCulled = false;
+                  mesh.matrixAutoUpdate = false;
+                  state._occScene.add(mesh);
+                  boxes = occObjs.boxes = { mesh, capacity: nextCap };
+                } else if (boxes.mesh && boxes.mesh.parent !== state._occScene) {
+                  state._occScene.add(boxes.mesh);
+                }
+                boxes.mesh.count = boxCount;
+                for (let i = 0; i < boxCount; i++) {
+                  const item = flag3Items[i];
+                  const { matrix, halfSize } = item.c.box.userData.obb;
+                  const idx = item.idx;
+                  const r = (idx & 255) / 255;
+                  const g = ((idx >> 8) & 255) / 255;
+                  const b = ((idx >> 16) & 255) / 255;
+                  _tempColor.setRGB(r, g, b);
+
+                  _tempScale.copy(halfSize).multiplyScalar(2);
+                  _tempMatrix.copy(matrix);
+                  _tempMatrix.scale(_tempScale);
+                  if (typeof bizToThreeMatrix !== 'undefined' && bizToThreeMatrix) {
+                    _tempMatrix.premultiply(bizToThreeMatrix);
+                  }
+
+                  boxes.mesh.setMatrixAt(i, _tempMatrix);
+                  boxes.mesh.setColorAt(i, _tempColor);
+                }
+                boxes.mesh.instanceMatrix.needsUpdate = true;
+                if (boxes.mesh.instanceColor) boxes.mesh.instanceColor.needsUpdate = true;
+                boxes.mesh.visible = true;
+              } else if (boxes && boxes.mesh) {
+                boxes.mesh.count = 0;
+                boxes.mesh.visible = false;
+              }
+
+              let batch1 = occObjs.batch1;
+              const flag1Count = flag1Items.length;
+              if (flag1Count > 0) {
+                let totalVerts = 0;
+                let totalIdx = 0;
+                for (let i = 0; i < flag1Count; i++) {
+                  const c = flag1Items[i].c;
+                  const obbData = c.box.userData.obbData;
+                  const v = (obbData.length / 3) | 0;
+                  totalVerts += v;
+                  const indices = c.box.userData.indices || [];
+                  totalIdx += indices && indices.length ? indices.length : v;
+                }
+
+                const needPos = totalVerts * 3;
+                const needIdx = totalIdx;
+
+                const ensureBatch1 = () => {
+                  if (batch1 && batch1.mesh && batch1.geometry && batch1.material) return;
+                  const geometry = new this.THREE.BufferGeometry();
+                  const material = new this.THREE.MeshBasicMaterial({
+                    vertexColors: true,
+                    side: this.THREE.DoubleSide,
+                    blending: this.THREE.NoBlending,
+                    depthTest: true,
+                    depthWrite: true,
+                    toneMapped: false,
+                  });
+                  const mesh = new this.THREE.Mesh(geometry, material);
+                  mesh.frustumCulled = false;
+                  batch1 = occObjs.batch1 = { mesh, geometry, material, posCap: 0, idxCap: 0 };
+                  state._occScene.add(mesh);
+                };
+                ensureBatch1();
+
+                if (batch1.mesh.parent !== state._occScene) {
+                  state._occScene.add(batch1.mesh);
+                }
+
+                if (batch1.posCap < needPos || batch1.idxCap < needIdx) {
+                  batch1.posCap = Math.max(needPos, batch1.posCap > 0 ? batch1.posCap * 2 : needPos);
+                  batch1.idxCap = Math.max(needIdx, batch1.idxCap > 0 ? batch1.idxCap * 2 : needIdx);
+
+                  const positions = new Float32Array(batch1.posCap);
+                  const colors = new Float32Array(batch1.posCap);
+                  const indices = new Uint32Array(batch1.idxCap);
+
+                  batch1.positions = positions;
+                  batch1.colors = colors;
+                  batch1.indices = indices;
+
+                  const posAttr = new this.THREE.BufferAttribute(positions, 3);
+                  const colAttr = new this.THREE.BufferAttribute(colors, 3);
+                  posAttr.setUsage(this.THREE.DynamicDrawUsage);
+                  colAttr.setUsage(this.THREE.DynamicDrawUsage);
+                  batch1.geometry.setAttribute('position', posAttr);
+                  batch1.geometry.setAttribute('color', colAttr);
+
+                  const idxAttr = new this.THREE.BufferAttribute(indices, 1);
+                  idxAttr.setUsage(this.THREE.DynamicDrawUsage);
+                  batch1.geometry.setIndex(idxAttr);
+                }
+
+                const positions = batch1.positions;
+                const colors = batch1.colors;
+                const indices = batch1.indices;
+
+                let posPtr = 0;
+                let idxPtr = 0;
+                let vertBase = 0;
+
+                for (let i = 0; i < flag1Count; i++) {
+                  const { c, idx } = flag1Items[i];
+                  const obbData = c.box.userData.obbData;
+                  const indicesIn = c.box.userData.indices || [];
+                  const matrixArr = c.box.userData.matrix || [];
+
+                  const r = (idx & 255) / 255;
+                  const g = ((idx >> 8) & 255) / 255;
+                  const b = ((idx >> 16) & 255) / 255;
+
+                  const vertexCount = (obbData.length / 3) | 0;
+                  const needTransform =
+                    (matrixArr && matrixArr.length >= 16) ||
+                    (typeof bizToThreeMatrix !== 'undefined' && bizToThreeMatrix);
+
+                  if (needTransform) {
+                    if (matrixArr && matrixArr.length >= 16) {
+                      _tempMatA.fromArray(matrixArr);
+                    } else {
+                      _tempMatA.identity();
+                    }
+                    if (typeof bizToThreeMatrix !== 'undefined' && bizToThreeMatrix) {
+                      _tempMatA.premultiply(bizToThreeMatrix);
+                    }
+                  }
+
+                  if (!needTransform && ArrayBuffer.isView(obbData)) {
+                    positions.set(obbData, posPtr);
+                    for (let v = 0; v < vertexCount; v++) {
+                      const c0 = posPtr + v * 3;
+                      colors[c0] = r;
+                      colors[c0 + 1] = g;
+                      colors[c0 + 2] = b;
+                    }
+                    posPtr += vertexCount * 3;
+                  } else {
+                    let srcPtr = 0;
+                    for (let v = 0; v < vertexCount; v++) {
+                      const x = obbData[srcPtr++];
+                      const y = obbData[srcPtr++];
+                      const z = obbData[srcPtr++];
+                      if (needTransform) {
+                        _tempVec3.set(x, y, z).applyMatrix4(_tempMatA);
+                        positions[posPtr] = _tempVec3.x;
+                        positions[posPtr + 1] = _tempVec3.y;
+                        positions[posPtr + 2] = _tempVec3.z;
+                      } else {
+                        positions[posPtr] = x;
+                        positions[posPtr + 1] = y;
+                        positions[posPtr + 2] = z;
+                      }
+                      colors[posPtr] = r;
+                      colors[posPtr + 1] = g;
+                      colors[posPtr + 2] = b;
+                      posPtr += 3;
+                    }
+                  }
+
+                  if (indicesIn && indicesIn.length) {
+                    for (let k = 0; k < indicesIn.length; k++) {
+                      indices[idxPtr++] = (indicesIn[k] | 0) + vertBase;
+                    }
+                  } else {
+                    for (let k = 0; k < vertexCount; k++) {
+                      indices[idxPtr++] = vertBase + k;
+                    }
+                  }
+                  vertBase += vertexCount;
+                }
+
+                batch1.geometry.setDrawRange(0, idxPtr);
+                const posAttr = batch1.geometry.getAttribute('position');
+                const colAttr = batch1.geometry.getAttribute('color');
+                const idxAttr = batch1.geometry.getIndex();
+                posAttr.needsUpdate = true;
+                colAttr.needsUpdate = true;
+                if (idxAttr) idxAttr.needsUpdate = true;
+                batch1.mesh.visible = true;
+              } else if (batch1 && batch1.mesh) {
+                batch1.mesh.visible = false;
+                if (batch1.geometry) batch1.geometry.setDrawRange(0, 0);
+              }
+
+              // const tBuild1 = performance.now();
+              // _occRecordPerf('occ_build_ms', tBuild1 - tBuild0, {
+              //   totalInstances,
+              //   flag1: flag1Count,
+              //   flag3: boxCount,
+              // });
+              state._occMaxIdx = maxIdx;
+              state._occHasBuiltOnce = true;
+            };
+
+            if (totalInstances > 0) {
+              if (asyncBuildEnabled && state._occHasBuiltOnce) {
+                if (!state._occAsyncBuild) state._occAsyncBuild = { pending: false, token: 0 };
+                const asyncState = state._occAsyncBuild;
+                if (!asyncState.pending) {
+                  asyncState.pending = true;
+                  const token = (asyncState.token + 1) | 0;
+                  asyncState.token = token;
+                  const opaqueSnapshot = opaqueCandidates.slice();
+                  window.requestAnimationFrame(() => {
+                    const cur = state._occAsyncBuild;
+                    if (!cur || cur.token !== token) return;
+                    try {
+                      _occBuild(opaqueSnapshot);
+                    } finally {
+                      if (state._occAsyncBuild && state._occAsyncBuild.token === token) {
+                        state._occAsyncBuild.pending = false;
+                      }
+                    }
+                  });
+                }
+              } else {
+                _occBuild(opaqueCandidates);
+              }
+            } else {
+              if (occObjs.boxes && occObjs.boxes.mesh) occObjs.boxes.mesh.visible = false;
+              if (occObjs.batch1 && occObjs.batch1.mesh) occObjs.batch1.mesh.visible = false;
+              state._occMaxIdx = 0;
+              activeIdIndexArr.length = 0;
+            }
+
+            if (!state._occTransparentScene) state._occTransparentScene = new this.THREE.Scene();
+            let transparentMesh = state._occTransparentMesh;
+            const transparentCapacity =
+              transparentMesh && transparentMesh.userData && typeof transparentMesh.userData.capacity === 'number'
+                ? transparentMesh.userData.capacity
+                : 0;
+            if (!transparentMesh || transparentCapacity < transparentTotal) {
+              if (transparentMesh) {
+                if (transparentMesh.geometry) transparentMesh.geometry.dispose();
+                if (transparentMesh.material) transparentMesh.material.dispose();
+                state._occTransparentScene.remove(transparentMesh);
+              }
+              const nextCap = Math.max(transparentTotal, transparentCapacity > 0 ? transparentCapacity * 2 : 256);
+              const geometry = new this.THREE.BoxGeometry(1, 1, 1);
+              const material = new this.THREE.MeshBasicMaterial({
+                color: 0xffffff,
+                side: this.THREE.DoubleSide,
+                blending: this.THREE.NoBlending,
+                depthTest: true,
+                depthWrite: false,
+                toneMapped: false,
+              });
+              transparentMesh = new this.THREE.InstancedMesh(geometry, material, nextCap);
+              transparentMesh.frustumCulled = false;
+              transparentMesh.matrixAutoUpdate = false;
+              transparentMesh.userData.capacity = nextCap;
+              state._occTransparentMesh = transparentMesh;
+              state._occTransparentScene.add(transparentMesh);
+            } else if (transparentMesh.parent !== state._occTransparentScene) {
+              state._occTransparentScene.add(transparentMesh);
+            }
+            if (transparentTotal > 0) {
+              const tempMatrix = new this.THREE.Matrix4();
+              const tempScale = new this.THREE.Vector3();
+              const tempObj = new this.THREE.Object3D();
+              const tempColor = new this.THREE.Color();
+              let tIdx = 1;
+              for (let i = 0; i < transparentTotal; i++) {
+                const c = transparentCandidates[i];
+                const idx = tIdx++;
+                transparentIdIndexArr[idx] = this.formatModelId(c.modelId);
+                const r = (idx & 255) / 255;
+                const g = ((idx >> 8) & 255) / 255;
+                const b = ((idx >> 16) & 255) / 255;
+                tempColor.setRGB(r, g, b);
+                if (c.box.userData && c.box.userData.obb) {
+                  const { matrix, halfSize } = c.box.userData.obb;
+                  tempMatrix.copy(matrix);
+                  tempScale.copy(halfSize).multiplyScalar(2);
+                  tempMatrix.scale(tempScale);
+                  if (typeof bizToThreeMatrix !== 'undefined' && bizToThreeMatrix) {
+                    tempMatrix.premultiply(bizToThreeMatrix);
+                  }
+                } else {
+                  c.box.getSize(tempScale);
+                  c.box.getCenter(tempObj.position);
+                  tempObj.scale.copy(tempScale);
+                  tempObj.rotation.set(0, 0, 0);
+                  tempObj.updateMatrix();
+                  tempMatrix.copy(tempObj.matrix);
+                }
+                transparentMesh.setMatrixAt(i, tempMatrix);
+                transparentMesh.setColorAt(i, tempColor);
+              }
+              transparentMesh.count = transparentTotal;
+              transparentMesh.visible = true;
+              transparentMesh.instanceMatrix.needsUpdate = true;
+              if (transparentMesh.instanceColor) transparentMesh.instanceColor.needsUpdate = true;
+              const tMaxIdx = tIdx - 1;
+              transparentIdIndexArr.length = tMaxIdx + 1;
+              state._occTransparentMaxIdx = tMaxIdx;
+            } else if (transparentMesh) {
+              transparentMesh.count = 0;
+              transparentMesh.visible = false;
+              transparentIdIndexArr.length = 0;
+              state._occTransparentMaxIdx = 0;
+            }
+
+            // console.log('renderer', renderer)
+            const prevToneMapping = renderer.toneMapping;
+            const prevTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
+            let prevClearColorHex = 0x000000;
+            let prevClearAlpha = 0;
+            try {
+              const c = renderer.getClearColor ? renderer.getClearColor() : null;
+              if (c && c.isColor) prevClearColorHex = c.getHex();
+              prevClearAlpha =
+                typeof renderer.getClearAlpha === 'function' ? renderer.getClearAlpha() : 0;
+            } catch (_) {}
+            renderer.toneMapping = this.THREE.NoToneMapping;
+            renderer.setRenderTarget(rt);
+            renderer.setClearColor(new this.THREE.Color(0, 0, 0), 0);
+            renderer.clear(true, true, false);
+            camera.updateMatrixWorld(true);
+            renderer.render(state._occScene, camera);
+            sceneBoundingBox = new this.THREE.Box3().setFromObject(state._occScene);
+            // const t1 = performance.now();
+            // 从响应式对象读取 previewEnabled
+
+            // const tPreview0 = performance.now();
+            if (this.occlusionState.previewEnabled) {
+              if (!state._previewCanvas) {
+                const cvs = document.createElement('canvas');
+                cvs.style.position = 'fixed';
+                cvs.style.right = '8px';
+                cvs.style.bottom = '8px';
+                cvs.style.pointerEvents = 'none';
+                cvs.style.zIndex = '9999';
+                cvs.style.border = '1px solid #000';
+                document.body.appendChild(cvs);
+                state._previewCanvas = cvs;
+                state._previewCtx = cvs.getContext('2d');
+              }
+              if (!state._previewBuffer || state._previewBuffer.length !== sw * sh * 4) {
+                state._previewBuffer = new Uint8Array(sw * sh * 4);
+              }
+              state._previewCanvas.width = sw;
+              state._previewCanvas.height = sh;
+              const cssW = Math.min(renderer.domElement.width / 5);
+              const cssH = Math.min(renderer.domElement.height / 5);
+              state._previewCanvas.style.width = cssW + 'px';
+              state._previewCanvas.style.height = cssH + 'px';
+              renderer.readRenderTargetPixels(rt, 0, 0, sw, sh, state._previewBuffer);
+              if (
+                !state._previewImageData ||
+                state._previewImageData.width !== sw ||
+                state._previewImageData.height !== sh
+              ) {
+                state._previewImageData = state._previewCtx.createImageData(sw, sh);
+              }
+              const dst = state._previewImageData.data;
+              const src = state._previewBuffer;
+              for (let row = 0; row < sh; row++) {
+                const srcRow = (sh - 1 - row) * sw * 4;
+                const dstRow = row * sw * 4;
+                dst.set(src.subarray(srcRow, srcRow + sw * 4), dstRow);
+              }
+              state._previewCtx.putImageData(state._previewImageData, 0, 0);
+            } else {
+              if (state._previewCanvas) {
+                if (state._previewCanvas.parentNode)
+                  state._previewCanvas.parentNode.removeChild(state._previewCanvas);
+                state._previewCanvas = null;
+                state._previewCtx = null;
+                state._previewBuffer = null;
+                state._previewImageData = null;
+              }
+            }
+            // const tPreview1 = performance.now();
+            // _occRecordPerf('occ_preview_ms', tPreview1 - tPreview0, { sw, sh });
+            renderer.readRenderTargetPixels(rt, 0, 0, sw, sh, state._colorBuffer);
+
+            const idIndexArr = activeIdIndexArr;
+            const maxIdx = typeof state._occMaxIdx === 'number' ? state._occMaxIdx : 0;
+            const totalPixels = sw * sh;
+            const targetSamples = totalPixels;
+            const baseStride = Math.max(
+              1,
+              Math.floor(Math.sqrt(totalPixels / Math.max(1, targetSamples)))
+            );
+            const extraStride =
+              this.occlusionState && this.occlusionState.sampleStride
+                ? this.occlusionState.sampleStride
+                : 1;
+            const stride = Math.max(1, baseStride * Math.max(1, extraStride));
+            const minSampleCount =
+              this.occlusionState && this.occlusionState.minSampleCount
+                ? this.occlusionState.minSampleCount
+                : 1;
+            const scanResult = await this.scanOcclusionIndices(
+              state._colorBuffer,
+              sw,
+              sh,
+              stride,
+              maxIdx,
+              minSampleCount
+            );
+            if (scanResult && scanResult.buffer) {
+              state._colorBuffer = new Uint8Array(scanResult.buffer);
+            }
+            const indices = scanResult && scanResult.indices ? scanResult.indices : [];
+            for (let i = 0; i < indices.length; i++) {
+              const id = idIndexArr[indices[i]];
+              if (typeof id !== 'undefined') {
+                visibleIdSet.add(id);
+              }
+            }
+
+            const transparentMaxIdx =
+              typeof state._occTransparentMaxIdx === 'number' ? state._occTransparentMaxIdx : 0;
+            if (transparentMaxIdx > 0 && transparentMesh && transparentMesh.visible) {
+              renderer.setClearColor(new this.THREE.Color(0, 0, 0), 0);
+              renderer.clear(true, false, false);
+              renderer.render(state._occTransparentScene, camera);
+              renderer.readRenderTargetPixels(rt, 0, 0, sw, sh, state._colorBuffer);
+
+              const tIdIndexArr = transparentIdIndexArr;
+              const tScanResult = await this.scanOcclusionIndices(
+                state._colorBuffer,
+                sw,
+                sh,
+                stride,
+                transparentMaxIdx,
+                minSampleCount
+              );
+              if (tScanResult && tScanResult.buffer) {
+                state._colorBuffer = new Uint8Array(tScanResult.buffer);
+              }
+              const tIndices = tScanResult && tScanResult.indices ? tScanResult.indices : [];
+              for (let i = 0; i < tIndices.length; i++) {
+                const id = tIdIndexArr[tIndices[i]];
+                if (typeof id !== 'undefined') {
+                  visibleIdSet.add(id);
+                }
+              }
+            }
+
+            renderer.setRenderTarget(prevTarget);
+            renderer.setClearColor(prevClearColorHex, prevClearAlpha);
+            renderer.toneMapping = prevToneMapping;
+          } catch (e) {
+            for (let i = 0; i < candidates.length; i++) {
+              visibleIdSet.add(candidates[i].modelId);
+            }
+          }
+        } else {
+          for (let i = 0; i < candidates.length; i++) {
+            visibleIdSet.add(candidates[i].modelId);
+          }
+        }
+        visibleIds.length = 0;
+        visibleIdSet.forEach(id => visibleIds.push(id));
+        const toLoadSet = new Set(visibleIdSet);
+        const parentsToCheck = new Set();
+        scene.traverse(child => {
+          if (!child.isInstancedMesh) return;
+          // 如果复用数量等于大于2个，则跳过裁剪和剔除处理（始终保留）
+          if (child.count >= 2) {
+            let instancesMap =
+              child && child.userData && child.userData.instancesMap instanceof Map
+                ? child.userData.instancesMap
+                : child.parent &&
+                  child.parent.userData &&
+                  child.parent.userData.instancesMap instanceof Map
+                ? child.parent.userData.instancesMap
+                : null;
+
+            if (instancesMap) {
+              let allInactive = true;
+              const modelIds = Array.from(instancesMap.keys());
+
+              // 第一遍遍历：检查是否有任何一个实例处于活跃状态（在视锥体内且可见）
+              for (const modelId of modelIds) {
+                // 检查已取消勾选模型进行卸载
+                const documentId = modelId.split(':')[1];
+                if(!this.noObserver.documentModelIds.get(documentId)){
+                  toUnload.push({ modelId, child });
+                  return;
+                }
+
+                if (bypassList && bypassList.size > 0 && bypassList.has(modelId)) return;
+
+                const instanceInfo = instancesMap.get(modelId);
+                const instanceIndex =
+                  instanceInfo && typeof instanceInfo.instanceIndex === 'number'
+                    ? instanceInfo.instanceIndex
+                    : null;
+
+                const inFrustum = this.isModelInFrustum(child, instanceIndex, globalFrustum);
+                const modelInVisible = toLoadSet.has(modelId);
+                // console.log('modelId', modelId, 'inFrustum', inFrustum, 'modelInVisible', modelInVisible)
+
+                // 只要有一个实例在视锥体内且在可见列表中，就不整体卸载
+                if (inFrustum || modelInVisible) {
+                  allInactive = false;
+                }
+              }
+
+              // 第二遍遍历：同步状态并决定是否卸载
+              for (const modelId of modelIds) {
+                // 无论是否卸载，只要模型已在场景中，就从待加载集合中移除
+                if (toLoadSet.has(modelId)) {
+                  toLoadSet.delete(modelId);
+                }
+
+                // 仅当所有实例都不活跃时，才执行卸载
+                if (!firstPerSign && !roaming && allInactive) {
+                  toUnload.push({ modelId, child });
+                }
+              }
+            }
+            // if (toLoadSet.has(modelId)) {
+            //   toLoadSet.delete(modelId);
+            // }
+            return;
+          }
+          const modelId =
+            child.parent && child.parent.userData && child.parent.userData.instanceId
+              ? child.parent.userData.instanceId
+              : child.uuid;
+          if (bypassList && bypassList.size > 0 && bypassList.has(modelId)) return;
+
+          const inFrustum = this.isModelInFrustum(child, null, globalFrustum);
+          let modelInVisible = toLoadSet.has(modelId);
+          if (modelInVisible) {
+            toLoadSet.delete(modelId);
+          }
+          if (!firstPerSign && !roaming && (!inFrustum || !modelInVisible)) {
+            toUnload.push({ modelId, child });
+          }
+        });
+        for (const { modelId, child } of toUnload) {
+          if (child && child.parent) parentsToCheck.add(child.parent);
+          this.unloadInstancedModel(modelId, child);
+        }
+        if (scene) {
+          parentsToCheck.forEach(group => {
+            if (group && group.children && group.children.length === 0) {
+              group.removeFromParent();
+            }
+          });
+        }
+        this.modelStateManager.isloadedModelsIds = Object.freeze(Array.from(toLoadSet));
+      },
+      isBoxInFrustum(box) {
+        if (!camera) return true;
+        const frustum = new this.THREE.Frustum();
+        const vpMatrix = new this.THREE.Matrix4().multiplyMatrices(
+          camera.projectionMatrix,
+          camera.matrixWorldInverse
+        );
+        frustum.setFromProjectionMatrix(vpMatrix);
+        return frustum.intersectsBox(box);
+      },
+      formatModelId(modelId) {
+        return Number.isNaN(+modelId) ? modelId : +modelId;
+      },
+      /**
+       * 卸载InstancedMesh实例以释放内存
+       * @param {string} modelId - 模型ID
+       * @param {THREE.InstancedMesh} instancedMesh - InstancedMesh对象
+       */
+      unloadInstancedModel(modelId, instancedMesh) {
+        if (!instancedMesh || !instancedMesh.userData) return;
+
+        // 卸载前内存快照
+        // this.logRendererMemory(`before unload modelId=${modelId}`);
+        const { instanceIndex } = instancedMesh.userData.instancesMap.get(modelId) || 0;
+        // const instanceIndex = instancedMesh.userData.instanceIndex || 0;
+
+        this.removeOutlineInstanceProxy(instancedMesh, instanceIndex);
+
+        // 保存InstancedMesh实例信息用于后续重新加载
+        const instanceInfo = {
+          geometry: instancedMesh.geometry,
+          material: instancedMesh.material,
+          instancedMesh: instancedMesh,
+          instanceIndex: instanceIndex,
+          userData: { ...instancedMesh.userData },
+          // 保存当前实例的变换矩阵
+          originalMatrix: instancedMesh.userData.copyMatrix
+            ? instancedMesh.userData.copyMatrix.clone()
+            : new this.THREE.Matrix4(),
+          // 保存当前实例的颜色
+          originalColor: instancedMesh.material.userData.nColor
+            ? instancedMesh.material.userData.nColor.clone()
+            : new this.THREE.Color(1, 1, 1),
+        };
+
+        // 完全删除实例
+        instanceInfo.parent = instancedMesh.parent || null;
+        instanceInfo.parentWorldMatrix =
+          instancedMesh.parent && instancedMesh.parent.matrixWorld
+            ? instancedMesh.parent.matrixWorld.clone()
+            : new this.THREE.Matrix4();
+        instanceInfo.count = typeof instancedMesh.count === 'number' ? instancedMesh.count : 1;
+
+        const parentGroup = instancedMesh.parent;
+        if (parentGroup) {
+          parentGroup.remove(instancedMesh);
+          // 延迟移除空父组：避免在遍历期间改变树结构，这里不再立即移除 parentGroup
+        }
+
+        // 触发实例相关资源释放（instanceMatrix / instanceColor / morphTexture 等）
+        instancedMesh.dispose();
+
+        // 条件释放基础几何与材质（不共享时）
+        const geometry = instanceInfo.geometry;
+        const material = instanceInfo.material;
+
+        // if (geometry && !this.isGeometryShared(geometry)) {
+        if (geometry) {
+          geometry.dispose();
+        }
+
+        if (material) {
+          if (Array.isArray(material)) {
+            material.forEach(m => {
+              // if (m && !this.isMaterialShared(m)) m.dispose();
+              if (m) m.dispose();
+            });
+          } else {
+            // if (!this.isMaterialShared(material)) material.dispose();
+            material.dispose();
+          }
+        }
+
+        // 置空实例引用（几何/材质对象仍保留以支持后续复用，GPU资源已释放）
+        instanceInfo.instancedMesh = null;
+      },
+
+      /**
+       * 重新加载InstancedMesh实例
+       * @param {string} modelId - 模型ID
+       */
+      reloadInstancedModel(modelId) {
+        // 移除重新加载逻辑实现
+        return;
+      },
+
+      /**
+       * 初始化流式加载器
+       * @param {Object} modelApi - 模型API接口
+       * @param {Object} config - 其他配置
+       */
+      initStreamLoader(modelApi, config = {}) {
+        const { projectId, pbsId, version, ...restConfig } = config || {};
+        const streamLoader = new StreamLoader({
+          modelApi,
+          projectId,
+          debug: isDebug,
+          renderModelData: this.renderModelData.bind(this),
+          ensureNotInteracting: async abortSignal => {
+            if (
+              userInteracting ||
+              this.noObserver.batchLoadingState.interactionState.isInteracting
+            ) {
+              await new Promise(resolve => setTimeout(resolve, 0));
+            }
+          },
+          batchSize: this.noObserver.batchLoadingState.batchSize,
+          onCancelRequestId: async requestId => {
+            if (modelApi && typeof modelApi.postCanceledRequest === 'function') {
+              return await modelApi.postCanceledRequest(requestId);
+            }
+            return null;
+          },
+          ...restConfig,
+        });
+        this.noObserver.streamLoader = streamLoader;
+      },
+
+      /**
+       * 设置当前流式加载的模型数据
+       * @param {Object} item - 模型项信息
+       * @param {Object} materialData - 材质数据
+       */
+      setStreamModel(item, materialData) {
+        if (this.noObserver.streamLoader) {
+          this.noObserver.streamLoader.setCurrentModel(item, materialData);
+          // 设置完模型后，尝试触发一次范围加载以渲染初始视图
+          // 使用 setTimeout 确保在下一帧执行，避免当前栈还在初始化中
+          setTimeout(() => {
+            this.getRangeStream();
+          }, 0);
+        } else {
+        }
+      },
+
+      /**
+       * 批量加载区域（供外部调用）
+       */
+      async batchLoadRegions(item, divideData, materialData) {
+        if (this.noObserver.streamLoader) {
+          await this.noObserver.streamLoader.batchLoadRegions(item, divideData, materialData);
+        }
+      },
+
+      /**
+       * 获取批量加载详情（供外部调用）
+       */
+      async loadModelByIds(options) {
+        // 绕过剔除模型
+        const { ids } = options.params || {};
+        this.addBypassCullingModelIds(ids);
+
+        if (this.noObserver.streamLoader) {
+          return await this.noObserver.streamLoader.loadModelByIds(options);
+        }
+        return null;
+      },
+
+      /**
+       * 处理单个模型项加载（供外部调用）
+       */
+      async processModelItem(item, todoFunc) {
+        if (this.noObserver.streamLoader) {
+          const res = await this.noObserver.streamLoader.processModelItem(item, todoFunc);
+          // item.id is the documentId
+          if (item && item.id) {
+            if (res && res.sceneBox) {
+              this.setSceneBox(res.sceneBox, item.id, true);
+            }
+            if (res && res.boxIndex) {
+              this.setBoxIndex(res.boxIndex, item.id, true);
+            }
+            // this.setBoxIndex(boxJson.data, item.id, true);
+          }
+          return res;
+        } else {
+          return null;
+        }
+      },
+
+      removeModelByDocumentId(documentId) {
+        this.setSceneBox(null, documentId, false);
+        this.setBoxIndex(null, documentId, false);
+      },
+
+      /**
+       * 内部渲染流式数据方法
+       */
+      renderModelData(meshes, primitives, list, range, onComplete, immediateUpdate) {
+        // 构造 drawModel 需要的数据格式
+        const modelRegistry = this.noObserver.streamLoader.modelRegistry;
+        const modelRecords = Array.from(modelRegistry.values());
+        const material = [];
+        modelRecords.forEach(record => {
+          if (record.materialData) {
+            if (Array.isArray(record.materialData)) {
+              material.push(...record.materialData);
+            } else {
+              material.push(record.materialData);
+            }
+          }
+        });
+
+        const regionModelData = {
+          material,
+          primitive: primitives,
+          mesh: meshes, // 注意这里 meshes 对应 drawModel 的 data.mesh (如果它是单个) 或处理逻辑
+        };
+
+        const options = {
+          flatNode: true,
+          colorConfig: this.getColorConfig()
+        };
+        // 如果有 documentId，则设置分组前缀名
+        // if(options.userData.documentId){
+        //   options.defineGroupPreName = options.userData.documentId;
+        //   options.defineGroupPreNameKey = 'documentId';
+        // }
+
+        // 这里的 list 包含 pbsId 和 version
+        const meshNameConfig = {
+          pbsId: list ? list.folderId : '',
+          version: list ? list.version : '',
+        };
+
+        options.onComplete = onComplete;
+        options.immediateUpdate = immediateUpdate;
+
+        this.drawModel(regionModelData, '', meshNameConfig, options);
+      },
+
+      getRangeStream(options) {
+        // 性能优化注释：禁用 range 被注释字段在 controlArgs 中的传递，仅保留 loadedModels
+        const controlArgs = {
+          loadedModels: this.modelStateManager.isloadedModelsIds,
+        };
+
+        if (this.noObserver && this.noObserver.streamLoader) {
+          // 如果已初始化内部流式加载器，则直接调用
+          this.noObserver.streamLoader.handleCameraControlForStream(controlArgs);
+        } else {
+          // 否则保持原有行为，抛出事件由外部处理
+          this.$emit('control', controlArgs);
+        }
+
+        // 性能优化注释：禁用 range 被注释字段相关的范围缓存更新
+        // lastFormatMin = { ...formatMin };
+        // lastFormatMax = { ...formatMax };
+      },
+      computeFrustumAABB() {
+        // 确保相机矩阵最新
+        camera.updateMatrixWorld(true);
+
+        // NDC 八个角
+        const ndcCorners = {
+          nearBottomLeft: [-1, -1, -1], // near-left-bottom
+          nearBottomRight: [1, -1, -1], // near-right-bottom
+          nearTopRight: [1, 1, -1], // near-right-top
+          nearTopLeft: [-1, 1, -1], // near-left-top
+          farBottomLeft: [-1, -1, 1], // far-left-bottom
+          farBottomRight: [1, -1, 1], // far-right-bottom
+          farTopRight: [1, 1, 1], // far-right-top
+          farTopLeft: [-1, 1, 1], // far-left-top
+        };
+
+        for (let key in ndcCorners) {
+          const v = new this.THREE.Vector3(...ndcCorners[key]);
+          v.unproject(camera); // NDC → world
+          v.applyMatrix4(threeToBizMatrix); // world → biz
+          ndcCorners[key] = v;
+        }
+
+        // 返回展开的坐标值（业务坐标）
+        return {
+          // 近平面（Near Plane）
+          nearTopLeftX: ndcCorners.nearTopLeft.x,
+          nearTopLeftY: ndcCorners.nearTopLeft.y,
+          nearTopLeftZ: ndcCorners.nearTopLeft.z,
+          nearTopRightX: ndcCorners.nearTopRight.x,
+          nearTopRightY: ndcCorners.nearTopRight.y,
+          nearTopRightZ: ndcCorners.nearTopRight.z,
+          nearBottomLeftX: ndcCorners.nearBottomLeft.x,
+          nearBottomLeftY: ndcCorners.nearBottomLeft.y,
+          nearBottomLeftZ: ndcCorners.nearBottomLeft.z,
+          nearBottomRightX: ndcCorners.nearBottomRight.x,
+          nearBottomRightY: ndcCorners.nearBottomRight.y,
+          nearBottomRightZ: ndcCorners.nearBottomRight.z,
+
+          // 远平面（Far Plane）
+          farTopLeftX: ndcCorners.farTopLeft.x,
+          farTopLeftY: ndcCorners.farTopLeft.y,
+          farTopLeftZ: ndcCorners.farTopLeft.z,
+          farTopRightX: ndcCorners.farTopRight.x,
+          farTopRightY: ndcCorners.farTopRight.y,
+          farTopRightZ: ndcCorners.farTopRight.z,
+          farBottomLeftX: ndcCorners.farBottomLeft.x,
+          farBottomLeftY: ndcCorners.farBottomLeft.y,
+          farBottomLeftZ: ndcCorners.farBottomLeft.z,
+          farBottomRightX: ndcCorners.farBottomRight.x,
+          farBottomRightY: ndcCorners.farBottomRight.y,
+          farBottomRightZ: ndcCorners.farBottomRight.z,
+        };
+      },
+      initRender() {
+        renderer = new this.THREE.WebGLRenderer({
+          antialias: true,
+          alpha: true,
+          logarithmicDepthBuffer: true,
+          powerPreference: 'high-performance',
+          preserveDrawingBuffer: false, //保留图形缓冲区 TODO 临时截图使用
+        });
+        renderer.debug.checkShaderErrors = false;
+        renderer.info.autoReset = false;
+        renderer.setPixelRatio(window.devicePixelRatio);
+        const rect = instructions.getBoundingClientRect();
+        renderer.setSize(rect.width, rect.height);
+        renderer.domElement.id = 'three-model';
+        renderer.shadowMap.enabled = true;
+        renderer.outputEncoding = this.THREE.sRGBEncoding;
+        instructions.appendChild(renderer.domElement);
+        renderer.setClearAlpha(0);
+
+        // 监听体系已重构至 initCameraChangeObserver，此处仅保留必要的初始化
+        // 原始的 wheel 监听逻辑已迁移
+        // renderer.domElement.addEventListener('wheel', this._wheelHandler);
+
+        // 与校审截图功能冲突，暂时先注释掉
+        // -----------
+        // renderer.autoClear = false;
+        // renderer.autoClearColor = false;
+        // renderer.autoClearDepth = false;
+        // renderer.autoClearStencil = false;
+        // -----------
+      },
+      initPostProcessing() {
+        outlineComposer = new EffectComposer(renderer, renderTarget);
+
+        const renderPass = new RenderPass(scene, camera);
+        outlineComposer.addPass(renderPass);
+
+        outlinePass = new OutlinePass(
+          new this.THREE.Vector2(window.innerWidth, window.innerHeight),
+          scene,
+          camera
+        );
+        outlinePass.edgeStrength = 3;
+        outlinePass.edgeGlow = 0.5; // 边缘模糊度
+        outlinePass.edgeThickness = 2; // 轮廓线宽度
+        outlinePass.visibleEdgeColor.set('#ffffff'); // 默认白色，后续可动态调整
+        outlinePass.hiddenEdgeColor.set('#ffffff');
+        outlineComposer.addPass(outlinePass);
+
+        const outputPass = new OutputPass();
+        outlineComposer.addPass(outputPass);
+      },
+      initScene() {
+        modelGroup = new this.THREE.Group();
+        scene = new this.THREE.Scene();
+        if (isDebug) {
+          stats = new Stats();
+          document.body.appendChild(stats.dom);
+        }
+      },
+      initCamera() {
+        camera = new this.THREE.PerspectiveCamera(
+          45,
+          window.innerWidth / window.innerHeight,
+          0.1,
+          1000000
+        );
+        // camera.position.set(0, 100, 150);
+      },
+      initControl() {
+        // 初始化控件
+        cameraControls = new CameraControls(camera, renderer.domElement);
+        cameraControls.dollyToCursor = true;
+        cameraControls.smoothTime = 0.1;
+        cameraControls.draggingSmoothTime = 0.05;
+        cameraControls.truckSpeed = 2.0;
+        cameraControls.infinityDolly = true;
+        cameraControls.minDistance = 10;
+        // 若已存在场景包围盒，初始化时设置最大dolly距离为其对角线长度
+
+
+        cameraControls.dollySpeed = 0.15; // 鼠标滚轮每次移动速度倍率
+      },
+
+      setCameraObserverEnabled(enabled) {
+        this.noObserver.isObserverEnabled = enabled;
+      },
+
+      /**
+       * 初始化相机变更观察者 (CameraChangeObserver)
+       * 统一监听：用户交互(Wheel/Control)、程序化动画、API调用
+       */
+      initCameraChangeObserver() {
+        // 初始化 control 状态标志
+        this.noObserver.isControlActive = false;
+
+        // 1. 创建统一的响应触发器 (Debounced)
+        this._cameraChangeObserver = this.debounce(
+          async source => {
+            // 如果观察者被禁用，则不执行后续逻辑
+            if (!this.noObserver.isObserverEnabled) {
+              return;
+            }
+
+            // 特殊处理：如果正在执行初始居中操作，忽略此次变更
+            // if (this.noObserver.isPerformingInitialCentering) {
+            //   if (source === 'rest') {
+            //     this.noObserver.isPerformingInitialCentering = false;
+            //   }
+            //   return;
+            // }
+
+            if (source === 'rest' && this.noObserver.isControlActive) {
+              return;
+            }
+
+            // 在执行裁剪和范围流之前，先调整相机远面 (如果需要)
+            // this.adjustCameraFarPlaneForSceneBox();
+
+            // 执行视锥体裁剪
+            // 第一视角不裁切
+            if (this.modelStateManager.frustumCheckEnabled) {
+              await this.performFrustumCulling();
+            }
+
+            // 执行流式加载请求
+            if (
+              this.modelStateManager.isloadedModelsIds &&
+              this.modelStateManager.isloadedModelsIds.length > 0
+            ) {
+              this.getRangeStream(false);
+            }
+          },
+          source => {
+            // 漫游模式下，或者第一人称移动时，使用节流策略（每300ms触发一次）
+            // 避免在持续运动中因防抖重置定时器而无法触发
+            if (source === 'roam' || source === 'firstPersonMove') {
+              return { type: 'throttle', limit: 1000 };
+            }
+            return 300; // 默认防抖 300ms
+          }
+        );
+
+        // 2. 公开API：允许外部或业务逻辑手动触发更新
+        this.notifyCameraChange = (source = 'api') => {
+          this._cameraChangeObserver(source);
+        };
+
+        // 3. 监听器 - Wheel (用户滚轮)
+        this._wheelHandler = res => {
+          this.$emit('wheelStart', res);
+
+          // 统一交互开始处理
+          this.beginInteraction('wheel');
+
+          // 设置滚轮交互的结束检测
+          this.scheduleWheelInteractionEnd(res, 100);
+
+          // 滚轮逻辑：infinityDolly 与 maxDollyDistance 控制
+          const event = res;
+          const deltaY = event && typeof event.deltaY === 'number' ? event.deltaY : 0;
+          const isZoomOut = deltaY > 0; // 远离
+          const isZoomIn = deltaY < 0; // 靠近
+
+          // if (isZoomOut) {
+          //   cameraControls.infinityDolly = false; // 向外遵守 maxDistance
+          // } else if (isZoomIn) {
+          //   cameraControls.infinityDolly = true;  // 向前允许推进（超越 minDistance）
+          // }
+
+          // dolly最大距离限制
+          try {
+            if (sceneBoundingBox && isFinite(maxDollyDistance)) {
+              if (isZoomOut) {
+                camera.updateMatrixWorld(true);
+                const currentDistance = camera.position.distanceTo(cameraControls._target);
+                if (currentDistance >= maxDollyDistance) {
+                  event.preventDefault && event.preventDefault();
+                  event.stopImmediatePropagation && event.stopImmediatePropagation();
+                  return;
+                }
+              }
+            }
+          } catch (e) {
+            // 防御：任何异常不影响交互流程
+          }
+
+          // 触发观察者
+          this._cameraChangeObserver('wheel');
+        };
+        renderer.domElement.addEventListener('wheel', this._wheelHandler);
+
+        // 4. 监听器 - Controls (用户拖拽/操作)
+        this._onControlStart = res => {
+          this.noObserver.isControlActive = true;
+
+          // 统一交互开始处理（相机）
+          this.beginInteraction('camera');
+          this.$emit('controlStart', res);
+
+          // 记录鼠标按下时的位置
+          const event = res.originalEvent || window.event;
+          if (event) {
+            mouseDownPosition.x = event.clientX || 0;
+            mouseDownPosition.y = event.clientY || 0;
+            isDragging = false;
+          }
+        };
+
+        this._onControlEnd = res => {
+          this.noObserver.isControlActive = false;
+
+          this.$emit('controlEnd', res);
+
+          // 统一交互结束处理（相机）
+          this.endInteraction('camera', res, { immediateResume: false });
+
+          // 记录鼠标抬起时的位置并计算是否发生了拖拽
+          const event = res.originalEvent || window.event;
+          if (event) {
+            mouseUpPosition.x = event.clientX || 0;
+            mouseUpPosition.y = event.clientY || 0;
+            const deltaX = Math.abs(mouseUpPosition.x - mouseDownPosition.x);
+            const deltaY = Math.abs(mouseUpPosition.y - mouseDownPosition.y);
+            const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+            isDragging = distance > dragThreshold;
+          }
+
+          // 只有在实际发生拖拽时才执行相关操作
+          if (isDragging) {
+            // 居中逻辑
+            // if (needsCenteringAfterInteraction && !hasExecutedCentering) {
+            //   setTimeout(() => {
+            //     if (modelGroups.length > 0) {
+            //       this.setModelCenter(modelGroups[modelGroups.length - 1]);
+            //       hasExecutedCentering = true;
+            //       needsCenteringAfterInteraction = false;
+            //     }
+            //   }, 300);
+            // }
+
+            // 触发观察者
+            this._cameraChangeObserver('control');
+          }
+        };
+
+        cameraControls.addEventListener('controlstart', this._onControlStart);
+        cameraControls.addEventListener('controlend', this._onControlEnd);
+
+        // 5. 监听器 - Programmatic (程序化动画/过渡结束)
+        // 监听 rest 事件，捕获 cameraControls.setLookAt(..., true) 等动画结束（以及阻尼停止）
+        // 注意：rest 事件在用户交互完全静止时也会触发，与 controlEnd 有部分重叠，但 Observer 有防抖，影响不大
+        this._onRest = () => {
+          this._cameraChangeObserver('rest');
+        };
+        cameraControls.addEventListener('rest', this._onRest);
+      },
+      // 初始化光源
+      initLight() {
+        const pmremGenerator = new this.THREE.PMREMGenerator(renderer);
+        scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+      },
+      // 初始化文字画布
+      initLabelRender() {
+        labelRenderer = new CSS2DRenderer();
+        const rect = instructions.getBoundingClientRect();
+        labelRenderer.setSize(rect.width, rect.height);
+        labelRenderer.domElement.style.position = 'absolute';
+
+        labelRenderer.domElement.style.top = `${rect.top}px`;
+        labelRenderer.domElement.style.pointerEvents = 'none';
+        instructions.appendChild(labelRenderer.domElement);
+      },
+      // 根据模型数据绘制模型实体 业务平台可调用此方法加载模型
+      /*
+        参数：data 模型数据
+          color: '' 初始化模型的颜色 在业务方 有这个需求
+          meshNameConfig: {}
+      */
+      drawModel(data, color = '', meshNameConfig = {}, options = {}) {
+        // data = require('./mock.json');
+        // 使用新的分帧加载方法，提供进度回调
+        return this.drawModelWithBatchLoading(
+          data,
+          color,
+          meshNameConfig,
+          options,
+          progress => {
+            // 触发原有的进度事件
+            this.$emit('loadProgress', progress);
+          },
+          complete => {
+            options?.onComplete?.(complete);
+            console.log('加载完成')
+            // 触发原有的完成事件
+            this.$emit('loadComplete');
+          }
+        );
+      },
+      // 动态设置视角滚轮的距离
+      setCameraConfig() {
+        // let box3 = new this.THREE.Box3().setFromObject(sceneBoundingBox);
+        let size = new this.THREE.Vector3();
+        sceneBoundingBox.getSize(size);
+        const maxBorder = Math.max(size.x, size.y, size.z);
+        // cameraControls.camera.far = maxBorder * 10; // 设置相机的远裁剪面
+        cameraControls.minDistance = maxBorder * 0.2; // 动态设置视角滚轮的距离
+        camera.updateProjectionMatrix();
       },
       // 获取mesh的中心点
       getMeshCenterAndVolume(mesh) {
         const box = new this.THREE.Box3().setFromObject(mesh);
         const volume = box.getSize(new this.THREE.Vector3());
-        const geometry = mesh.geometry;
+        const geometry = mesh.isInstancedMesh ? mesh : mesh.geometry; // 适配instance
         geometry.computeBoundingBox();
         const center = geometry.boundingBox.getCenter(new this.THREE.Vector3());
         return {
@@ -300,6 +2617,10 @@
         };
       },
       mouseDown(event) {
+        // 在鼠标按下时启用渲染中断以提升响应性
+        forceSkipRendering = true;
+        skipNextRenderFrame = true;
+
         const intersects = this.getRaycasterObjects(event);
         firstTime = new Date().getTime();
         let params = {
@@ -315,6 +2636,8 @@
         this.$emit('leftMouseDown', params);
       },
       getRaycasterObjects(event) {
+        // 保护空值，避免在未初始化或销毁后触发错误
+        if (!renderer || !renderer.domElement || !camera || !scene) return [];
         // 获取元素在页面中的偏移位置
         const rect = renderer.domElement.getBoundingClientRect();
         const x = event.clientX - rect.left;
@@ -325,9 +2648,28 @@
         mouse.x = (x / rect.width) * 2 - 1;
         mouse.y = -(y / rect.height) * 2 + 1;
         raycaster.setFromCamera(mouse, camera);
-        return raycaster.intersectObjects(scene.children, true);
+        return scene && scene.children ? raycaster.intersectObjects(scene.children, true) : [];
+      },
+      getInstanceId(instancedMesh, instanceIndex, options) {
+        if (!instancedMesh || instanceIndex === undefined || instanceIndex === null) {
+          return null;
+        }
+        const meshName = instancedMesh.name;
+        for (const props of instancedMesh.userData.instancesMap.values()) {
+          if (props.instancedMeshId === meshName && props.instanceIndex === instanceIndex) {
+            return props.instanceId;
+          }
+        }
       },
       mouseClick(event) {
+        // 鼠标抬起时重置渲染中断标记
+        setTimeout(() => {
+          forceSkipRendering = false;
+          // interactionFrameCount = 0;
+          // 恢复批次加载操作
+          this.resumeBatchLoading();
+        }, 50); // 短暂延迟确保交互完成
+
         // 在测量模式下，不进行事件暴露
         if (!measureFlag) {
           lastTime = new Date().getTime();
@@ -347,7 +2689,8 @@
               },
             };
             if (intersects.length > 0) {
-              intersects[0].object.userData.currentInstanceIndex = intersects[0].instanceId;
+              this.clearBypassCullingModelIds();
+              const instanceId = this.getInstanceId(intersects[0].object, intersects[0].instanceId);
               params = {
                 objects: [intersects[0].object],
                 mousePosition: { x: event.clientX, y: event.clientY },
@@ -357,6 +2700,8 @@
                   y: intersects[0].point.y,
                   z: intersects[0].point.z,
                 },
+                // inHighPriorityRegion: inHighPriority,
+                instanceId,
               };
             } else {
               params = {
@@ -368,12 +2713,11 @@
                   y: -1,
                   z: -1,
                 },
+                // inHighPriorityRegion: false,
               };
             }
             if (event.button === 0) {
               this.$emit('leftClick', params);
-            } else if (event.button === 2) {
-              this.$emit('rightClick', params);
             } else if (event.button === 1) {
               if (lastTime - lastMiddleClickTime < 2000) {
                 this.$emit('middleDblClick', params);
@@ -391,6 +2735,9 @@
           camera.aspect = width / height;
           camera.updateProjectionMatrix();
           renderer.setSize(width, height, true);
+          if (outlineComposer) {
+            outlineComposer.setSize(width, height);
+          }
           labelRenderer.setSize(width, height);
           // this.timeRender()
           // 这里也要更新测量
@@ -399,34 +2746,82 @@
           }
         }
       },
-      setModelCenter(mesh) {
-        const box3 = new this.THREE.Box3();
-        mesh.traverseVisible(function (object) {
-          // 3. 只处理有几何体的网格 (Mesh)
-          if (object.isMesh) {
-            // 4. 使用 expandByObject 扩展包围盒
-            // 这个方法会计算 object 的世界坐标包围盒，并将其合并到 correctBoundingBox 中
-            box3.expandByObject(object);
-          }
-        });
-        // box3.setFromObject(mesh);
-        const center = new this.THREE.Vector3();
-        box3.getCenter(center);
+      setModelCenter(target, options = {}) {
+        // return
+        let box3;
+
+        if (target.isBox3) {
+          box3 = target;
+        } else {
+          box3 = new this.THREE.Box3();
+          target.traverseVisible(function (object) {
+            // 3. 只处理有几何体的网格 (Mesh)
+            if (object.isMesh) {
+              // 4. 使用 expandByObject 扩展包围盒
+              // 这个方法会计算 object 的世界坐标包围盒，并将其合并到 correctBoundingBox 中
+              box3.expandByObject(object);
+            }
+          });
+          // box3.setFromObject(mesh);
+        }
+
+        const center = box3.getCenter(new this.THREE.Vector3());
         const size = box3.getSize(new this.THREE.Vector3());
-        camera.position.set(center.x, center.y + size.y, center.z + size.z / 2);
-        camera.lookAt(new this.THREE.Vector3(center.x, center.y, center.z));
-        cameraControls.setLookAt(
-          center.x,
-          center.y + size.y,
-          center.z + size.z / 2,
-          center.x,
-          center.y,
-          center.z,
-          true
-        );
-        cameraControls.update(0);
-        camera.updateProjectionMatrix();
-        cameraControls.saveState();
+        const maxDim = Math.max(size.x, size.y, size.z);
+
+        // 标记开始初始居中动画，抑制 CameraChangeObserver
+        // if (this.noObserver) {
+        //   this.noObserver.isPerformingInitialCentering = true;
+        // }
+        this.cameraLocation({
+          x: center.x,
+          y: center.y + maxDim,
+          z: center.z + maxDim,
+          heading: center.x,
+          pitch: center.y,
+          roll: center.z,
+          enableTransition: options.enableTransition,
+        });
+        // cameraControls.setLookAt(
+        //   center.x,
+        //   center.y + size.y,
+        //   center.z + size.z / 2,
+        //   center.x,
+        //   center.y,
+        //   center.z,
+        //   true
+        // );
+        // cameraControls.update(0);
+        // camera.updateProjectionMatrix();
+        // cameraControls.saveState();
+      },
+      // 带防抖和用户交互检测的智能居中方法
+      smartModelCenter(mesh, debounceDelay = 100) {
+        // if (hasExecutedCentering) {
+        //   return;
+        // }
+
+        // 如果用户正在交互，标记需要在交互结束后居中
+        if (userInteracting) {
+          needsCenteringAfterInteraction = true;
+          return;
+        }
+
+        // 清除之前的防抖定时器
+        if (centeringDebounceTimer) {
+          clearTimeout(centeringDebounceTimer);
+        }
+
+        // 设置新的防抖定时器
+        centeringDebounceTimer = setTimeout(() => {
+          // 如果已经执行过居中操作，则不再执行
+          if (!userInteracting && !hasExecutedCentering && this.noObserver.documentModelIds.size > 0) {
+            this.setModelCenter(mesh, { enableTransition: false });
+            hasExecutedCentering = true;
+            // 触发场景更新
+            this.notifyCameraChange();
+          }
+        }, debounceDelay);
       },
       // 修改指定模型实体属性
       /**
@@ -449,44 +2844,70 @@
       updateProperty(list) {
         for (let index = 0; index < list.length; index++) {
           let ele = list[index];
-          let targetObj = this.getObjectByName(ele.name);
+          let type = ele.type || 'mesh';
+          let instanceId = ele.name;
+          let targetObj = this.getObjectByName(instanceId);
           for (const key in ele.attr) {
             switch (key) {
               case 'color':
                 targetObj.forEach(children => {
-                  const instanceIndex = children.userData.instanceMaps[ele.name]['instanceIndex'];
                   if (children.isMesh) {
-                    children.setColorAt(
-                      instanceIndex,
-                      new this.THREE.Color(ele.attr[key])
-                    );
+                    const { instanceIndex } = children.userData.instancesMap.get(instanceId);
+                    children.setColorAt(instanceIndex, new this.THREE.Color(ele.attr[key]));
                     children.instanceColor.needsUpdate = true;
+                    if (outlinePass) {
+                      if (children.isInstancedMesh) {
+                        const proxy = this.ensureOutlineInstanceProxy(children, instanceIndex);
+                        if (proxy && !outlinePass.selectedObjects.includes(proxy)) {
+                          outlinePass.selectedObjects.push(proxy);
+                        }
+                      } else if (!outlinePass.selectedObjects.includes(children)) {
+                        outlinePass.selectedObjects.push(children);
+                      }
+                    }
                   }
                 });
                 break;
               case 'visible':
                 targetObj.forEach(children => {
-                  const instanceIndex = children.userData.instanceMaps[ele.name]['instanceIndex'];
-                  const copyMatrix = children.userData.instanceMaps[ele.name]['copyMatrix'];
+                  const { instanceIndex } = children.userData.instancesMap.get(instanceId);
                   if (ele.attr[key]) {
                     const restoreMatrix = new this.THREE.Matrix4().copy(
-                      copyMatrix
+                      children.userData.copyMatrix
                     );
                     children.setMatrixAt(instanceIndex, restoreMatrix);
+                    // if (outlinePass) {
+                    //   if (children.isInstancedMesh) {
+                    //     const proxy = this.ensureOutlineInstanceProxy(children, instanceIndex);
+                    //     if (proxy && !outlinePass.selectedObjects.includes(proxy)) {
+                    //       outlinePass.selectedObjects.push(proxy);
+                    //     }
+                    //   } else if (!outlinePass.selectedObjects.includes(children)) {
+                    //     outlinePass.selectedObjects.push(children);
+                    //   }
+                    // }
                   } else {
                     const offsetMatrix = new this.THREE.Matrix4()
-                      .copy(copyMatrix)
+                      .copy(children.userData.copyMatrix)
                       .makeTranslation(9999999, 9999999, 9999999);
                     children.setMatrixAt(instanceIndex, offsetMatrix);
+                    if (outlinePass) {
+                      if (children.isInstancedMesh) {
+                        this.removeOutlineInstanceProxy(children, instanceIndex);
+                      } else {
+                        const idx = outlinePass.selectedObjects.indexOf(children);
+                        if (idx !== -1) outlinePass.selectedObjects.splice(idx, 1);
+                      }
+                    }
                   }
                   children.instanceMatrix.needsUpdate = true;
                 });
                 break;
               case 'opacity':
-                const instanceIndex = children.userData.instanceMaps[ele.name]['instanceIndex'];
                 targetObj.forEach(children => {
                   if (children.isMesh) {
                     const opacity = children.geometry.attributes.opacity.array;
+                    const { instanceIndex } = children.userData.instancesMap.get(instanceId);
                     opacity[instanceIndex] = ele.attr[key];
                     children.geometry.attributes.opacity.needsUpdate = true;
                   }
@@ -502,6 +2923,40 @@
           // obj.material.needsUpdate = true;
         }
       },
+      showOutlinePass(instanceId) {
+        let targetObj = this.getObjectByName(instanceId)
+        targetObj.forEach(children => {
+          if (children.isMesh) {
+            const { instanceIndex } = children.userData.instancesMap.get(instanceId);
+            if (outlinePass) {
+              if (children.isInstancedMesh) {
+                const proxy = this.ensureOutlineInstanceProxy(children, instanceIndex);
+                if (proxy && !outlinePass.selectedObjects.includes(proxy)) {
+                  outlinePass.selectedObjects.push(proxy);
+                }
+              } else if (!outlinePass.selectedObjects.includes(children)) {
+                outlinePass.selectedObjects.push(children);
+              }
+            }
+          }
+        });
+      },
+      hideOutlinePass(instanceId) {
+        let targetObj = this.getObjectByName(instanceId)
+        targetObj.forEach(children => {
+          if (children.isMesh) {
+            const { instanceIndex } = children.userData.instancesMap.get(instanceId);
+            if (outlinePass) {
+              if (children.isInstancedMesh) {
+                this.removeOutlineInstanceProxy(children, instanceIndex);
+              } else {
+                const idx = outlinePass.selectedObjects.indexOf(children);
+                if (idx !== -1) outlinePass.selectedObjects.splice(idx, 1);
+              }
+            }
+          }
+        });
+      },
       // 恢复模型原来的状态
       updateWholeProperty() {
         throw new Error('该方法已暂停使用，请使用restore方法。');
@@ -519,41 +2974,90 @@
         //   });
         // }
       },
+      // 修改材质的自定义数据
+      updateMaterialUserData(list) {
+        for (let index = 0; index < list.length; index++) {
+          let ele = list[index];
+          let instanceId = ele.name;
+          let targetObj = this.getObjectByName(instanceId);
+          for (const key in ele.attr) {
+            switch (key) {
+              case 'nColor':
+                targetObj.forEach(children => {
+                  if (children.isMesh) {
+                    children.material.userData[key] = new this.THREE.Color(ele.attr[key])
+                  }
+                });
+                break;
+            }
+
+          }
+        }
+      },
+      // 重置
+      resetMaterialUserData(list) {
+        console.log('resetMaterialUserData')
+        for (let index = 0; index < list.length; index++) {
+          let ele = list[index];
+          let instanceId = ele.name;
+          let targetObj = this.getObjectByName(instanceId);
+          for (const key in ele.attr) {
+            switch (key) {
+              case 'nColor':
+                targetObj.forEach(children => {
+                  if (children.isMesh) {
+                    const { instanceIndex } = children.userData.instancesMap.get(instanceId);
+                    children.setColorAt(instanceIndex, children.material.userData['oColor']);
+                    children.instanceColor.needsUpdate = true;
+                    children.material.userData[key] = children.material.userData['oColor']
+                  }
+                });
+                break;
+            }
+          }
+        }
+      },
       // 清除上一次的属性修改操作 为了方便业务平台参数跟updateProperty方法的参数一样
       resetProperty(list) {
         for (let index = 0; index < list.length; index++) {
           let ele = list[index];
-          let obj = this.getObjectByName(ele.name);
+          let instanceId = ele.name;
+          let obj = this.getObjectByName(instanceId);
           if (obj) {
             for (const key in ele.attr) {
               switch (key) {
                 case 'color':
                   obj.forEach(children => {
                     if (children.isMesh) {
-                      children.setColorAt(
-                        children.userData.instanceIndex,
-                        children.material.userData.nColor
-                      );
+                      const { instanceIndex } = children.userData.instancesMap.get(instanceId);
+                      children.setColorAt(instanceIndex, children.material.userData.nColor);
                       children.instanceColor.needsUpdate = true;
+                      if (outlinePass) {
+                        if (children.isInstancedMesh) {
+                          this.removeOutlineInstanceProxy(children, instanceIndex);
+                        } else {
+                          const idx = outlinePass.selectedObjects.indexOf(children);
+                          if (idx !== -1) outlinePass.selectedObjects.splice(idx, 1);
+                        }
+                      }
                     }
                   });
                   break;
                 case 'visible':
                   obj.forEach(children => {
-                    const index = children.userData.instanceIndex;
-                    const restoreMatrix = new this.THREE.Matrix4().copy(
-                      children.userData.copyMatrix
-                    );
-                    children.setMatrixAt(index, restoreMatrix);
+                    const { instanceIndex, copyMatrix } =
+                      children.userData.instancesMap.get(instanceId);
+                    const restoreMatrix = new this.THREE.Matrix4().copy(copyMatrix);
+                    children.setMatrixAt(instanceIndex, restoreMatrix);
                     children.instanceMatrix.needsUpdate = true;
                   });
                   break;
                 case 'opacity':
                   obj.forEach(children => {
                     if (children.isMesh) {
+                      const { instanceIndex } = children.userData.instancesMap.get(instanceId);
                       const opacity = children.geometry.attributes.opacity.array;
-                      opacity[children.userData.instanceIndex] =
-                        children.material.userData.nOpacity;
+                      opacity[instanceIndex] = children.material.userData.nOpacity;
                       children.geometry.attributes.opacity.needsUpdate = true;
                     }
                   });
@@ -563,26 +3067,32 @@
         }
       },
       // 定位到模型
+      // name 模型名称 可以是数组
       locateModel(name) {
-        let obj = scene.getObjectByName(name) || this.getObjectByName(name)?.[0];
+        if (!scene) return;
+        if (Array.isArray(name)) {
+          const box3 = new this.THREE.Box3();
+          name.forEach(n => {
+            const arr = this.getObjectByName(n);
+            arr.forEach(o => {
+              box3.expandByObject(o);
+            });
+          });
+          if (!box3.isEmpty()) {
+            const center = box3.getCenter(new this.THREE.Vector3());
+            const size = box3.getSize(new this.THREE.Vector3());
+            this.locateByCenterBox(center, size, { viewAll: true });
+          }
+          return;
+        }
+        let obj = this.getObjectByName(name)[0];
         if (obj) {
           // cameraControls.fitToSphere(obj.parent, true); // TODO 待处理，先用 setModelCenter 进行定位
           if (obj.isGroup) {
             this.setModelCenter(obj);
           } else if (obj.isMesh) {
-            const instanceIndex = obj.userData.instanceMaps[name]['instanceIndex'];
-            const tempMatrix = new this.THREE.Matrix4();
-            // const instancePos = new this.THREE.Vector3();
-            obj.getMatrixAt(instanceIndex, tempMatrix);
-
-            let center = this.getCenter(obj, tempMatrix);
-            // const instanceLocalCenter = center.applyMatrix4(tempMatrix);
-            // center.applyMatrix4(tempMatrix);           // 先应用实例矩阵
-            // obj.localToWorld(center); 
-            // instancePos.setFromMatrixPosition(tempMatrix);        // 提取局部位置
-            // obj.localToWorld(instancePos);                          
-
-            let size = this.getSize(obj, tempMatrix);
+            let center = this.getCenter(obj);
+            let size = this.getSize(obj);
             this.locateByCenterBox(center, size);
           }
         }
@@ -601,6 +3111,7 @@
         }
       */
       updatePropertyByCustom(params) {
+        if (!scene) return;
         scene.traverse(child => {
           if (child.isMesh && child.userData[params.customName] === params.customValue) {
             for (const key in params.attr) {
@@ -632,6 +3143,7 @@
         视点定位可直接使用此方法
       */
       cameraLocation(params) {
+        const { enableTransition = true } = params;
         cameraControls.setLookAt(
           params.x,
           params.y,
@@ -639,7 +3151,7 @@
           params.heading,
           params.pitch,
           params.roll,
-          true
+          enableTransition
         );
         cameraControls.update(0);
       },
@@ -647,20 +3159,27 @@
       /*
         center: {x: 0, y: 0, z: 0},
         box: {x: 0, y: 0, z: 0}
+        options: {
+          viewAll: true/false
+        }
       */
-      locateByCenterBox(center, size) {
+      locateByCenterBox(center, size, options) {
+        let viewAll = (options && options.viewAll) || false;
+
         let maxDim = Math.max(size.x, size.y, size.z);
+        let minDim = Math.min(size.x, size.y, size.z);
         let fov = camera.fov * (Math.PI / 180);
-        let distance = Math.min(
-          maxDim * 100, // 最大距离限制
-          Math.abs((maxDim * 1.0) / Math.sin(fov / 2))
-        );
+        // let baseDistance = viewAll
+        //   ? Math.abs((minDim * 1.0) / Math.sin(fov / 2))
+        //   : Math.abs((maxDim * 1.0) / Math.sin(fov / 2));
+        let baseDistance = Math.abs((maxDim * 1.0) / Math.sin(fov / 2));
+        let distance = Math.min(maxDim * 100, baseDistance);
         let direction = new this.THREE.Vector3(1, 1, 1).normalize();
+
         let p = new this.THREE.Vector3().copy(center).add(direction.multiplyScalar(distance));
-        let cameraCenter = new this.THREE.Vector3(p.x, p.y, p.z)
-        .addScalar(
-          Math.max(size.x, size.y, size.z)
-        );
+        let cameraCenter = viewAll
+          ? new this.THREE.Vector3(p.x, p.y, p.z)
+          : new this.THREE.Vector3(p.x, p.y, p.z).addScalar(Math.max(size.x, size.y, size.z));
         cameraControls.setLookAt(
           cameraCenter.x,
           cameraCenter.y,
@@ -681,6 +3200,7 @@
         }
       */
       billboard(data) {
+        if (!scene) return null;
         const divLabel = new CSS2DObject(data.billboard);
         divLabel.name = data.labelClass; // 这个是用来清除广告牌用的
         divLabel.position.set(data.x, data.y, data.z);
@@ -688,12 +3208,17 @@
         return divLabel;
       },
       // 通过名字获取实体对象, 返回数组
-      getObjectByName(name) {
+      /*
+        name: 实体的名字
+        passType: 要过滤的类型，默认是group，不返回group类型的实体
+      */
+      getObjectByName(name, passType = 'group') {
+        if (!scene) return [];
         let object = [];
+        const instancedMeshProps = instanceToInstancedMeshMap.get(name);
         scene.traverse(item => {
-          if (item.name === name 
-          || (item.userData?.instanceMaps?.[name] !== undefined) // 或者找出对应的实例对象
-        ) {
+          const tempName = instancedMeshProps ? instancedMeshProps.drawObjectId : name;
+          if (item.name == tempName && item.type.toLowerCase() != passType.toLowerCase()) {
             object.push(item);
           }
         });
@@ -701,10 +3226,60 @@
       },
       // 通过id获取实体对象, 返回查找到的对象
       getObjectById(id) {
+        if (!scene) return null;
         return scene.getObjectById(id);
       },
+      getColorConfig() {
+        const modelState = this.noObserver
+          ? this.noObserver.modelStateManager
+          : this.modelStateManager;
+        return modelState.colorConfig;
+      },
+      addBypassCullingModelIds(modelIds) {
+        const modelState = this.noObserver
+          ? this.noObserver.modelStateManager
+          : this.modelStateManager;
+        if (!modelIds) return;
+        if (Array.isArray(modelIds)) {
+          modelIds.forEach(id => {
+            const modelId = this.formatModelId(id);
+            modelState.bypassCullingModelIds.add(modelId);
+          });
+        } else {
+          const modelId = this.formatModelId(modelIds);
+          modelState.bypassCullingModelIds.add(modelId);
+        }
+      },
+      getBypassCullingModelIds() {
+        const modelState = this.noObserver
+          ? this.noObserver.modelStateManager
+          : this.modelStateManager;
+        return [...modelState.bypassCullingModelIds];
+      },
+      removeBypassCullingModelIds(modelIds) {
+        const modelState = this.noObserver
+          ? this.noObserver.modelStateManager
+          : this.modelStateManager;
+        if (!modelIds) return;
+        if (Array.isArray(modelIds)) {
+          modelIds.forEach(id => {
+            const modelId = this.formatModelId(id);
+            modelState.bypassCullingModelIds.delete(modelId);
+          });
+        } else {
+          const modelId = this.formatModelId(modelIds);
+          modelState.bypassCullingModelIds.delete(modelId);
+        }
+      },
+      clearBypassCullingModelIds() {
+        const modelState = this.noObserver
+          ? this.noObserver.modelStateManager
+          : this.modelStateManager;
+        modelState.bypassCullingModelIds.clear();
+      },
       // 通过id删除对象
       removeObjectById(id) {
+        if (!scene) return;
         let array = this.getObjectByName(id);
         array.forEach(item => {
           if (item.name === id) {
@@ -719,6 +3294,7 @@
       },
       // 通过名称删除对象
       removeObjectByName(name) {
+        if (!scene) return;
         let array = this.getObjectByName(name);
         array.forEach(item => {
           item.material && item.material.dispose();
@@ -726,7 +3302,7 @@
           if (item.isMesh) {
             item.clear();
           }
-          scene.remove(item);
+          if (scene) scene.remove(item);
         });
       },
       // 删除场景中所有的实体
@@ -734,6 +3310,7 @@
         return new Promise(resolve => {
           if (scene) {
             this.removeTraverse();
+            this.removeModelByDocumentId();
             resolve();
           } else {
             resolve();
@@ -741,21 +3318,23 @@
         });
       },
       removeTraverse() {
+        if (!modelGroup) return;
         let length = modelGroup.children.length;
         if (length > 0) {
           let list = modelGroup.children[0];
+          if (!list) return;
           list.traverse(item => {
             if (item.isMesh) {
-              item.material.dispose();
-              item.geometry.dispose();
+              item.material && item.material.dispose();
+              item.geometry && item.geometry.dispose();
               item.clear();
               item.material = null;
               item.geometry = null;
-              modelGroup.remove(item);
+              modelGroup && modelGroup.remove(item);
               item = null;
             }
           });
-          modelGroup.remove(list);
+          modelGroup && modelGroup.remove(list);
           this.removeTraverse();
         } else {
           // 在这里清除一些标记之类的
@@ -769,15 +3348,125 @@
       // 销毁场景 释放内存
       destroyScene() {
         cancelAnimationFrame(animateId);
+
+        if (this.noObserver && this.noObserver.outlineInstanceProxyMap) {
+          this.noObserver.outlineInstanceProxyMap.forEach(proxy => {
+            if (outlinePass) {
+              const idx = outlinePass.selectedObjects.indexOf(proxy);
+              if (idx !== -1) outlinePass.selectedObjects.splice(idx, 1);
+            }
+            if (scene) scene.remove(proxy);
+            if (proxy && proxy.material && proxy.material.dispose) proxy.material.dispose();
+          });
+          this.noObserver.outlineInstanceProxyMap.clear();
+        }
+
+        this.batchLoadingState = this.noObserver
+          ? this.noObserver.batchLoadingState
+          : this.batchLoadingState;
+        // 清理防抖定时器和重置状态
+        if (centeringDebounceTimer) {
+          clearTimeout(centeringDebounceTimer);
+          centeringDebounceTimer = null;
+        }
+
+        // 清理渲染暂停/恢复相关的定时器
+        if (this.batchLoadingState.resumeTimer) {
+          clearTimeout(this.batchLoadingState.resumeTimer);
+          this.batchLoadingState.resumeTimer = null;
+        }
+
+        // 清理新增的交互状态定时器
+        if (this.batchLoadingState.interactionState.wheelTimeout) {
+          clearTimeout(this.batchLoadingState.interactionState.wheelTimeout);
+          this.batchLoadingState.interactionState.wheelTimeout = null;
+        }
+
+        // 停止批量加载
+        this.stopBatchLoading();
+
+        hasExecutedCentering = false;
+        needsCenteringAfterInteraction = false;
+        userInteracting = false;
+
+        // 关闭视椎体裁切并清理防抖定时器
+        this.modelStateManager.frustumCheckEnabled = false;
+        if (this.modelStateManager.debounceTimer) {
+          clearTimeout(this.modelStateManager.debounceTimer);
+          this.modelStateManager.debounceTimer = null;
+        }
+        this.clearBypassCullingModelIds();
+
         if (scene) {
           this.removeTraverse();
           scene.clear();
           scene = null;
         }
+
+        // 移除滚轮事件监听器
+        if (renderer && renderer.domElement && this._wheelHandler) {
+          renderer.domElement.removeEventListener('wheel', this._wheelHandler);
+          this._wheelHandler = null;
+        }
+
+        // 移除鼠标点击/按下事件监听器
+        if (renderer && renderer.domElement) {
+          renderer.domElement.removeEventListener('mouseup', this.mouseClick, false);
+          renderer.domElement.removeEventListener('mousedown', this.mouseDown, false);
+          renderer.domElement.removeEventListener('pointerup', this.mouseClick, false);
+          renderer.domElement.removeEventListener('pointerdown', this.mouseDown, false);
+        }
+
+        // 取消 pointer lock 并移除相关键盘事件
+        if (pointControls) {
+          if (this._onFirstPersonChange) {
+            try {
+              pointControls.removeEventListener('change', this._onFirstPersonChange);
+            } catch (e) {}
+            this._onFirstPersonChange = null;
+          }
+          try {
+            pointControls.unlock && pointControls.unlock();
+          } catch (e) {}
+        }
+        if (this.noObserver) {
+          this.noObserver._firstPersonLastPos = null;
+        }
+        window.removeEventListener('keydown', this.onKeyDown);
+        window.removeEventListener('keyup', this.onKeyUp);
+        document.removeEventListener('keydown', this.handleMeasureKeyDown, false);
+
+        // 关闭测量工具
+        if (threeMeasure) {
+          try {
+            threeMeasure.close && threeMeasure.close();
+          } catch (e) {}
+          threeMeasure = null;
+        }
+
+        // 移除 cameraControls 事件监听
+        if (cameraControls) {
+          if (this._onControlStart)
+            cameraControls.removeEventListener('controlstart', this._onControlStart);
+          if (this._onControlEnd)
+            cameraControls.removeEventListener('controlend', this._onControlEnd);
+          this._onControlStart = null;
+          this._onControlEnd = null;
+        }
+
+        // 清理 Label 渲染器 DOM
+        if (labelRenderer && labelRenderer.domElement && instructions) {
+          try {
+            instructions.removeChild(labelRenderer.domElement);
+          } catch (e) {}
+        }
+        labelRenderer = null;
+
         renderer.forceContextLoss();
         renderer.dispose();
         camera = null;
         cameraControls = null;
+        pointControls = null;
         renderer.domElement = null;
         renderer = null;
       },
@@ -806,7 +3495,7 @@
           });
           let line = new this.THREE.Line(geometryLine, materialLine);
           line.name = params.name;
-          scene.add(line);
+          if (scene) scene.add(line);
         }
       },
       // 绘制贴图曲线
@@ -842,7 +3531,7 @@
           });
           let line = new this.THREE.Line(geometry, material);
           line.name = params.name;
-          scene.add(line);
+          if (scene) scene.add(line);
           clock = new this.THREE.Clock();
         }
       },
@@ -869,7 +3558,7 @@
       },
       // 更新漫游的配置
       /*
-        参数为Object 
+        参数为Object
       */
       updateRoamConfig(params) {
         for (let key in params) {
@@ -906,6 +3595,10 @@
             cameraControls.setPosition(point.x, point.y + 5, point.z, false);
             cameraControls.setTarget(pointBox.x, pointBox.y + 5, pointBox.z, false);
             progress += roamConfig.speed / 300;
+
+            if (typeof this._cameraChangeObserver === 'function') {
+              this._cameraChangeObserver('roam');
+            }
           } else {
             // 循环漫游
             if (roamConfig.loop) {
@@ -924,6 +3617,7 @@
       globalBomb(val) {
         if (scene.children.length === 0) return;
         for (let i = 0; i < scene.children.length; i++) {
+          console.log('scene', scene)
           scene.children[i].traverse(item => {
             if (!item.isMesh || !item.worldDir) return;
             // 爆炸公式
@@ -939,7 +3633,7 @@
           value: 0 - 100 整数
       */
       localBomb(name, value) {
-        let target = scene.getObjectByName(name);
+        let target = this.getObjectByName(name)[0];
         if (target) {
           this.computedBomb(target, value);
         }
@@ -951,6 +3645,16 @@
           .add(new this.THREE.Vector3().copy(object.userData.position));
         object.position.copy(bombPosition);
       },
+      setClippingPlanesConstants(clippingPlanesConstants) {
+        this.clippingPlanesConstants = clippingPlanesConstants;
+      },
+      getClippingPlanes() {
+        let clippingPlanesConstant = [];
+        renderer.clippingPlanes.forEach(item => {
+          clippingPlanesConstant.push(item.constant);
+        });
+        return clippingPlanesConstant;
+      },
       // 设置全局整体剖切
       /*
         先开启模型全局剖切模式, 会返回剖切值的最大最小值
@@ -961,23 +3665,56 @@
         let max = box3.max;
         let min = box3.min;
         const clippingPlanes = [
-          new this.THREE.Plane(new this.THREE.Vector3(-1, 0, 0), max.x),
-          new this.THREE.Plane(new this.THREE.Vector3(0, -1, 0), max.y),
-          new this.THREE.Plane(new this.THREE.Vector3(0, 0, -1), max.z),
+          new this.THREE.Plane(
+            new this.THREE.Vector3(-1, 0, 0),
+            this.clippingPlanesConstants ? this.clippingPlanesConstants[0] : Math.ceil(max.x)
+          ),
+          new this.THREE.Plane(
+            new this.THREE.Vector3(0, -1, 0),
+            this.clippingPlanesConstants ? this.clippingPlanesConstants[1] : Math.ceil(max.y)
+          ),
+          new this.THREE.Plane(
+            new this.THREE.Vector3(0, 0, -1),
+            this.clippingPlanesConstants ? this.clippingPlanesConstants[2] : Math.ceil(max.z)
+          ),
+          new this.THREE.Plane(
+            new this.THREE.Vector3(1, 0, 0),
+            this.clippingPlanesConstants ? this.clippingPlanesConstants[3] : Math.ceil(-min.x)
+          ),
+          new this.THREE.Plane(
+            new this.THREE.Vector3(0, 1, 0),
+            this.clippingPlanesConstants ? this.clippingPlanesConstants[4] : Math.ceil(-min.y)
+          ),
+          new this.THREE.Plane(
+            new this.THREE.Vector3(0, 0, 1),
+            this.clippingPlanesConstants ? this.clippingPlanesConstants[5] : Math.ceil(-min.z)
+          ),
         ];
+
         renderer.clippingPlanes = clippingPlanes;
         if (flag) {
+          // 全局剖切的初始值
           guiParams = {
             x轴: Math.ceil(clippingPlanes[0].constant),
             y轴: Math.ceil(clippingPlanes[2].constant),
             z轴: Math.ceil(clippingPlanes[1].constant),
+            '-x轴': -Math.ceil(clippingPlanes[3].constant),
+            '-y轴': -Math.ceil(clippingPlanes[5].constant),
+            '-z轴': -Math.ceil(clippingPlanes[4].constant),
           };
           this.addClippingGui(
             '全局剖切',
             {
-              x: min.x,
-              y: min.z,
-              z: min.y,
+              max: {
+                x: max.x,
+                y: max.z,
+                z: max.y,
+              },
+              min: {
+                x: min.x,
+                y: min.z,
+                z: min.y,
+              },
             },
             clippingPlanes
           );
@@ -1009,7 +3746,11 @@
           x轴: 0,
           y轴: 0,
           z轴: 0,
+          '-x轴': 0,
+          '-y轴': 0,
+          '-z轴': 0,
         };
+        this.clippingPlanesConstants = null;
         renderer.clippingPlanes = Object.freeze([]);
         gui && gui.destroy();
       },
@@ -1025,6 +3766,9 @@
           new this.THREE.Plane(new this.THREE.Vector3(-1, 0, 0), Math.ceil(boundingBox.max.x)),
           new this.THREE.Plane(new this.THREE.Vector3(0, -1, 0), Math.ceil(boundingBox.max.y)),
           new this.THREE.Plane(new this.THREE.Vector3(0, 0, -1), Math.ceil(boundingBox.max.z)),
+          new this.THREE.Plane(new this.THREE.Vector3(1, 0, 0), -Math.floor(boundingBox.min.x)),
+          new this.THREE.Plane(new this.THREE.Vector3(0, 1, 0), -Math.floor(boundingBox.min.y)),
+          new this.THREE.Plane(new this.THREE.Vector3(0, 0, 1), -Math.floor(boundingBox.min.z)),
         ];
         obj.material.clippingPlanes = clippingPlanes;
         obj.material.needsUpdate = true;
@@ -1034,6 +3778,9 @@
             x轴: clippingPlanes[0].constant,
             y轴: clippingPlanes[2].constant,
             z轴: clippingPlanes[1].constant,
+            '-x轴': clippingPlanes[3].constant,
+            '-y轴': clippingPlanes[5].constant,
+            '-z轴': clippingPlanes[4].constant,
           };
           this.addClippingGui(
             '局部剖切',
@@ -1075,6 +3822,9 @@
           x轴: 0,
           y轴: 0,
           z轴: 0,
+          '-x轴': 0,
+          '-y轴': 0,
+          '-z轴': 0,
         };
         gui && gui.destroy();
         clippingMesh.forEach(item => {
@@ -1084,39 +3834,68 @@
         clippingMesh.splice(0);
       },
       // 添加剖切轴工具
-      addClippingGui(title, minValue, objClipp1, objClipp2) {
+      addClippingGui(title, boudingValue, objClipp1, objClipp2) {
         gui = new GUI({
           title: title,
         });
         gui
           .add(guiParams, 'x轴')
-          .step(0.01)
-          .min(minValue.x)
-          .max(guiParams['x轴'])
+          .step(0.001)
+          .min(boudingValue.min.x)
+          .max(boudingValue.max.x)
           .onChange(d => {
             objClipp1[0].constant = d;
             objClipp2 && (objClipp2[0].constant = d);
           });
+        gui
+          .add(guiParams, '-x轴')
+          .step(0.001)
+          .min(boudingValue.min.x)
+          .max(boudingValue.max.x)
+          .onChange(d => {
+            objClipp1[3].constant = -d;
+            objClipp2 && (objClipp2[3].constant = -d);
+          });
         gui
           .add(guiParams, 'y轴')
-          .step(0.01)
-          .min(minValue.y)
-          .max(guiParams['y轴'])
+          .step(0.001)
+          .min(boudingValue.min.y)
+          .max(boudingValue.max.y)
           .onChange(d => {
             objClipp1[2].constant = d;
             objClipp2 && (objClipp2[2].constant = d);
           });
+        gui
+          .add(guiParams, '-y轴')
+          .step(0.001)
+          .min(boudingValue.min.y)
+          .max(boudingValue.max.y)
+          .onChange(d => {
+            objClipp1[5].constant = -d;
+            objClipp2 && (objClipp2[5].constant = -d);
+          });
         gui
           .add(guiParams, 'z轴')
-          .step(0.01)
-          .min(minValue.z)
-          .max(guiParams['z轴'])
+          .step(0.001)
+          .min(boudingValue.min.z)
+          .max(boudingValue.max.z)
           .onChange(d => {
             objClipp1[1].constant = d;
+            objClipp2 && (objClipp2[1].constant = d);
+          });
+        gui
+          .add(guiParams, '-z轴')
+          .step(0.001)
+          .min(boudingValue.min.z)
+          .max(boudingValue.max.z)
+          .onChange(d => {
+            objClipp1[4].constant = -d;
+            objClipp2 && (objClipp2[4].constant = -d);
           });
       },
       // 开启第一视角
-      startFirstPer({ moveSpeed = 200, jumpSpeed = 200 }) {
+      startFirstPer(options) {
+        let { moveSpeed = 200, jumpSpeed = 200 } = options || {};
         removeSpeed = moveSpeed;
         upSpeed = jumpSpeed;
 
@@ -1136,8 +3915,22 @@
       initPointerLock() {
         this.home();
         setTimeout(() => {
+          // 开启第一视角时，将相机与水平面保持水平
+          camera.rotation.x = 0;
+          camera.rotation.z = 0;
+
           pointControls = new PointerLockControls(camera, renderer.domElement);
           pointControls.lock();
+          if (!this._onFirstPersonChange) {
+            this._onFirstPersonChange = () => {
+              if (typeof this._cameraChangeObserver === 'function') {
+                this._cameraChangeObserver('firstPerson');
+              }
+            };
+          }
+          try {
+            pointControls.addEventListener('change', this._onFirstPersonChange);
+          } catch (e) {}
           // 锁定
           pointControls.addEventListener('lock', () => {
             cameraControls.enabled = false;
@@ -1145,14 +3938,24 @@
             window.addEventListener('keyup', this.onKeyUp, false);
             renderer.domElement.removeEventListener('mouseup', this.mouseClick, false);
             renderer.domElement.removeEventListener('mousedown', this.mouseDown, false);
+            if (typeof this._cameraChangeObserver === 'function') {
+              this._cameraChangeObserver('firstPersonLock');
+            }
           });
           // 解锁
           pointControls.addEventListener('unlock', () => {
             firstPerSign = false;
             cameraControls.enabled = true;
             // 返回初始视角
-            cameraControls.reset(true);
-            cameraControls.update(0);
+            this.home();
+            try {
+              if (this._onFirstPersonChange && pointControls) {
+                pointControls.removeEventListener('change', this._onFirstPersonChange);
+              }
+            } catch (e) {}
+            if (this.noObserver) {
+              this.noObserver._firstPersonLastPos = null;
+            }
             setTimeout(() => {
               window.removeEventListener('keydown', this.onKeyDown);
               window.removeEventListener('keyup', this.onKeyUp);
@@ -1160,8 +3963,11 @@
               renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
               // this.timeRender()
             }, 0);
+            if (typeof this._cameraChangeObserver === 'function') {
+              this._cameraChangeObserver('firstPersonUnlock');
+            }
           });
-          scene.add(pointControls.object);
+          if (scene) scene.add(pointControls.object);
         }, 10);
       },
       // 第一视角运动
@@ -1188,7 +3994,8 @@
           // 获取相机靠下5的位置
           downRaycaster.ray.origin.y += 5;
           // 判断是否停留在了立方体上面
-          let intersections = downRaycaster.intersectObjects(scene.children, true);
+          let intersections =
+            scene && scene.children ? downRaycaster.intersectObjects(scene.children, true) : [];
           var onObject = intersections.length > 0;
           if (onObject === true) {
             velocity.y = Math.max(0, velocity.y);
@@ -1204,6 +4011,21 @@
             control.position.y = 3 - 0 / 10;
             canJump = true;
           }
+          if (this.noObserver) {
+            if (!this.noObserver._firstPersonLastPos) {
+              this.noObserver._firstPersonLastPos = new this.THREE.Vector3().copy(control.position);
+            }
+            const moved =
+              this.noObserver._firstPersonLastPos.distanceToSquared(control.position) > 1e-8;
+            if (moved) {
+              this.noObserver._firstPersonLastPos.copy(control.position);
+              if (typeof this._cameraChangeObserver === 'function') {
+                this._cameraChangeObserver('firstPersonMove');
+              }
+            }
+          } else if (typeof this._cameraChangeObserver === 'function') {
+            this._cameraChangeObserver('firstPersonMove');
+          }
         }
       },
       // 键盘监听事件
@@ -1270,26 +4092,15 @@
       },
       // 返回主视角/恢复相机初始状态
       home() {
+        hasExecutedCentering = true;
+
         if (roaming) {
           this.endRoam();
         }
-        // cameraControls.reset(true);
-        // cameraControls.update(0);
-        // this.timeRender()
-        const box = new this.THREE.Box3();
-        scene.traverseVisible(function (object) {
-          // 3. 只处理有几何体的网格 (Mesh)
-          if (object.isMesh) {
-            // 4. 使用 expandByObject 扩展包围盒
-            // 这个方法会计算 object 的世界坐标包围盒，并将其合并到 correctBoundingBox 中
-            box.expandByObject(object);
-          }
-        });
 
-        // const box = new this.THREE.Box3().setFromObject(scene);
-        const center = box.getCenter(new this.THREE.Vector3());
-        const size = box.getSize(new this.THREE.Vector3());
-        const maxDim = Math.max(size.x, size.y, size.z);
+        const center = sceneBoundingBox.getCenter(new this.THREE.Vector3());
+        const size = sceneBoundingBox.getSize(new this.THREE.Vector3());
+        const maxDim = Math.max(size.x, size.y, size.z) * 0.4;
 
         this.cameraLocation({
           x: center.x,
@@ -1299,6 +4110,10 @@
           pitch: center.y,
           roll: center.z,
         });
+        this.setCameraConfig();
+        // cameraControls.reset(true);
+        // cameraControls.update(0);
+        // this.timeRender()
       },
       // 测量
       /*
@@ -1425,6 +4240,7 @@
         参数: object, 目标实体,
       */
       isolate(object) {
+        if (!scene) return;
         // 隔离 将目标实体以外的实体隐藏掉
         scene.traverse(item => {
           if (item.isMesh && item.name !== object.name) {
@@ -1438,6 +4254,7 @@
       },
       // 还原操作 将修改过的实体进行恢复
       restore() {
+        if (!scene) return;
         scene.traverse(item => {
           if (item.isMesh) {
             item.setColorAt(item.userData.instanceIndex, item.material.userData.nColor);
@@ -1485,7 +4302,7 @@
           // 不参与裁剪
           locationModel.userData.cull = false;
           locationModel.name = name;
-          scene.add(locationModel);
+          if (scene) scene.add(locationModel);
           locationModel.position.copy(new this.THREE.Vector3(position.x, position.y, position.z));
           if (gltf.animations.length > 0) {
             let actionMixer = new this.THREE.AnimationMixer(gltf.scene);
@@ -1512,7 +4329,7 @@
               child.material.dispose();
             }
           });
-          scene.remove(item);
+          if (scene) scene.remove(item);
         });
         modelActions.splice(0);
         modelActive.splice(0);
@@ -1555,45 +4372,48 @@
         scenePass = null;
       },
       // 获取中心点
-      getCenter(instancedMesh, tempMatrix) {
-          // 1. 获取原始几何体的中心（局部坐标，相对于单个 mesh 原点）
-          const geometry = instancedMesh.geometry;
-          if (!geometry.boundingBox) {
-            geometry.computeBoundingBox();
-          }
-          const localCenter = geometry.boundingBox.getCenter(new this.THREE.Vector3());
-
-          // 2. 将中心应用实例的局部变换（tempMatrix）
-          const instanceLocalCenter = localCenter.clone().applyMatrix4(tempMatrix);
-
-          // 3. 转换到世界坐标
-          const worldCenter = instancedMesh.localToWorld(instanceLocalCenter.clone());
-
-          return worldCenter;
-        let center = new this.THREE.Vector3();
-        if(tempMatrix){
-          obj.applyMatrix4(tempMatrix)
-          obj.updateMatrixWorld();
+      getCenter(obj, isBox3Info) {
+        let box3;
+        if (isBox3Info) {
+          box3 = new this.THREE.Box3(
+            new this.THREE.Vector3(obj.min[0], obj.min[1], obj.min[2]),
+            new this.THREE.Vector3(obj.max[0], obj.max[1], obj.max[2])
+          );
         }
-        obj.boundingBox.getCenter(center);
-        if (obj.userData.is3D) {
-          center.applyMatrix4(mat4);
-          obj.updateMatrixWorld();
+        let center = new this.THREE.Vector3();
+        (box3 && box3.getCenter(center)) || obj.boundingBox.getCenter(center);
+        if (isBox3Info || obj.userData.is3D) {
+          center.applyMatrix4(bizToThreeMatrix);
         }
         return center;
       },
-      getSize(obj, tempMatrix) {
+      getSize(obj, isBox3Info) {
+        let box3;
+        if (isBox3Info) {
+          box3 = new this.THREE.Box3(
+            new this.THREE.Vector3(obj.min[0], obj.min[1], obj.min[2]),
+            new this.THREE.Vector3(obj.max[0], obj.max[1], obj.max[2])
+          );
+        }
         let size = new this.THREE.Vector3();
-        obj.boundingBox.getSize(size);
-        if (obj.userData.is3D) {
-          size.applyMatrix4(mat4);
+        (box3 && box3.getSize(size)) || obj.boundingBox.getSize(size);
+        if (isBox3Info || obj.userData.is3D) {
+          size.applyMatrix4(bizToThreeMatrix);
         }
         return size;
       },
       animate() {
+        if (isDebug) {
+          stats && stats.begin(); // 开始帧率统计
+        }
+
         const delta = fpsClock.getDelta();
         timeStamp += delta;
         animateId = requestAnimationFrame(this.animate);
+
+        // 1. 先重置计数器（关键！）
+        renderer.info.reset(); // 重置上一帧的统计数据
+
         if (timeStamp > singleFrameTime) {
           if (modelActions.length > 0) {
             modelActions.forEach(item => {
@@ -1601,16 +4421,112 @@
             });
           }
           cameraControls.enabled && cameraControls.update(timeStamp);
+          // 计算相机近裁面到包围盒当前面的距离
           this.cameraTrack();
           this.firstPerspective();
           if (scenePass) {
             let d = sceneClock.getDelta();
             scenePass.uniforms['iTime'].value += d;
           }
-          labelRenderer.render(scene, camera);
-          renderer.render(scene, camera);
+          labelRenderer.render(scene, camera);
+          renderedThisFrame.clear();
+
+          // 增强的渲染中断逻辑：在用户交互期间强制跳过渲染
+          const loadingState = this.noObserver
+            ? this.noObserver.batchLoadingState
+            : this.batchLoadingState;
+          const shouldSkipRendering =
+            skipNextRenderFrame ||
+            forceSkipRendering ||
+            loadingState.interactionState.isInteracting;
+
+          if (shouldSkipRendering) {
+            // 重置单次跳过标记
+            if (skipNextRenderFrame) {
+              skipNextRenderFrame = false;
+            }
+
+            // 统计跳过的帧数
+            // interactionFrameCount++;
+            // 在交互期间，每隔几帧强制渲染一次以保持基本的视觉反馈
+            // if (interactionFrameCount % 2 === 0 && this.batchLoadingState.interactionState.isInteracting) {
+            renderer.clear(true, true, true);
+            renderer.render(scene, camera);
+            // }
+            // 可选：添加调试信息（生产环境可注释掉）
+            // console.log(`跳过渲染帧 #${interactionFrameCount}, 交互类型: ${this.batchLoadingState.interactionState.interactionType}`);
+          } else {
+            // 正常渲染
+            if (outlineComposer) {
+              // 使用后处理管线渲染，避免重复渲染
+              outlineComposer.render();
+            } else {
+              renderer.clear(true, true, true);
+              renderer.render(scene, camera);
+            }
+            // 重置交互帧计数
+            // if (interactionFrameCount > 0) {
+            //   // console.log(`交互结束，总共跳过 ${interactionFrameCount} 帧`);
+            //   interactionFrameCount = 0;
+            // }
+          }
+
+          // 3. 按频率输出（避免每帧都log）
+          // if (frameCounter++ % LOG_INTERVAL === 0) {
+          //   // 统计当前视椎体中的模型数量（按组/子节点统计）以及 InstancedMesh 数量
+          //   let modelsInFrustum = 0;
+          //   let instancedMeshesInFrustum = 0;
+          //   try {
+          //     const frustum = new this.THREE.Frustum();
+          //     const vpMatrix = new this.THREE.Matrix4().multiplyMatrices(
+          //       camera.projectionMatrix,
+          //       camera.matrixWorldInverse
+          //     );
+          //     frustum.setFromProjectionMatrix(vpMatrix);
+
+          //     // 优先使用 modelGroup 的子节点作为“模型”统计单位；否则回退到 scene.children
+          //     const children = (typeof modelGroup !== 'undefined' && modelGroup && modelGroup.children && modelGroup.children.length)
+          //       ? modelGroup.children
+          //       : scene.children;
+
+          //     for (let i = 0; i < children.length; i++) {
+          //       const obj = children[i];
+          //       if (!obj || !obj.visible) continue;
+          //       // 以对象的包围盒为准，判断是否与视椎体相交
+          //       const box = new this.THREE.Box3().setFromObject(obj);
+          //       if (box.isEmpty()) continue;
+          //       if (frustum.intersectsBox(box)) {
+          //         modelsInFrustum++;
+          //         // 统计组内的 InstancedMesh 数量（处于视椎体内）
+          //         obj.traverse(child => {
+          //           if (!child || !child.visible || !child.isInstancedMesh) return;
+          //           const childBox = new this.THREE.Box3().setFromObject(child);
+          //           if (!childBox.isEmpty() && frustum.intersectsBox(childBox)) {
+          //             instancedMeshesInFrustum++;
+          //           }
+          //         });
+          //       }
+          //     }
+          //   } catch (e) {
+          //     // 统计过程不影响主流程，出现异常时仅忽略
+          //   }
+
+          // if ((perfLogFrameCount++ % 120 === 0) || (Date.now() - lastPerfLogTime >= 3000)) {
+          //   lastPerfLogTime = Date.now();
+          //   console.log(`frame info`, {
+          //     drawCalls: renderer.info.render.calls,
+          //     triangles: renderer.info.render.triangles,
+          //     textures: renderer.info.memory.textures,
+          //   });
+          // }
+          // }
+
+          // renderer.setRenderTarget(null)
           timeStamp = timeStamp % singleFrameTime;
-          outlineComposer && outlineComposer.render();
+        }
+
+        if (isDebug) {
+          stats && stats.end(); // 结束帧率统计
         }
       },
       // 暴露个别参数让业务自己做特殊业务。
@@ -1623,6 +4539,14 @@
           scene,
         };
       },
+
+      /**
+       * 重置性能统计
+       */
+      // resetPerformanceStats() {
+      //   // 性能统计已移除，保留方法以兼容现有调用
+      //   interactionFrameCount = 0;
+      // },
       setMouseAction(btn) {
         const ACTION_ENUM = {
           none: 0,
@@ -1635,18 +4559,603 @@
         right && (cameraControls.mouseButtons.right = ACTION_ENUM[right]);
         middle && (cameraControls.mouseButtons.middle = ACTION_ENUM[middle]);
       },
-      // 动态设置视角滚轮的距离
-      setCameraConfig() {
-        let box3 = new this.THREE.Box3().setFromObject(scene);
-        let size = new this.THREE.Vector3();
-        box3.getSize(size);
-        const maxBorder = Math.max(size.x, size.y, size.z);
 
-        // cameraControls.camera.far = maxBorder * 50; // 设置相机的远裁剪面
+      // 分帧加载相关方法
+      /**
+       * 启动分帧批量加载
+       * @param {Object} data - 模型数据
+       * @param {string} color - 初始化模型的颜色
+       * @param {Object} meshNameConfig - 网格名称配置
+       * @param {Object} options - 选项
+       * @param {Function} onProgress - 进度回调函数
+       * @param {Function} onComplete - 完成回调函数
+       */
+      startBatchLoading(
+        data,
+        color = '',
+        meshNameConfig = {},
+        options = {},
+        onProgress = null,
+        onComplete = null
+      ) {
+        const loadingState = this.noObserver
+          ? this.noObserver.batchLoadingState
+          : this.batchLoadingState;
+        // 如果已经在加载中，先停止之前的加载
+        if (loadingState.isLoading) {
+          this.stopBatchLoading();
+        }
+
+        // 重置instance-parser的处理状态
+        resetProcessingState();
 
-        cameraControls.minDistance = maxBorder * 0.05; // 动态设置视角滚轮的距离
+        // 解析数据
+        let parsedData = parseData(data, options);
+        let instances = parsedData.instances;
+        let drawObjs = parsedData.drawObjs;
 
-        camera.updateProjectionMatrix();
+        if (instances.length === 0) {
+          onComplete && onComplete();
+          return;
+        }
+
+        // 去重处理
+        // const existingDrawObjectIds = new Set();
+        // if (modelGroup && modelGroup.children && modelGroup.children.length) {
+        //   modelGroup.children.forEach(child => {
+        //     if (child && child.userData && child.userData.isInstancedMeshGroup && child.name) {
+        //       existingDrawObjectIds.add(child.name);
+        //     }
+        //   });
+        // }
+
+        const filteredDrawObjs = drawObjs;
+        const filteredInstances = instances;
+
+        // 初始化加载状态
+        // 此时直接修改 nonReactiveState，不需要展开 ...this.batchLoadingState (因为响应式对象里只有基本字段)
+        loadingState.isLoading = true;
+        loadingState.currentBatch = 0;
+        loadingState.totalCount = filteredInstances.length;
+        loadingState.loadedCount = 0;
+        loadingState.pendingData = this.createBatches(filteredInstances, filteredDrawObjs);
+        loadingState.onProgress = onProgress;
+        loadingState.onComplete = onComplete;
+
+        loadingState.totalBatches = loadingState.pendingData.length;
+
+        // 存储其他参数
+        loadingState.color = color;
+        loadingState.meshNameConfig = meshNameConfig;
+        loadingState.options = options;
+
+        // 同步更新响应式状态中的关键字段，以便UI显示
+        this.batchLoadingState.isLoading = true;
+        this.batchLoadingState.currentBatch = 0;
+        this.batchLoadingState.totalBatches = loadingState.totalBatches;
+        this.batchLoadingState.loadedCount = 0;
+        this.batchLoadingState.totalCount = loadingState.totalCount;
+
+        // 开始加载第一批
+        this.loadNextBatch();
+      },
+
+      /**
+       * 创建批次数据
+       * @param {Array} instances - 实例数组
+       * @param {Array} drawObjs - 绘制对象数组
+       * @returns {Array} 批次数组
+       */
+      createBatches(instances, drawObjs) {
+        const batches = [];
+        const loadingState = this.noObserver
+          ? this.noObserver.batchLoadingState
+          : this.batchLoadingState;
+        const batchSize = loadingState.batchSize;
+
+        // 按drawObject分组
+        const drawObjMap = new Map();
+        drawObjs.forEach(obj => {
+          drawObjMap.set(obj.drawObjId, obj);
+        });
+
+        // 按drawObject ID分组instances
+        const instancesByDrawObj = new Map();
+        instances.forEach(inst => {
+          if (!instancesByDrawObj.has(inst.drawObject)) {
+            instancesByDrawObj.set(inst.drawObject, []);
+          }
+          instancesByDrawObj.get(inst.drawObject).push(inst);
+        });
+
+        // 创建批次
+        let currentBatch = [];
+        let currentBatchSize = 0;
+
+        for (const [drawObjId, objInstances] of instancesByDrawObj) {
+          let drawObj = drawObjMap.get(drawObjId);
+
+          // 如果通过 ID 直接找不到，或者需要验证 prmid 与 drawObjId 的对应关系
+          if (!drawObj) {
+            for (const value of drawObjMap.values()) {
+              if (value && Array.isArray(value.geoms)) {
+                const found = value.geoms.some(g => g.prmid === drawObjId);
+                if (found) {
+                  drawObj = value;
+                  break;
+                }
+              }
+            }
+          }
+
+          if (!drawObj) continue;
+
+          // 如果当前批次加上这个drawObject会超过限制，先保存当前批次
+          if (currentBatchSize + objInstances.length > batchSize && currentBatch.length > 0) {
+            batches.push({
+              instances: currentBatch.flatMap(item => item.instances),
+              drawObjs: currentBatch.map(item => item.drawObj),
+            });
+            currentBatch = [];
+            currentBatchSize = 0;
+          }
+
+          currentBatch.push({
+            drawObj,
+            instances: objInstances,
+          });
+          currentBatchSize += objInstances.length;
+
+          // 如果当前批次已满，保存并开始新批次
+          if (currentBatchSize >= batchSize) {
+            batches.push({
+              instances: currentBatch.flatMap(item => item.instances),
+              drawObjs: currentBatch.map(item => item.drawObj),
+            });
+            currentBatch = [];
+            currentBatchSize = 0;
+          }
+        }
+
+        // 保存最后一个批次
+        if (currentBatch.length > 0) {
+          batches.push({
+            instances: currentBatch.flatMap(item => item.instances),
+            drawObjs: currentBatch.map(item => item.drawObj),
+          });
+        }
+
+        return batches;
+      },
+
+      /**
+       * 加载下一批数据
+       */
+      async loadNextBatch() {
+        const loadingState = this.noObserver
+          ? this.noObserver.batchLoadingState
+          : this.batchLoadingState;
+        if (
+          !loadingState.isLoading ||
+          loadingState.currentBatch >= loadingState.pendingData.length
+        ) {
+          this.completeBatchLoading();
+          return;
+        }
+
+        // 检查是否需要暂停渲染
+        if (loadingState.isPaused) {
+          // 如果暂停，延迟一段时间后再次检查
+          loadingState.animationFrameId = requestAnimationFrame(() => {
+            this.loadNextBatch();
+          });
+          return;
+        }
+
+        // 检查是否有用户交互正在进行，如果有则暂停批次加载
+        if (loadingState.interactionState.isInteracting) {
+          // 如果正在交互，延迟一段时间后再次检查
+          loadingState.animationFrameId = requestAnimationFrame(() => {
+            this.loadNextBatch();
+          });
+          return;
+        }
+
+        const batch = loadingState.pendingData[loadingState.currentBatch];
+
+        try {
+          console.log('加载批次:', loadingState.currentBatch);
+          await this.processWithMainThread(batch);
+
+          // 更新进度
+          loadingState.loadedCount += batch.instances.length;
+          loadingState.currentBatch++;
+
+          // 同步到响应式状态
+          this.batchLoadingState.loadedCount = loadingState.loadedCount;
+          this.batchLoadingState.currentBatch = loadingState.currentBatch;
+
+          // 调用进度回调
+          if (loadingState.onProgress) {
+            loadingState.onProgress({
+              loaded: loadingState.loadedCount,
+              total: loadingState.totalCount,
+              currentBatch: loadingState.currentBatch,
+              totalBatches: loadingState.totalBatches,
+            });
+          }
+
+          // 使用 requestAnimationFrame 在下一帧继续加载
+          loadingState.animationFrameId = requestAnimationFrame(() => {
+            this.loadNextBatch();
+          });
+        } catch (error) {
+          console.error('批次处理失败:', error);
+
+          // 继续下一批次
+          loadingState.animationFrameId = requestAnimationFrame(() => {
+            this.loadNextBatch();
+          });
+        }
+      },
+
+      /**
+       * 使用主线程处理批次数据
+       */
+      async processWithMainThread(batch) {
+        const loadingState = this.noObserver
+          ? this.noObserver.batchLoadingState
+          : this.batchLoadingState;
+        loadingState.options.batchSize = loadingState.batchSize;
+        loadingState.options.resetState = loadingState.currentBatch === 0;
+        // 使用原始的handleInstancedMeshModel方法
+
+        isDebug && performance.mark('handleInstancedMeshModel-start');
+        await handleInstancedMeshModel(
+          modelGroup,
+          batch.instances,
+          batch.drawObjs,
+          '',
+          scene,
+          loadingState.color,
+          loadingState.meshNameConfig,
+          '',
+          loadingState.options
+        );
+        isDebug && performance.mark('handleInstancedMeshModel-end');
+        isDebug && performance.measure('handleInstancedMeshModel', 'handleInstancedMeshModel-start', 'handleInstancedMeshModel-end');
+      },
+
+      /**
+       * 完成批量加载
+       */
+      completeBatchLoading() {
+        const loadingState = this.noObserver
+          ? this.noObserver.batchLoadingState
+          : this.batchLoadingState;
+        if (!loadingState.isLoading) return;
+
+        // if (modelGroup) {
+          // if (firstDraw) {
+          //   if (scene) scene.add(modelGroup);
+          //   firstDraw = false;
+          // }
+          // if (!rotatedSceneFlag) {
+          //   rotatedSceneFlag = true;
+          // }
+        if (modelGroup) {
+          if (!modelGroup.userData.initDone) {
+            scene.add(modelGroup);
+            modelGroup.applyMatrix4(bizToThreeMatrix);
+            modelGroup.updateMatrixWorld();
+            this.smartModelCenter(sceneBoundingBox);
+            this.setCameraConfig();
+            modelGroup.userData.initDone = true;
+          }
+          modelGroup.updateMatrixWorld();
+          let modelBox3 = new this.THREE.Box3();
+          modelBox3.expandByObject(modelGroup);
+          let modelWorldPs = new this.THREE.Vector3()
+            .addVectors(modelBox3.max, modelBox3.min)
+            .multiplyScalar(0.5);
+          modelGroup.userData.modelWorldPs = modelWorldPs;
+          modelGroup.traverse(child => {
+            if (child.isMesh && !child.userData.batchInitDone) {
+              markRendered(child);
+              const json = this.getMeshCenterAndVolume(child);
+              let meshBox3 = new this.THREE.Box3();
+              meshBox3.setFromObject(child);
+              let worldPs = new this.THREE.Vector3()
+                .addVectors(meshBox3.max, meshBox3.min)
+                .multiplyScalar(0.5);
+              if (isNaN(worldPs.x)) return;
+              child.worldDir = new this.THREE.Vector3().subVectors(worldPs, modelWorldPs).normalize();
+              child.userData.center = json.center;
+              child.userData.worldPs = worldPs;
+              child.userData.oldPs = child.getWorldPosition(new this.THREE.Vector3());
+              child.userData.box = json.box;
+              child.userData.position = new this.THREE.Vector3().copy(child.position);
+              child.userData.translate = { x: 0, y: 0, z: 0 };
+              child.userData.rotate = { x: 0, y: 0, z: 0 };
+              child.userData.modelWorldPs = modelWorldPs;
+              if (loadingState.options && loadingState.options.userData) {
+                for (const key in loadingState.options.userData) {
+                  child.userData[key] = loadingState.options.userData[key];
+                }
+              }
+              child.userData.batchInitDone = true;
+            }
+          });
+        }
+        // }
+
+        // 重置加载状态
+        loadingState.isLoading = false;
+        loadingState.animationFrameId = null;
+
+        this.batchLoadingState.isLoading = false;
+
+        // 调用完成回调
+        if (loadingState.onComplete) {
+          loadingState.onComplete({
+            totalLoaded: loadingState.loadedCount,
+            totalBatches: loadingState.totalBatches,
+          });
+
+          var axesHelper = new this.THREE.AxesHelper(10000);
+          scene.add(axesHelper);
+          // this.showSceneBoundingBox();
+        }
+
+        // 触发事件
+        // this.$emit('modelLoaded');
+      },
+
+      /**
+       * 停止批量加载
+       */
+      stopBatchLoading() {
+        const loadingState = this.noObserver
+          ? this.noObserver.batchLoadingState
+          : this.batchLoadingState;
+        if (loadingState.animationFrameId) {
+          cancelAnimationFrame(loadingState.animationFrameId);
+          loadingState.animationFrameId = null;
+        }
+        loadingState.isLoading = false;
+        this.batchLoadingState.isLoading = false;
+      },
+
+      /**
+       * 修改后的drawModel方法，支持分帧加载
+       */
+      drawModelWithBatchLoading(
+        data,
+        color = '',
+        meshNameConfig = {},
+        options = {},
+        onProgress = null,
+        onComplete = null
+      ) {
+        if (Object.keys(data).length === 0) {
+          onComplete && onComplete();
+          return;
+        }
+
+        // 如果是第一次调用drawModel且用户正在交互，标记需要在交互结束后居中
+        if (modelGroups.length === 0 && userInteracting) {
+          needsCenteringAfterInteraction = true;
+        }
+
+        // 启动分帧加载
+        this.startBatchLoading(data, color, meshNameConfig, options, onProgress, onComplete);
+      },
+
+      /**
+       * 统一的中断控制中心 - 设置中断状态
+       * @param {boolean} active - 是否激活中断
+       * @param {string} reason - 中断原因 ('wheel', 'camera', 'user_interaction' 等)
+       * @param {Object} options - 配置项 { immediate: boolean }
+       */
+      setSystemInterruption(active, reason = 'user_interaction', options = {}) {
+        const loadingState = this.noObserver
+          ? this.noObserver.batchLoadingState
+          : this.batchLoadingState;
+
+        if (active) {
+          // --- 激活中断/暂停 ---
+
+          // 1. 更新交互状态标记
+          // 如果是相机操作，更新全局标记
+          if (reason === 'camera') {
+            userInteracting = true;
+          }
+
+          // 更新 batchLoadingState 中的交互状态
+          loadingState.interactionState.isInteracting = true;
+          loadingState.interactionState.interactionType = reason;
+          loadingState.interactionState.lastInteractionTime = Date.now();
+
+          // 2. 暂停渲染相关
+          // 立即标记暂停
+          if (!loadingState.isPaused) {
+            loadingState.isPaused = true;
+            loadingState.pauseStartTime = Date.now();
+          }
+          loadingState.pauseReason = reason;
+
+          // 交互期间强制跳过渲染帧，提升响应速度
+          forceSkipRendering = true;
+          skipNextRenderFrame = true;
+
+          // 3. 清理之前的恢复定时器（防止在交互中途意外恢复）
+          if (loadingState.resumeTimer) {
+            clearTimeout(loadingState.resumeTimer);
+            loadingState.resumeTimer = null;
+          }
+
+          // 4. 中断当前的本地批量加载循环
+          if (loadingState.animationFrameId) {
+            cancelAnimationFrame(loadingState.animationFrameId);
+            loadingState.animationFrameId = null;
+          }
+
+          // 5. 联动 StreamLoader (如果存在实例)
+          // 确保网络流式加载也同步暂停
+          const streamLoader = this.noObserver.streamLoader;
+          if (streamLoader && typeof streamLoader.handleControlStart === 'function') {
+            streamLoader.handleControlStart();
+          }
+        } else {
+          // --- 解除中断/恢复 ---
+          const { immediate = false } = options;
+
+          // 关键修复：立即更新交互状态，不依赖 doResume 的执行时机
+          // 这样可以避免当一种交互（如 camera）结束但另一种（如 wheel）仍活跃时，状态无法正确复位的问题
+          if (reason === 'camera') {
+            userInteracting = false;
+          }
+
+          // 定义恢复执行逻辑
+          const doResume = () => {
+            // 双重检查：
+            // 1. 如果有滚轮定时器未结束，说明还在连续滚动中，不恢复
+            if (loadingState.interactionState.wheelTimeout) return;
+
+            // 2. 如果是 wheel 结束，但 userInteracting (camera) 还在进行，则不恢复
+            if (reason === 'wheel' && userInteracting) return;
+
+            // 3. 检查是否有强制跳过标记 (可能由其他逻辑触发)
+            // if (forceSkipRendering && reason !== 'user_interaction') return; // 视情况而定
+
+            // --- 执行恢复 ---
+
+            loadingState.isPaused = false;
+            loadingState.pauseReason = '';
+
+            loadingState.interactionState.isInteracting = false;
+            loadingState.interactionState.interactionType = '';
+
+            forceSkipRendering = false;
+
+            // 恢复本地批量加载 (如果未完成)
+            if (loadingState.isLoading && loadingState.currentBatch < loadingState.totalBatches) {
+              this.loadNextBatch();
+            }
+
+            // 恢复 StreamLoader
+            const streamLoader = this.noObserver.streamLoader;
+            if (streamLoader && typeof streamLoader.handleControlEnd === 'function') {
+              // StreamLoader 内部通常有防抖或延迟，这里直接通知结束即可
+              streamLoader.handleControlEnd();
+            }
+          };
+
+          // 清理旧定时器
+          if (loadingState.resumeTimer) {
+            clearTimeout(loadingState.resumeTimer);
+            loadingState.resumeTimer = null;
+          }
+
+          if (immediate) {
+            doResume();
+          } else {
+            // 默认延迟恢复，避免频繁抖动
+            const delay = loadingState.resumeDelay || 100;
+            loadingState.resumeTimer = setTimeout(() => {
+              doResume();
+              loadingState.resumeTimer = null;
+            }, delay);
+          }
+        }
+      },
+
+      /**
+       * 暂停模型渲染 (兼容旧接口)
+       */
+      pauseModelRendering(reason = 'user_interaction') {
+        this.setSystemInterruption(true, reason);
+      },
+
+      /**
+       * 交互开始
+       */
+      beginInteraction(type = 'user') {
+        const reason =
+          type === 'wheel' ? 'wheel' : type === 'camera' ? 'camera' : 'user_interaction';
+        this.setSystemInterruption(true, reason);
+      },
+
+      /**
+       * 交互结束
+       */
+      endInteraction(type = 'user', event = null, opts = {}) {
+        // 保持事件参数签名，虽然这里没用到 event
+        this.setSystemInterruption(false, type, opts);
+      },
+
+      /**
+       * 滚轮交互结束的定时检测
+       */
+      scheduleWheelInteractionEnd(event, delay = 100) {
+        const loadingState = this.noObserver
+          ? this.noObserver.batchLoadingState
+          : this.batchLoadingState;
+
+        if (loadingState.interactionState.wheelTimeout) {
+          clearTimeout(loadingState.interactionState.wheelTimeout);
+          loadingState.interactionState.wheelTimeout = null;
+        }
+
+        loadingState.interactionState.wheelTimeout = setTimeout(() => {
+          this.$emit('wheelEnd', event);
+          this.endInteraction('wheel', event, { immediateResume: false });
+          loadingState.interactionState.wheelTimeout = null;
+        }, delay);
+      },
+
+      /**
+       * 恢复模型渲染 (兼容旧接口)
+       */
+      resumeModelRendering(immediate = true) {
+        this.setSystemInterruption(false, 'user_interaction', { immediate });
+      },
+
+      /**
+       * 暂停批次加载 (兼容旧接口)
+       */
+      pauseBatchLoading(reason = 'user_interaction') {
+        this.setSystemInterruption(true, reason);
+      },
+
+      /**
+       * 恢复批次加载 (兼容旧接口)
+       */
+      resumeBatchLoading() {
+        this.setSystemInterruption(false, 'user_interaction');
+      },
+
+      /**
+       * 隐藏场景包围盒
+       */
+      hideSceneBoundingBox() {
+        if (sceneBoundingBoxHelper && scene) {
+          scene.remove(sceneBoundingBoxHelper);
+          sceneBoundingBoxHelper = null;
+          boundingBoxVisible = false;
+          console.log('场景包围盒已隐藏');
+        }
+      },
+
+      /**
+       * 切换场景包围盒显示状态
+       */
+      toggleSceneBoundingBox() {
+        if (boundingBoxVisible) {
+          this.hideSceneBoundingBox();
+        } else {
+          this.showSceneBoundingBox();
+        }
       },
     },
   };
@@ -1695,6 +5204,86 @@
     width: 20px;
     height: 20px;
   }
+
+  /* 加载指示器样式 */
+  .loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+  }
+
+  .loading-overlay--visible {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .loading-content {
+    background: white;
+    border-radius: 12px;
+    padding: 30px;
+    text-align: center;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    min-width: 300px;
+    max-width: 400px;
+  }
+
+  .loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #409eff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loading-text {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 20px;
+  }
+
+  .loading-progress-bar {
+    width: 100%;
+    height: 8px;
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 15px;
+  }
+
+  .loading-progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #409eff 0%, #67c23a 100%);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+  }
+
+  .loading-details {
+    font-size: 12px;
+    color: #666;
+    line-height: 1.5;
+  }
 </style>
 <style>
   /* 自定义lil-gui样式 - 浅色主题 */
@@ -1853,4 +5442,4 @@
   .lil-gui .folder.closed > .children {
     display: none !important;
   }
-</style>
+</style>