fl-web-component 2.0.5 → 2.0.7

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

@@ -1,60 +1,66 @@
 <template>
-  <div id="fl-model"></div>
+  <div :id="containId" class="fl-model-containor"></div>
 </template>
 <script>
-var [
-  renderer,
-  scene,
-  camera,
-  cameraControls,
-  instructions,
-  raycaster,
-  mouse,
-  labelRenderer,
-  lineTexture,
-  curve,
-  downRaycaster,
-  velocity,
-  direction,
-  clock,
-  pointControls,
-  threeMeasure,
-  modelGroup,
-  animateId,
-  scenePass,
-  outlineComposer,
-  outlinePass,
-  renderTarget,
-  sceneClock,
-  bizToThreeMatrix,
-  threeToBizMatrix,
-  stats,
-] = (function* (v) {
-  while (true) yield v;
-})(null);
-
-var [lastTime, firstTime, fpsClock, timeStamp, progress, lastMiddleClickTime] = (function* (v) {
-  while (true) yield v;
-})(0);
 var singleFrameTime = 1 / 30;
+var dragThreshold = 5; // 拖拽阈值，像素单位
 
-var [
-  roaming,
-  firstPerSign,
-  canJump,
-  moveForward,
-  moveBackward,
-  moveLeft,
-  moveRight,
-  measureFlag,
-  // rotatedSceneFlag,
-] = (function* (v) {
-  while (true) yield v;
-})(false);
-
-var [spaceUp] = (function* (v) {
-  while (true) yield v;
-})(true);
+// 根据场景包围盒动态计算的最大dolly距离（对角线长度）
+let maxDollyDistance = Infinity;
+
+// var lastMiddleClickTime = 0;
+// var [
+//   renderer,
+//   scene,
+//   camera,
+//   cameraControls,
+//   instructions,
+//   raycaster,
+//   mouse,
+//   labelRenderer,
+//   lineTexture,
+//   curve,
+//   downRaycaster,
+//   velocity,
+//   direction,
+//   clock,
+//   pointControls,
+//   threeMeasure,
+//   modelGroup,
+//   animateId,
+//   scenePass,
+//   outlineComposer,
+//   outlinePass,
+//   renderTarget,
+//   sceneClock,
+//   bizToThreeMatrix,
+//   threeToBizMatrix,
+//   stats,
+// ] = (function* (v) {
+//   while (true) yield v;
+// })(null);
+
+// var [tlastTime, firstTime, fpsClock,timeStamp, progress, lastMiddleClickTime] = (function* (v) {
+//   while (true) yield v;
+// })(0);
+
+// var [
+//   roaming,
+//   firstPerSign,
+//   canJump,
+//   moveForward,
+//   moveBackward,
+//   moveLeft,
+//   moveRight,
+//   measureFlag,
+//   // rotatedSceneFlag,
+// ] = (function* (v) {
+//   while (true) yield v;
+// })(false);
+
+// var [spaceUp] = (function* (v) {
+//   while (true) yield v;
+// })(true);
 
 const renderedThisFrame = new Set();
 
@@ -65,9 +71,9 @@ function markRendered(mesh) {
 }
 
 // 交互期间丢弃当前帧渲染的标记
-let skipNextRenderFrame = false;
+// let skipNextRenderFrame = false;
 // 增强的交互检测标记
-let forceSkipRendering = false;
+// let forceSkipRendering = false;
 // let interactionFrameCount = 0; // 交互期间跳过的帧数计数
 
 var clippingMesh = [],
@@ -82,15 +88,11 @@ var clippingMesh = [],
   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 = {
@@ -166,6 +168,10 @@ export default {
         return {};
       },
     },
+    containId: {
+      type: String,
+      default: 'fl-model',
+    },
   },
   data() {
     return {
@@ -196,7 +202,90 @@ export default {
       },
     };
   },
+  beforeCreate() {
+    this.spaceUp = true;
+    let arr = [
+      'renderer',
+      'scene',
+      'camera',
+      'cameraControls',
+      'instructions',
+      'raycaster',
+      'mouse',
+      'labelRenderer',
+      'lineTexture',
+      'curve',
+      'downRaycaster',
+      'velocity',
+      'direction',
+      'clock',
+      'pointControls',
+      'threeMeasure',
+      'modelGroup',
+      'animateId',
+      'scenePass',
+      'outlineComposer',
+      'outlinePass',
+      'renderTarget',
+      'sceneClock',
+      'bizToThreeMatrix',
+      'threeToBizMatrix',
+      'stats',
+      'centeringDebounceTimer',
+      'sceneBoundingBox',
+      'sceneBoundingBoxHelper',
+    ];
+    arr.forEach(item => {
+      this[item] = null;
+    });
+    [
+      'roaming',
+      'firstPerSign',
+      'canJump',
+      'moveForward',
+      'moveBackward',
+      'moveLeft',
+      'moveRight',
+      'measureFlag',
+      'skipNextRenderFrame',
+      'forceSkipRendering',
+      'userInteracting',
+      'hasExecutedCentering',
+      'needsCenteringAfterInteraction',
+      'isDragging',
+      'boundingBoxVisible',
+    ].forEach(item => {
+      this[item] = false;
+    });
+
+    ['clippingMesh', 'modelActive'].forEach(item => {
+      this[item] = [];
+    });
+    ['removeSpeed', 'upSpeed'].forEach(item => {
+      this[item] = 200;
+    });
+
+    this.gui = null;
+    this.roamConfig = {
+      loop: false,
+      speed: 0, // 最大值为3
+      name: '',
+    };
+    this.guiParams = {
+      x轴: 0,
+      y轴: 0,
+      z轴: 0,
+      '-x轴': 0,
+      '-y轴': 0,
+      '-z轴': 0,
+    };
+  },
   created() {
+    ['lastTime', 'firstTime', 'fpsClock', 'timeStamp', 'progress'].forEach(item => {
+      this[item] = 0;
+    });
+    this.mouseDownPosition = { x: 0, y: 0 };
+    this.mouseUpPosition = { x: 0, y: 0 };
     // 初始化非响应式的高频状态对象
     this.noObserver = {
       modelStateManager: {
@@ -256,20 +345,19 @@ export default {
       occlusionWorkerRequestMap: new Map(),
       occlusionWorkerRequestId: 0,
     };
-
+    this.modelGroups = [];
+    this.modelActions = [];
+    this.lastMiddleClickTime = 0;
     CameraControls.install({ THREE: this.THREE });
-    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();
-    mouse = new this.THREE.Vector2();
-    const initialRect = instructions
-      ? instructions.getBoundingClientRect()
-      : { width: window.innerWidth, height: window.innerHeight };
-    renderTarget = new this.THREE.WebGLRenderTarget(initialRect.width, initialRect.height, {
+    this.bizToThreeMatrix = new this.THREE.Matrix4();
+    this.bizToThreeMatrix.makeRotationX(-Math.PI / 2);
+    this.threeToBizMatrix = new this.THREE.Matrix4();
+    this.threeToBizMatrix.makeRotationX(Math.PI / 2);
+    this.fpsClock = new this.THREE.Clock();
+    this.raycaster = new this.THREE.Raycaster();
+    this.sceneClock = new this.THREE.Clock();
+    this.mouse = new this.THREE.Vector2();
+    this.renderTarget = new this.THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
       minFilter: this.THREE.LinearFilter,
       magFilter: this.THREE.LinearFilter,
       format: this.THREE.RGBAFormat,
@@ -278,7 +366,7 @@ export default {
     });
   },
   mounted() {
-    instructions = document.getElementById('fl-model');
+    this.instructions = document.getElementById(this.containId); // 'fl-model'
     this.initRender();
     this.initScene();
     this.initCamera();
@@ -293,11 +381,11 @@ export default {
     // 判断是设备是手机还是电脑
     let isMobileDevice = this.isMobileDevice();
     if (isMobileDevice) {
-      renderer.domElement.addEventListener('pointerup', this.mouseClick, false);
-      renderer.domElement.addEventListener('pointerdown', this.mouseDown, false);
+      this.renderer.domElement.addEventListener('pointerup', this.mouseClick, false);
+      this.renderer.domElement.addEventListener('pointerdown', this.mouseDown, false);
     } else {
-      renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
-      renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
+      this.renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
+      this.renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
     }
     this.animate();
   },
@@ -336,13 +424,13 @@ export default {
       return instancedMesh ? instancedMesh.visible === false : false;
     },
     pushOutlineTarget(target) {
-      if (!outlinePass || !target) return;
-      if (!outlinePass.selectedObjects.includes(target)) {
-        outlinePass.selectedObjects.push(target);
+      if (!this.outlinePass || !target) return;
+      if (!this.outlinePass.selectedObjects.includes(target)) {
+        this.outlinePass.selectedObjects.push(target);
       }
     },
     ensureOutlineInstanceProxy(instancedMesh, instanceIndex) {
-      if (!scene || !instancedMesh || !instancedMesh.isInstancedMesh) return null;
+      if (!this.scene || !instancedMesh || !instancedMesh.isInstancedMesh) return null;
       const state = this.noObserver;
       if (!state || !state.outlineInstanceProxyMap) return null;
       const instanceId = this.getInstanceId(instancedMesh, instanceIndex);
@@ -382,7 +470,7 @@ export default {
         instanceIndex,
       };
 
-      scene.add(proxy);
+      this.scene.add(proxy);
       state.outlineInstanceProxyMap.set(key, proxy);
       return proxy;
     },
@@ -394,11 +482,11 @@ export default {
       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 (this.outlinePass) {
+        const idx = this.outlinePass.selectedObjects.indexOf(proxy);
+        if (idx !== -1) this.outlinePass.selectedObjects.splice(idx, 1);
       }
-      if (scene) scene.remove(proxy);
+      if (this.scene) this.scene.remove(proxy);
       if (proxy.material) proxy.material.dispose && proxy.material.dispose();
       return proxy;
     },
@@ -589,7 +677,7 @@ export default {
         const box = new this.THREE.Box3(
           new this.THREE.Vector3(minX, minY, minZ),
           new this.THREE.Vector3(maxX, maxY, maxZ)
-        ).applyMatrix4(bizToThreeMatrix);
+        ).applyMatrix4(this.bizToThreeMatrix);
         this.noObserver.sceneBoxes.set(documentId, box);
       } else {
         this.noObserver.sceneBoxes.delete(documentId);
@@ -605,8 +693,8 @@ export default {
       if (occScene && occScene.children && occScene.children.length > 0) {
         const occBox = new this.THREE.Box3().setFromObject(occScene);
         if (!occBox.isEmpty()) {
-          sceneBoundingBox = occBox;
-          return sceneBoundingBox;
+          this.sceneBoundingBox = occBox;
+          return this.sceneBoundingBox;
         }
       }
 
@@ -637,11 +725,11 @@ export default {
           Number.isFinite(maxY) &&
           Number.isFinite(maxZ)
         ) {
-          sceneBoundingBox = new this.THREE.Box3(
+          this.sceneBoundingBox = new this.THREE.Box3(
             new this.THREE.Vector3(minX, minY, minZ),
             new this.THREE.Vector3(maxX, maxY, maxZ)
           );
-          return sceneBoundingBox;
+          return this.sceneBoundingBox;
         }
       }
 
@@ -651,12 +739,12 @@ export default {
         for (let i = 1; i < boxes.length; i++) {
           firstBox.union(boxes[i]);
         }
-        sceneBoundingBox = firstBox;
-        return sceneBoundingBox;
+        this.sceneBoundingBox = firstBox;
+        return this.sceneBoundingBox;
       }
 
-      sceneBoundingBox = new this.THREE.Box3();
-      return sceneBoundingBox;
+      this.sceneBoundingBox = new this.THREE.Box3();
+      return this.sceneBoundingBox;
     },
     setBoxIndex(boxJson, documentId, isAdd = true) {
       if (!this._boxIndex) this._boxIndex = new Map();
@@ -665,7 +753,7 @@ export default {
         if (this.noObserver && this.noObserver.documentModelIds) {
           this.noObserver.documentModelIds.clear();
         }
-        hasExecutedCentering = false;
+        this.hasExecutedCentering = false;
         this.buildOctreeFromBoxIndex();
         return;
       }
@@ -687,13 +775,13 @@ export default {
           if (hasMatrix && it.matrix.length >= 16) {
             const matrix = new this.THREE.Matrix4().fromArray(it.matrix);
             const worldMatrix = matrix.clone();
-            if (bizToThreeMatrix) {
-              worldMatrix.premultiply(bizToThreeMatrix);
+            if (this.bizToThreeMatrix) {
+              worldMatrix.premultiply(this.bizToThreeMatrix);
             }
             boxThree.applyMatrix4(worldMatrix);
-          } else if (bizToThreeMatrix) {
+          } else if (this.bizToThreeMatrix) {
             // 注意：applyMatrix4 会重新计算 AABB
-            boxThree.applyMatrix4(bizToThreeMatrix);
+            boxThree.applyMatrix4(this.bizToThreeMatrix);
           }
 
           const userData = {
@@ -760,7 +848,7 @@ export default {
 
           // 当前无模型了，重置相机中心状态
           if (this.noObserver.documentModelIds.size == 0) {
-            hasExecutedCentering = false;
+            this.hasExecutedCentering = false;
           }
         }
       }
@@ -768,11 +856,16 @@ export default {
       console.log('time end', Date.now());
     },
     tryInitialCenterAfterBoundsReady() {
-      if (hasExecutedCentering || userInteracting) return;
-      if (!sceneBoundingBox || !sceneBoundingBox.isBox3 || sceneBoundingBox.isEmpty()) return;
+      if (this.hasExecutedCentering || this.userInteracting) return;
+      if (
+        !this.sceneBoundingBox ||
+        !this.sceneBoundingBox.isBox3 ||
+        this.sceneBoundingBox.isEmpty()
+      )
+        return;
       if (!this._boxIndex || this._boxIndex.size === 0) return;
 
-      this.smartModelCenter(sceneBoundingBox, 0);
+      this.smartModelCenter(this.sceneBoundingBox, 0);
     },
     buildOctreeFromBoxIndex() {
       if (!this._boxIndex || this._boxIndex.size === 0) {
@@ -801,7 +894,7 @@ export default {
         new this.THREE.Vector3(minX, minY, minZ),
         new this.THREE.Vector3(maxX, maxY, maxZ)
       );
-      sceneBoundingBox = rootBox.clone();
+      this.sceneBoundingBox = rootBox.clone();
       this._octreeMaxItems = 64;
       this._octreeMaxDepth = 12;
       this._octree = { box: rootBox, items: [], children: null, depth: 0 };
@@ -874,14 +967,14 @@ export default {
     },
     _getCurrentFrustum() {
       // 确保相机矩阵是最新的
-      if (camera) {
-        camera.updateMatrixWorld();
-        camera.matrixWorldInverse.copy(camera.matrixWorld).invert();
+      if (this.camera) {
+        this.camera.updateMatrixWorld();
+        this.camera.matrixWorldInverse.copy(this.camera.matrixWorld).invert();
       }
       const frustum = new this.THREE.Frustum();
       const vpMatrix = new this.THREE.Matrix4().multiplyMatrices(
-        camera.projectionMatrix,
-        camera.matrixWorldInverse
+        this.camera.projectionMatrix,
+        this.camera.matrixWorldInverse
       );
       frustum.setFromProjectionMatrix(vpMatrix);
       return frustum;
@@ -946,26 +1039,26 @@ export default {
       return results;
     },
     setCameraFar() {
-      const bbox = sceneBoundingBox;
+      const bbox = this.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();
+      // const distance = this.camera.position.distanceTo(center);
+      this.camera.far = maxDist * 2;
+      // this.camera.far = 100;
+      this.camera.updateProjectionMatrix();
     },
     // 新增：当相机位于场景包围盒内时，动态调整相机远裁剪面
     adjustCameraFarPlaneForSceneBox() {
       try {
-        if (!camera || !sceneBoundingBox || !sceneBoundingBox.isBox3) return;
+        if (!this.camera || !this.sceneBoundingBox || !this.sceneBoundingBox.isBox3) return;
 
         // 获取最新相机位置
-        camera.updateMatrixWorld(true);
-        const camPos = new this.THREE.Vector3().setFromMatrixPosition(camera.matrixWorld);
+        this.camera.updateMatrixWorld(true);
+        const camPos = new this.THREE.Vector3().setFromMatrixPosition(this.camera.matrixWorld);
 
-        const min = sceneBoundingBox.min;
-        const max = sceneBoundingBox.max;
+        const min = this.sceneBoundingBox.min;
+        const max = this.sceneBoundingBox.max;
 
         // 包围盒八个顶点
         const vertices = [
@@ -987,13 +1080,13 @@ export default {
         }
 
         // 确保 newFar > near，且更新投影矩阵
-        const newFar = Math.max(maxDistance, camera.near + 0.1);
-        if (Math.abs(camera.far - newFar) > 1e-6) {
-          camera.far = newFar;
-          camera.updateProjectionMatrix();
+        const newFar = Math.max(maxDistance, this.camera.near + 0.1);
+        if (Math.abs(this.camera.far - newFar) > 1e-6) {
+          this.camera.far = newFar;
+          this.camera.updateProjectionMatrix();
         }
 
-        // console.log('camera.far', camera.far)
+        // console.log('this.camera.far', this.camera.far)
       } catch (e) {
         // 防御式处理，避免交互中断
       }
@@ -1002,7 +1095,7 @@ export default {
      * 计算当前相机视口在指定平面上的投影范围，并返回视椎体高度（min/max）。
      * frustumY.min 会被限制：不小于平面在视椎体 x/z 范围内的最低 y 值（如果可计算）。
      *
-     * @param {THREE.Camera} camera
+     * @param {THREE.Camera} this.camera
      * @param {number} width
      * @param {number} height
      * @param {THREE.Plane} plane - three.js 的 Plane，方程为: normal.dot(p) + constant = 0
@@ -1013,8 +1106,8 @@ export default {
     getScreenPlaneBounds(camera, width, height, plane, opts = {}) {
       const { includeFrustumY = false } = opts;
 
-      camera.updateMatrixWorld();
-      if (camera.projectionMatrixNeedsUpdate) camera.updateProjectionMatrix();
+      this.camera.updateMatrixWorld();
+      if (this.camera.projectionMatrixNeedsUpdate) this.camera.updateProjectionMatrix();
 
       const screenCorners = [
         [0, 0], // 左下
@@ -1034,11 +1127,11 @@ export default {
 
         const ndcNear = ndcBase.clone();
         ndcNear.z = -1;
-        frustumPoints.push(ndcNear.clone().unproject(camera));
+        frustumPoints.push(ndcNear.clone().unproject(this.camera));
 
         const ndcFar = ndcBase.clone();
         ndcFar.z = 1;
-        frustumPoints.push(ndcFar.clone().unproject(camera));
+        frustumPoints.push(ndcFar.clone().unproject(this.camera));
       }
 
       const frustumBox = new this.THREE.Box3().setFromPoints(frustumPoints);
@@ -1085,14 +1178,14 @@ export default {
       // 基于远/近裁剪面角点计算在 Y 轴的投影范围（min/max）
       const nearFarY = computePlaneMinYOverBox(plane, frustumBox);
 
-      const target = this.getCameraTargetOnPlane(camera, plane);
+      const target = this.getCameraTargetOnPlane(this.camera, plane);
 
-      // 将最终范围限制在 sceneBoundingBox 内（若已存在）
+      // 将最终范围限制在 this.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);
+      if (this.sceneBoundingBox && this.sceneBoundingBox.isBox3) {
+        finalMinY = Math.max(finalMinY, this.sceneBoundingBox.min.y);
+        finalMaxY = Math.min(finalMaxY, this.sceneBoundingBox.max.y);
       }
 
       return {
@@ -1104,46 +1197,48 @@ export default {
     },
 
     /**
-     * 计算相机射线与场景包围盒(sceneBoundingBox)的交点，以及该点到视椎体近裁剪面。
-     * 优先使用相机的目标点(cameraControls._target)确定射线方向；若不可用则回退为相机世界前向。
+     * 计算相机射线与场景包围盒(this.sceneBoundingBox)的交点，以及该点到视椎体近裁剪面。
+     * 优先使用相机的目标点(this.cameraControls._target)确定射线方向；若不可用则回退为相机世界前向。
      * 若包围盒为空，回退为根据当前模型组/场景计算一次包围盒。
      * 若与包围盒无交点且提供了平面参数，则回退为与该平面的交点；仍无交点则将相机位置投影到该平面。
      *
-     * @param {THREE.Camera} camera - 相机对象
+     * @param {THREE.Camera} this.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();
+      this.camera.updateMatrixWorld();
+      if (this.camera.projectionMatrixNeedsUpdate) this.camera.updateProjectionMatrix();
 
       // 相机世界位置
-      const cameraPosition = new this.THREE.Vector3().setFromMatrixPosition(camera.matrixWorld);
+      const cameraPosition = new this.THREE.Vector3().setFromMatrixPosition(
+        this.camera.matrixWorld
+      );
 
-      // 从相机指向目标点的射线方向（优先使用 cameraControls._target）
+      // 从相机指向目标点的射线方向（优先使用 this.cameraControls._target）
       const rayDirection = new this.THREE.Vector3();
       if (
-        typeof cameraControls !== 'undefined' &&
-        cameraControls &&
-        cameraControls.enabled &&
-        cameraControls._target
+        typeof this.cameraControls !== 'undefined' &&
+        this.cameraControls &&
+        this.cameraControls.enabled &&
+        this.cameraControls._target
       ) {
-        rayDirection.copy(cameraControls._target).sub(cameraPosition).normalize();
+        rayDirection.copy(this.cameraControls._target).sub(cameraPosition).normalize();
       } else {
-        camera.getWorldDirection(rayDirection); // -Z 方向（世界坐标）
+        this.camera.getWorldDirection(rayDirection); // -Z 方向（世界坐标）
       }
 
       const ray = new this.THREE.Ray(cameraPosition.clone(), rayDirection.clone());
 
       // 准备/计算场景包围盒
-      // if (!sceneBoundingBox) {
+      // if (!this.sceneBoundingBox) {
       //   const box3 = new this.THREE.Box3();
-      //   if (typeof modelGroup !== 'undefined' && modelGroup) {
-      //     box3.expandByObject(modelGroup);
-      //   } else if (scene) {
-      //     box3.expandByObject(scene);
+      //   if (typeof this.modelGroup !== 'undefined' && this.modelGroup) {
+      //     box3.expandByObject(this.modelGroup);
+      //   } else if (this.scene) {
+      //     box3.expandByObject(this.scene);
       //   }
-      //   sceneBoundingBox = box3;
+      //   this.sceneBoundingBox = box3;
       // }
 
       // 与场景包围盒的交点（若无交点则进行回退）
@@ -1151,22 +1246,24 @@ export default {
       let boxHitPoint = null;
       // 若包围盒不存在或为空，兜底从模型组/场景计算一次
       if (
-        !sceneBoundingBox ||
-        (sceneBoundingBox.isBox3 && sceneBoundingBox.isEmpty && sceneBoundingBox.isEmpty())
+        !this.sceneBoundingBox ||
+        (this.sceneBoundingBox.isBox3 &&
+          this.sceneBoundingBox.isEmpty &&
+          this.sceneBoundingBox.isEmpty())
       ) {
         const obj =
-          typeof modelGroup !== 'undefined' &&
-          modelGroup &&
-          modelGroup.children &&
-          modelGroup.children.length
-            ? modelGroup
-            : scene;
+          typeof this.modelGroup !== 'undefined' &&
+          this.modelGroup &&
+          this.modelGroup.children &&
+          this.modelGroup.children.length
+            ? this.modelGroup
+            : this.scene;
         if (obj) {
-          sceneBoundingBox = new this.THREE.Box3().setFromObject(obj);
+          this.sceneBoundingBox = new this.THREE.Box3().setFromObject(obj);
         }
       }
-      if (sceneBoundingBox && sceneBoundingBox.isBox3) {
-        boxHitPoint = ray.intersectBox(sceneBoundingBox, new this.THREE.Vector3());
+      if (this.sceneBoundingBox && this.sceneBoundingBox.isBox3) {
+        boxHitPoint = ray.intersectBox(this.sceneBoundingBox, new this.THREE.Vector3());
       }
 
       // targetPoint 保留原平面回退逻辑（用于其他需要点位的场景）
@@ -1206,14 +1303,14 @@ export default {
      * @returns {boolean} 是否在视椎体内
      */
     isModelInFrustum(model, instanceId = null, frustum = null) {
-      if (!model || !camera) return true;
+      if (!model || !this.camera) return true;
 
       // 优先使用传入的 frustum，避免重复创建
       if (!frustum) {
         frustum = new this.THREE.Frustum();
         const matrix = new this.THREE.Matrix4().multiplyMatrices(
-          camera.projectionMatrix,
-          camera.matrixWorldInverse
+          this.camera.projectionMatrix,
+          this.camera.matrixWorldInverse
         );
         frustum.setFromProjectionMatrix(matrix);
       }
@@ -1247,7 +1344,7 @@ export default {
      * @returns {number} SSE值
      */
     calculateSSE(model) {
-      if (!model || !camera || !renderer) return 0;
+      if (!model || !this.camera || !this.renderer) return 0;
 
       // 获取模型的包围盒
       const box = new this.THREE.Box3().setFromObject(model);
@@ -1261,7 +1358,7 @@ export default {
 
       // 获取相机世界位置
       const cameraPosition = new this.THREE.Vector3();
-      camera.getWorldPosition(cameraPosition);
+      this.camera.getWorldPosition(cameraPosition);
 
       // 计算相机到物体包围盒中心的距离
       const distance = cameraPosition.distanceTo(center);
@@ -1270,10 +1367,10 @@ export default {
       if (distance === 0) return Infinity;
 
       // 获取视口高度
-      const viewportHeight = renderer.domElement.clientHeight;
+      const viewportHeight = this.renderer.domElement.clientHeight;
 
       // 计算tan(fov/2)，fov是以度为单位
-      const halfFovRad = this.THREE.MathUtils.degToRad(camera.fov / 2);
+      const halfFovRad = this.THREE.MathUtils.degToRad(this.camera.fov / 2);
       const tanHalfFov = Math.tan(halfFovRad);
 
       // 计算SSE
@@ -1283,14 +1380,14 @@ export default {
     },
     // 针对已卸载实例的信息进行视锥体检测
     isInstanceInfoInFrustum(instanceInfo) {
-      if (!instanceInfo || !camera) return true;
+      if (!instanceInfo || !this.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
+        this.camera.projectionMatrix,
+        this.camera.matrixWorldInverse
       );
       frustum.setFromProjectionMatrix(vpMatrix);
 
@@ -1316,7 +1413,7 @@ export default {
       const modelState = this.noObserver
         ? this.noObserver.modelStateManager
         : this.modelStateManager;
-      if (!this.modelStateManager.frustumCheckEnabled || !scene) return;
+      if (!this.modelStateManager.frustumCheckEnabled || !this.scene) return;
       const now = Date.now();
       if (now - modelState.lastCullingTime < 100) {
         return;
@@ -1329,8 +1426,8 @@ export default {
 
       const globalFrustum = this._frustum;
       const globalVpMatrix = this._vpMatrix.multiplyMatrices(
-        camera.projectionMatrix,
-        camera.matrixWorldInverse
+        this.camera.projectionMatrix,
+        this.camera.matrixWorldInverse
       );
       globalFrustum.setFromProjectionMatrix(globalVpMatrix);
 
@@ -1368,12 +1465,12 @@ export default {
       if (occlusionEnabled) {
         const state = occlusionState;
         const w =
-          renderer && renderer.domElement
-            ? renderer.domElement.clientWidth || renderer.domElement.width || 0
+          this.renderer && this.renderer.domElement
+            ? this.renderer.domElement.clientWidth || this.renderer.domElement.width || 0
             : 0;
         const h =
-          renderer && renderer.domElement
-            ? renderer.domElement.clientHeight || renderer.domElement.height || 0
+          this.renderer && this.renderer.domElement
+            ? this.renderer.domElement.clientHeight || this.renderer.domElement.height || 0
             : 0;
         // bufferWidth/Height 仍从响应式对象读取以支持动态修改
         // 性能优化：使用降采样缓冲区进行遮挡剔除，大幅减少 readPixels 耗时 (从全屏降至约 256px 宽)
@@ -1409,15 +1506,15 @@ export default {
           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 this.stats = state._occPerfStats;
+          //   const prev = this.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;
+          //   this.stats[name] = next;
           // };
 
           // 过滤掉透明物体
@@ -1543,8 +1640,8 @@ export default {
                 _tempScale.copy(halfSize).multiplyScalar(2);
                 _tempMatrix.copy(matrix);
                 _tempMatrix.scale(_tempScale);
-                if (typeof bizToThreeMatrix !== 'undefined' && bizToThreeMatrix) {
-                  _tempMatrix.premultiply(bizToThreeMatrix);
+                if (typeof this.bizToThreeMatrix !== 'undefined' && this.bizToThreeMatrix) {
+                  _tempMatrix.premultiply(this.bizToThreeMatrix);
                 }
 
                 boxes.mesh.setMatrixAt(i, _tempMatrix);
@@ -1648,7 +1745,7 @@ export default {
                 const vertexCount = (obbData.length / 3) | 0;
                 const needTransform =
                   (matrixArr && matrixArr.length >= 16) ||
-                  (typeof bizToThreeMatrix !== 'undefined' && bizToThreeMatrix);
+                  (typeof this.bizToThreeMatrix !== 'undefined' && this.bizToThreeMatrix);
 
                 if (needTransform) {
                   if (matrixArr && matrixArr.length >= 16) {
@@ -1656,8 +1753,8 @@ export default {
                   } else {
                     _tempMatA.identity();
                   }
-                  if (typeof bizToThreeMatrix !== 'undefined' && bizToThreeMatrix) {
-                    _tempMatA.premultiply(bizToThreeMatrix);
+                  if (typeof this.bizToThreeMatrix !== 'undefined' && this.bizToThreeMatrix) {
+                    _tempMatA.premultiply(this.bizToThreeMatrix);
                   }
                 }
 
@@ -1814,8 +1911,8 @@ export default {
                 tempMatrix.copy(matrix);
                 tempScale.copy(halfSize).multiplyScalar(2);
                 tempMatrix.scale(tempScale);
-                if (typeof bizToThreeMatrix !== 'undefined' && bizToThreeMatrix) {
-                  tempMatrix.premultiply(bizToThreeMatrix);
+                if (typeof this.bizToThreeMatrix !== 'undefined' && this.bizToThreeMatrix) {
+                  tempMatrix.premultiply(this.bizToThreeMatrix);
                 }
               } else {
                 c.box.getSize(tempScale);
@@ -1842,23 +1939,23 @@ export default {
             state._occTransparentMaxIdx = 0;
           }
 
-          // console.log('renderer', renderer)
-          const prevToneMapping = renderer.toneMapping;
-          const prevTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
+          // console.log('this.renderer', this.renderer)
+          const prevToneMapping = this.renderer.toneMapping;
+          const prevTarget = this.renderer.getRenderTarget ? this.renderer.getRenderTarget() : null;
           let prevClearColorHex = 0x000000;
           let prevClearAlpha = 0;
           try {
-            const c = renderer.getClearColor ? renderer.getClearColor() : null;
+            const c = this.renderer.getClearColor ? this.renderer.getClearColor() : null;
             if (c && c.isColor) prevClearColorHex = c.getHex();
             prevClearAlpha =
-              typeof renderer.getClearAlpha === 'function' ? renderer.getClearAlpha() : 0;
+              typeof this.renderer.getClearAlpha === 'function' ? this.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);
+          this.renderer.toneMapping = this.THREE.NoToneMapping;
+          this.renderer.setRenderTarget(rt);
+          this.renderer.setClearColor(new this.THREE.Color(0, 0, 0), 0);
+          this.renderer.clear(true, true, false);
+          this.camera.updateMatrixWorld(true);
+          this.renderer.render(state._occScene, this.camera);
           this.updateGlobalSceneBoundingBox();
           // const t1 = performance.now();
           // 从响应式对象读取 previewEnabled
@@ -1883,11 +1980,11 @@ export default {
             }
             state._previewCanvas.width = sw;
             state._previewCanvas.height = sh;
-            const cssW = Math.min(renderer.domElement.width / 5);
-            const cssH = Math.min(renderer.domElement.height / 5);
+            const cssW = Math.min(this.renderer.domElement.width / 5);
+            const cssH = Math.min(this.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);
+            this.renderer.readRenderTargetPixels(rt, 0, 0, sw, sh, state._previewBuffer);
             if (
               !state._previewImageData ||
               state._previewImageData.width !== sw ||
@@ -1915,7 +2012,7 @@ export default {
           }
           // const tPreview1 = performance.now();
           // _occRecordPerf('occ_preview_ms', tPreview1 - tPreview0, { sw, sh });
-          renderer.readRenderTargetPixels(rt, 0, 0, sw, sh, state._colorBuffer);
+          this.renderer.readRenderTargetPixels(rt, 0, 0, sw, sh, state._colorBuffer);
 
           const idIndexArr = activeIdIndexArr;
           const maxIdx = typeof state._occMaxIdx === 'number' ? state._occMaxIdx : 0;
@@ -1956,10 +2053,10 @@ export default {
           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);
+            this.renderer.setClearColor(new this.THREE.Color(0, 0, 0), 0);
+            this.renderer.clear(true, false, false);
+            this.renderer.render(state._occTransparentScene, this.camera);
+            this.renderer.readRenderTargetPixels(rt, 0, 0, sw, sh, state._colorBuffer);
 
             const tIdIndexArr = transparentIdIndexArr;
             const tScanResult = await this.scanOcclusionIndices(
@@ -1982,9 +2079,9 @@ export default {
             }
           }
 
-          renderer.setRenderTarget(prevTarget);
-          renderer.setClearColor(prevClearColorHex, prevClearAlpha);
-          renderer.toneMapping = prevToneMapping;
+          this.renderer.setRenderTarget(prevTarget);
+          this.renderer.setClearColor(prevClearColorHex, prevClearAlpha);
+          this.renderer.toneMapping = prevToneMapping;
         } catch (e) {
           for (let i = 0; i < candidates.length; i++) {
             visibleIdSet.add(candidates[i].modelId);
@@ -1999,7 +2096,7 @@ export default {
       visibleIdSet.forEach(id => visibleIds.push(id));
       const toLoadSet = new Set(visibleIdSet);
       const parentsToCheck = new Set();
-      scene.traverse(child => {
+      this.scene.traverse(child => {
         if (!child.isInstancedMesh) return;
         // 如果复用数量等于大于2个，则跳过裁剪和剔除处理（始终保留）
         if (child.count >= 2) {
@@ -2051,7 +2148,7 @@ export default {
               }
 
               // 仅当所有实例都不活跃时，才执行卸载
-              if (!firstPerSign && !roaming && allInactive) {
+              if (!this.firstPerSign && !this.roaming && allInactive) {
                 toUnload.push({ modelId, child });
               }
             }
@@ -2072,7 +2169,7 @@ export default {
         if (modelInVisible) {
           toLoadSet.delete(modelId);
         }
-        if (!firstPerSign && !roaming && (!inFrustum || !modelInVisible)) {
+        if (!this.firstPerSign && !this.roaming && (!inFrustum || !modelInVisible)) {
           toUnload.push({ modelId, child });
         }
       });
@@ -2080,7 +2177,7 @@ export default {
         if (child && child.parent) parentsToCheck.add(child.parent);
         this.unloadInstancedModel(modelId, child);
       }
-      if (scene) {
+      if (this.scene) {
         parentsToCheck.forEach(group => {
           if (group && group.children && group.children.length === 0) {
             group.removeFromParent();
@@ -2090,11 +2187,11 @@ export default {
       this.modelStateManager.isloadedModelsIds = Object.freeze(Array.from(toLoadSet));
     },
     isBoxInFrustum(box) {
-      if (!camera) return true;
+      if (!this.camera) return true;
       const frustum = new this.THREE.Frustum();
       const vpMatrix = new this.THREE.Matrix4().multiplyMatrices(
-        camera.projectionMatrix,
-        camera.matrixWorldInverse
+        this.camera.projectionMatrix,
+        this.camera.matrixWorldInverse
       );
       frustum.setFromProjectionMatrix(vpMatrix);
       return frustum.intersectsBox(box);
@@ -2192,6 +2289,7 @@ export default {
      * @param {string} [config.projectId] - 项目ID
      */
     init(config = {}) {
+      console.log('init');
       this.initStreamLoader(config.modelApi, config);
     },
 
@@ -2209,7 +2307,10 @@ export default {
         debug: isDebug,
         renderModelData: this.renderModelData.bind(this),
         ensureNotInteracting: async abortSignal => {
-          if (userInteracting || this.noObserver.batchLoadingState.interactionState.isInteracting) {
+          if (
+            this.userInteracting ||
+            this.noObserver.batchLoadingState.interactionState.isInteracting
+          ) {
             await new Promise(resolve => setTimeout(resolve, 0));
           }
         },
@@ -2318,17 +2419,17 @@ export default {
      * 同步获取当前WebGL画面的截图数据，解决preserveDrawingBuffer为false时html2canvas截黑屏的问题
      */
     getScreenshotDataURL() {
-      if (!renderer || !scene || !camera) return null;
+      if (!this.renderer || !this.scene || !this.camera) return null;
 
       // 强制渲染一帧
-      if (outlineComposer) {
-        outlineComposer.render();
+      if (this.outlineComposer) {
+        this.outlineComposer.render();
       } else {
-        renderer.render(scene, camera);
+        this.renderer.render(this.scene, this.camera);
       }
 
       // 立即同步提取像素数据
-      return renderer.domElement.toDataURL('image/png', 1.0);
+      return this.renderer.domElement.toDataURL('image/png', 1.0);
     },
     /**
      * 内部渲染流式数据方法
@@ -2406,7 +2507,7 @@ export default {
     },
     computeFrustumAABB() {
       // 确保相机矩阵最新
-      camera.updateMatrixWorld(true);
+      this.camera.updateMatrixWorld(true);
 
       // NDC 八个角
       const ndcCorners = {
@@ -2422,8 +2523,8 @@ export default {
 
       for (let key in ndcCorners) {
         const v = new this.THREE.Vector3(...ndcCorners[key]);
-        v.unproject(camera); // NDC → world
-        v.applyMatrix4(threeToBizMatrix); // world → biz
+        v.unproject(this.camera); // NDC → world
+        v.applyMatrix4(this.threeToBizMatrix); // world → biz
         ndcCorners[key] = v;
       }
 
@@ -2459,79 +2560,85 @@ export default {
       };
     },
     initRender() {
-      renderer = new this.THREE.WebGLRenderer({
+      this.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);
+      this.renderer.debug.checkShaderErrors = false;
+      this.renderer.info.autoReset = false;
+      this.renderer.setPixelRatio(window.devicePixelRatio);
+      const rect = this.instructions.getBoundingClientRect();
+      this.renderer.setSize(rect.width, rect.height);
+      this.renderer.domElement.id = 'three-model-' + this.containId;
+      this.renderer.shadowMap.enabled = true;
+      this.renderer.outputEncoding = this.THREE.sRGBEncoding;
+      this.instructions.appendChild(this.renderer.domElement);
+      this.renderer.setClearAlpha(0);
 
       // 监听体系已重构至 initCameraChangeObserver，此处仅保留必要的初始化
       // 原始的 wheel 监听逻辑已迁移
-      // renderer.domElement.addEventListener('wheel', this._wheelHandler);
+      // this.renderer.domElement.addEventListener('wheel', this._wheelHandler);
 
       // 与校审截图功能冲突，暂时先注释掉
       // -----------
-      // renderer.autoClear = false;
-      // renderer.autoClearColor = false;
-      // renderer.autoClearDepth = false;
-      // renderer.autoClearStencil = false;
+      // this.renderer.autoClear = false;
+      // this.renderer.autoClearColor = false;
+      // this.renderer.autoClearDepth = false;
+      // this.renderer.autoClearStencil = false;
       // -----------
     },
     initPostProcessing() {
-      outlineComposer = new EffectComposer(renderer, renderTarget);
+      this.outlineComposer = new EffectComposer(this.renderer, this.renderTarget);
+
+      const renderPass = new RenderPass(this.scene, this.camera);
+      this.outlineComposer.addPass(renderPass);
 
-      const renderPass = new RenderPass(scene, camera);
-      outlineComposer.addPass(renderPass);
+      const rect = this.instructions.getBoundingClientRect();
+      this.outlinePass = new OutlinePass(
+        new this.THREE.Vector2(rect.width, rect.height),
+        this.scene,
+        this.camera
+      );
 
-      const rect = instructions.getBoundingClientRect();
-      outlinePass = new OutlinePass(new this.THREE.Vector2(rect.width, rect.height), scene, camera);
-      outlinePass.edgeStrength = 3;
-      outlinePass.edgeGlow = 0.5; // 边缘模糊度
-      outlinePass.edgeThickness = 2; // 轮廓线宽度
-      outlinePass.visibleEdgeColor.set('#ffffff'); // 默认白色，后续可动态调整
-      outlinePass.hiddenEdgeColor.set('#ffffff');
-      outlineComposer.addPass(outlinePass);
+      this.outlinePass.edgeStrength = 3;
+      this.outlinePass.edgeGlow = 0.5; // 边缘模糊度
+      this.outlinePass.edgeThickness = 2; // 轮廓线宽度
+      this.outlinePass.visibleEdgeColor.set('#ffffff'); // 默认白色，后续可动态调整
+      this.outlinePass.hiddenEdgeColor.set('#ffffff');
+      this.outlineComposer.addPass(this.outlinePass);
 
       const outputPass = new OutputPass();
-      outlineComposer.addPass(outputPass);
+      this.outlineComposer.addPass(outputPass);
     },
     initScene() {
-      modelGroup = new this.THREE.Group();
-      scene = new this.THREE.Scene();
+      this.modelGroup = new this.THREE.Group();
+      this.scene = new this.THREE.Scene();
       if (isDebug) {
-        stats = new Stats();
-        document.body.appendChild(stats.dom);
+        this.stats = new Stats();
+        document.body.appendChild(this.stats.dom);
       }
     },
     initCamera() {
-      const rect = instructions.getBoundingClientRect();
-      camera = new this.THREE.PerspectiveCamera(45, rect.width / rect.height, 0.1, 1000000);
+      const rect = this.instructions.getBoundingClientRect();
+      this.camera = new this.THREE.PerspectiveCamera(45, rect.width / rect.height, 0.1, 1000000);
       // camera.position.set(0, 100, 150);
+      // this.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;
+      this.cameraControls = new CameraControls(this.camera, this.renderer.domElement);
+      this.cameraControls.dollyToCursor = true;
+      this.cameraControls.smoothTime = 0.1;
+      this.cameraControls.draggingSmoothTime = 0.05;
+      this.cameraControls.truckSpeed = 2.0;
+      this.cameraControls.infinityDolly = true;
+      this.cameraControls.minDistance = 10;
       // 若已存在场景包围盒，初始化时设置最大dolly距离为其对角线长度
 
-      cameraControls.dollySpeed = 0.15; // 鼠标滚轮每次移动速度倍率
+      this.cameraControls.dollySpeed = 0.15; // 鼠标滚轮每次移动速度倍率
     },
 
     setCameraObserverEnabled(enabled) {
@@ -2545,7 +2652,7 @@ export default {
     initCameraChangeObserver() {
       // 初始化 control 状态标志
       this.noObserver.isControlActive = false;
-
+      let _this = this;
       // 1. 创建统一的响应触发器 (Debounced)
       this._cameraChangeObserver = this.debounce(
         async source => {
@@ -2615,17 +2722,17 @@ export default {
         const isZoomIn = deltaY < 0; // 靠近
 
         // if (isZoomOut) {
-        //   cameraControls.infinityDolly = false; // 向外遵守 maxDistance
+        //   this.cameraControls.infinityDolly = false; // 向外遵守 maxDistance
         // } else if (isZoomIn) {
-        //   cameraControls.infinityDolly = true;  // 向前允许推进（超越 minDistance）
+        //   this.cameraControls.infinityDolly = true;  // 向前允许推进（超越 minDistance）
         // }
 
         // dolly最大距离限制
         try {
-          if (sceneBoundingBox && isFinite(maxDollyDistance)) {
+          if (this.sceneBoundingBox && isFinite(maxDollyDistance)) {
             if (isZoomOut) {
-              camera.updateMatrixWorld(true);
-              const currentDistance = camera.position.distanceTo(cameraControls._target);
+              this.camera.updateMatrixWorld(true);
+              const currentDistance = this.camera.position.distanceTo(this.cameraControls._target);
               if (currentDistance >= maxDollyDistance) {
                 event.preventDefault && event.preventDefault();
                 event.stopImmediatePropagation && event.stopImmediatePropagation();
@@ -2640,53 +2747,53 @@ export default {
         // 触发观察者
         this._cameraChangeObserver('wheel');
       };
-      renderer.domElement.addEventListener('wheel', this._wheelHandler);
+      this.renderer.domElement.addEventListener('wheel', this._wheelHandler);
 
       // 4. 监听器 - Controls (用户拖拽/操作)
       this._onControlStart = res => {
         this.noObserver.isControlActive = true;
 
         // 统一交互开始处理（相机）
-        this.beginInteraction('camera');
+        this.beginInteraction('this.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.mouseDownPosition.x = event.clientX || 0;
+          _this.mouseDownPosition.y = event.clientY || 0;
+          _this.isDragging = false;
         }
       };
 
       this._onControlEnd = res => {
-        this.noObserver.isControlActive = false;
+        _this.noObserver.isControlActive = false;
 
         this.$emit('controlEnd', res);
 
         // 统一交互结束处理（相机）
-        this.endInteraction('camera', res, { immediateResume: false });
+        this.endInteraction('this.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);
+          _this.mouseUpPosition.x = event.clientX || 0;
+          _this.mouseUpPosition.y = event.clientY || 0;
+          const deltaX = Math.abs(_this.mouseUpPosition.x - _this.mouseDownPosition.x);
+          const deltaY = Math.abs(_this.mouseUpPosition.y - _this.mouseDownPosition.y);
           const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-          isDragging = distance > dragThreshold;
+          _this.isDragging = distance > dragThreshold;
         }
 
         // 只有在实际发生拖拽时才执行相关操作
-        if (isDragging) {
+        if (_this.isDragging) {
           // 居中逻辑
-          // if (needsCenteringAfterInteraction && !hasExecutedCentering) {
+          // if (this.needsCenteringAfterInteraction && !this.hasExecutedCentering) {
           //   setTimeout(() => {
-          //     if (modelGroups.length > 0) {
-          //       this.setModelCenter(modelGroups[modelGroups.length - 1]);
-          //       hasExecutedCentering = true;
-          //       needsCenteringAfterInteraction = false;
+          //     if (this.modelGroups.length > 0) {
+          //       this.setModelCenter(this.modelGroups[this.modelGroups.length - 1]);
+          //       this.hasExecutedCentering = true;
+          //       this.needsCenteringAfterInteraction = false;
           //     }
           //   }, 300);
           // }
@@ -2696,32 +2803,32 @@ export default {
         }
       };
 
-      cameraControls.addEventListener('controlstart', this._onControlStart);
-      cameraControls.addEventListener('controlend', this._onControlEnd);
+      this.cameraControls.addEventListener('controlstart', this._onControlStart);
+      this.cameraControls.addEventListener('controlend', this._onControlEnd);
 
       // 5. 监听器 - Programmatic (程序化动画/过渡结束)
-      // 监听 rest 事件，捕获 cameraControls.setLookAt(..., true) 等动画结束（以及阻尼停止）
+      // 监听 rest 事件，捕获 this.cameraControls.setLookAt(..., true) 等动画结束（以及阻尼停止）
       // 注意：rest 事件在用户交互完全静止时也会触发，与 controlEnd 有部分重叠，但 Observer 有防抖，影响不大
       this._onRest = () => {
         this._cameraChangeObserver('rest');
       };
-      cameraControls.addEventListener('rest', this._onRest);
+      this.cameraControls.addEventListener('rest', this._onRest);
     },
     // 初始化光源
     initLight() {
-      const pmremGenerator = new this.THREE.PMREMGenerator(renderer);
-      scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+      const pmremGenerator = new this.THREE.PMREMGenerator(this.renderer);
+      this.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';
+      this.labelRenderer = new CSS2DRenderer();
+      const rect = this.instructions.getBoundingClientRect();
+      this.labelRenderer.setSize(rect.width, rect.height);
+      this.labelRenderer.domElement.style.position = 'absolute';
 
-      labelRenderer.domElement.style.top = '0';
-      labelRenderer.domElement.style.pointerEvents = 'none';
-      instructions.appendChild(labelRenderer.domElement);
+      this.labelRenderer.domElement.style.top = '0';
+      this.labelRenderer.domElement.style.pointerEvents = 'none';
+      this.instructions.appendChild(this.labelRenderer.domElement);
     },
     // 根据模型数据绘制模型实体 业务平台可调用此方法加载模型
     /*
@@ -2730,6 +2837,7 @@ export default {
           meshNameConfig: {}
       */
     drawModel(data, color = '', meshNameConfig = {}, options = {}) {
+      console.log(data);
       // data = require('./mock.json');
       // 使用新的分帧加载方法，提供进度回调
       return this.drawModelWithBatchLoading(
@@ -2739,7 +2847,7 @@ export default {
         options,
         progress => {
           // 触发原有的进度事件
-          this.$emit('loadProgress', progress);
+          this.$emit('loadProgress', this.progress);
         },
         complete => {
           options?.onComplete?.(complete);
@@ -2751,13 +2859,13 @@ export default {
     },
     // 动态设置视角滚轮的距离
     setCameraConfig() {
-      // let box3 = new this.THREE.Box3().setFromObject(sceneBoundingBox);
+      // let box3 = new this.THREE.Box3().setFromObject(this.sceneBoundingBox);
       let size = new this.THREE.Vector3();
-      sceneBoundingBox.getSize(size);
+      this.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();
+      // this.cameraControls.this.camera.far = maxBorder * 10; // 设置相机的远裁剪面
+      this.cameraControls.minDistance = maxBorder * 0.2; // 动态设置视角滚轮的距离
+      this.camera.updateProjectionMatrix();
     },
     // 获取mesh的中心点
     getMeshCenterAndVolume(mesh) {
@@ -2773,14 +2881,14 @@ export default {
     },
     mouseDown(event) {
       // 在鼠标按下时启用渲染中断以提升响应性
-      forceSkipRendering = true;
-      skipNextRenderFrame = true;
+      this.forceSkipRendering = true;
+      this.skipNextRenderFrame = true;
 
       const intersects = this.getRaycasterObjects(event);
-      firstTime = new Date().getTime();
+      this.firstTime = new Date().getTime();
       let params = {
         event,
-        firstTime,
+        firstTime: this.firstTime,
       };
       intersects.length &&
         (params.v3Position = {
@@ -2792,18 +2900,20 @@ export default {
     },
     getRaycasterObjects(event) {
       // 保护空值，避免在未初始化或销毁后触发错误
-      if (!renderer || !renderer.domElement || !camera || !scene) return [];
+      if (!this.renderer || !this.renderer.domElement || !this.camera || !this.scene) return [];
       // 获取元素在页面中的偏移位置
-      const rect = renderer.domElement.getBoundingClientRect();
+      const rect = this.renderer.domElement.getBoundingClientRect();
       const x = event.clientX - rect.left;
       const y = event.clientY - rect.top;
 
-      // mouse.x = (event.clientX / instructions.offsetWidth) * 2 - 1;
-      // mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1;
-      mouse.x = (x / rect.width) * 2 - 1;
-      mouse.y = -(y / rect.height) * 2 + 1;
-      raycaster.setFromCamera(mouse, camera);
-      return scene && scene.children ? raycaster.intersectObjects(scene.children, true) : [];
+      // this.mouse.x = (event.clientX / this.instructions.offsetWidth) * 2 - 1;
+      // this.mouse.y = -(event.clientY / this.instructions.offsetHeight) * 2 + 1;
+      this.mouse.x = (x / rect.width) * 2 - 1;
+      this.mouse.y = -(y / rect.height) * 2 + 1;
+      this.raycaster.setFromCamera(this.mouse, this.camera);
+      return this.scene && this.scene.children
+        ? this.raycaster.intersectObjects(this.scene.children, true)
+        : [];
     },
     getInstanceId(instancedMesh, instanceIndex, options) {
       if (!instancedMesh || instanceIndex === undefined || instanceIndex === null) {
@@ -2819,28 +2929,28 @@ export default {
     mouseClick(event) {
       // 鼠标抬起时重置渲染中断标记
       setTimeout(() => {
-        forceSkipRendering = false;
+        this.forceSkipRendering = false;
         // interactionFrameCount = 0;
         // 恢复批次加载操作
         this.resumeBatchLoading();
       }, 50); // 短暂延迟确保交互完成
 
       // 在测量模式下，不进行事件暴露
-      if (!measureFlag) {
-        lastTime = new Date().getTime();
-        if (lastTime - firstTime < 300) {
+      if (!this.measureFlag) {
+        this.lastTime = new Date().getTime();
+        if (this.lastTime - this.firstTime < 300) {
           const intersects = this.getRaycasterObjects(event);
           let params = {};
           let cameraData = {
             position: {
-              x: cameraControls.camera.position.x,
-              y: cameraControls.camera.position.y,
-              z: cameraControls.camera.position.z,
+              x: this.cameraControls.camera.position.x,
+              y: this.cameraControls.camera.position.y,
+              z: this.cameraControls.camera.position.z,
             },
             lookAt: {
-              heading: cameraControls._target.x,
-              pitch: cameraControls._target.y,
-              roll: cameraControls._target.z,
+              heading: this.cameraControls._target.x,
+              pitch: this.cameraControls._target.y,
+              roll: this.cameraControls._target.z,
             },
           };
           if (intersects.length > 0) {
@@ -2874,11 +2984,11 @@ export default {
           if (event.button === 0) {
             this.$emit('leftClick', params);
           } else if (event.button === 1) {
-            if (lastTime - lastMiddleClickTime < 2000) {
+            if (this.lastTime - this.lastMiddleClickTime < 2000) {
               this.$emit('middleDblClick', params);
-              lastMiddleClickTime = 0;
+              this.lastMiddleClickTime = 0;
             } else {
-              lastMiddleClickTime = lastTime;
+              this.lastMiddleClickTime = this.lastTime;
             }
           }
         }
@@ -2886,24 +2996,24 @@ export default {
     },
     // 窗口发生改变时, 更新渲染器与相机的大小
     resize(width, height) {
-      if (camera) {
-        camera.aspect = width / height;
-        camera.updateProjectionMatrix();
-        renderer.setSize(width, height, true);
-        if (renderTarget) {
-          renderTarget.setSize(width, height);
+      if (this.camera) {
+        this.camera.aspect = width / height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(width, height, true);
+        if (this.renderTarget) {
+          this.renderTarget.setSize(width, height);
         }
-        if (outlineComposer) {
-          outlineComposer.setSize(width, height);
+        if (this.outlineComposer) {
+          this.outlineComposer.setSize(width, height);
         }
-        if (outlinePass) {
-          outlinePass.setSize(width, height);
+        if (this.outlinePass) {
+          this.outlinePass.setSize(width, height);
         }
-        labelRenderer.setSize(width, height);
+        this.labelRenderer.setSize(width, height);
         // this.timeRender()
         // 这里也要更新测量
-        if (threeMeasure) {
-          threeMeasure.updateParams(width, height);
+        if (this.threeMeasure) {
+          this.threeMeasure.updateParams(width, height);
         }
       }
     },
@@ -2943,7 +3053,7 @@ export default {
         roll: center.z,
         enableTransition: options.enableTransition,
       });
-      // cameraControls.setLookAt(
+      // this.cameraControls.setLookAt(
       //   center.x,
       //   center.y + size.y,
       //   center.z + size.z / 2,
@@ -2952,37 +3062,37 @@ export default {
       //   center.z,
       //   true
       // );
-      // cameraControls.update(0);
-      // camera.updateProjectionMatrix();
-      // cameraControls.saveState();
+      // this.cameraControls.update(0);
+      // this.camera.updateProjectionMatrix();
+      // this.cameraControls.saveState();
     },
     // 带防抖和用户交互检测的智能居中方法
     smartModelCenter(mesh, debounceDelay = 100) {
-      // if (hasExecutedCentering) {
+      // if (this.hasExecutedCentering) {
       //   return;
       // }
 
       // 如果用户正在交互，标记需要在交互结束后居中
-      if (userInteracting) {
-        needsCenteringAfterInteraction = true;
+      if (this.userInteracting) {
+        this.needsCenteringAfterInteraction = true;
         return;
       }
 
       // 清除之前的防抖定时器
-      if (centeringDebounceTimer) {
-        clearTimeout(centeringDebounceTimer);
+      if (this.centeringDebounceTimer) {
+        clearTimeout(this.centeringDebounceTimer);
       }
 
       // 设置新的防抖定时器
-      centeringDebounceTimer = setTimeout(() => {
+      this.centeringDebounceTimer = setTimeout(() => {
         // 如果已经执行过居中操作，则不再执行
         if (
-          !userInteracting &&
-          !hasExecutedCentering &&
+          !this.userInteracting &&
+          !this.hasExecutedCentering &&
           this.noObserver.documentModelIds.size > 0
         ) {
           this.setModelCenter(mesh, { enableTransition: false });
-          hasExecutedCentering = true;
+          this.hasExecutedCentering = true;
           // 触发场景更新
           this.notifyCameraChange();
         }
@@ -3004,9 +3114,10 @@ export default {
      * '#ff0000'
      * '#f00'
      * 'red'
+     * hasOutline 是否需要加上高亮边。默认为true
      * }
      */
-    updateProperty(list) {
+    updateProperty(list, hasOutline = true) {
       let isUpdate = false;
       for (let index = 0; index < list.length; index++) {
         let ele = list[index];
@@ -3025,12 +3136,14 @@ export default {
                     this.removeOutlineObject(children, instanceIndex);
                     return;
                   }
-                  if (outlinePass) {
-                    if (children.isInstancedMesh) {
-                      const proxy = this.ensureOutlineInstanceProxy(children, instanceIndex);
-                      this.pushOutlineTarget(proxy);
-                    } else if (!this.isSourceHiddenInstance(children, instanceId)) {
-                      this.pushOutlineTarget(children);
+                  if (hasOutline) {
+                    if (this.outlinePass) {
+                      if (children.isInstancedMesh) {
+                        const proxy = this.ensureOutlineInstanceProxy(children, instanceIndex);
+                        this.pushOutlineTarget(proxy);
+                      } else if (!this.isSourceHiddenInstance(children, instanceId)) {
+                        this.pushOutlineTarget(children);
+                      }
                     }
                   }
                 }
@@ -3111,8 +3224,8 @@ export default {
         });
       }
 
-      if (scene) {
-        scene.traverse(child => {
+      if (this.scene) {
+        this.scene.traverse(child => {
           if (!child || !child.isInstancedMesh) return;
           const userData = child.userData || {};
           if (!(userData.instancesMap instanceof Map) || userData.instancesMap.size === 0) return;
@@ -3159,7 +3272,7 @@ export default {
             this.removeOutlineObject(children, instanceIndex);
             return;
           }
-          if (outlinePass) {
+          if (this.outlinePass) {
             if (children.isInstancedMesh) {
               const proxy = this.ensureOutlineInstanceProxy(children, instanceIndex);
               this.pushOutlineTarget(proxy);
@@ -3182,8 +3295,8 @@ export default {
     // 恢复模型原来的状态
     updateWholeProperty() {
       throw new Error('该方法已暂停使用，请使用restore方法。');
-      // if (scene) {
-      //   scene.traverse(obj => {
+      // if (this.scene) {
+      //   this.scene.traverse(obj => {
       //     if (obj instanceof this.THREE.Mesh) {
       //       // 恢复颜色
       //       obj.setColorAt(obj.userData.instanceIndex, obj.material.userData.nColor)
@@ -3253,12 +3366,12 @@ export default {
                     const { instanceIndex } = children.userData.instancesMap.get(instanceId);
                     children.setColorAt(instanceIndex, children.material.userData.nColor);
                     children.instanceColor.needsUpdate = true;
-                    if (outlinePass) {
+                    if (this.outlinePass) {
                       if (children.isInstancedMesh) {
                         this.removeOutlineInstanceProxy(children, instanceIndex);
                       } else {
-                        const idx = outlinePass.selectedObjects.indexOf(children);
-                        if (idx !== -1) outlinePass.selectedObjects.splice(idx, 1);
+                        const idx = this.outlinePass.selectedObjects.indexOf(children);
+                        if (idx !== -1) this.outlinePass.selectedObjects.splice(idx, 1);
                       }
                     }
                   }
@@ -3301,7 +3414,7 @@ export default {
     // 定位到模型
     // name 模型名称 可以是数组
     locateModel(name) {
-      if (!scene) return;
+      if (!this.scene) return;
       if (Array.isArray(name)) {
         const box3 = new this.THREE.Box3();
         name.forEach(n => {
@@ -3319,7 +3432,7 @@ export default {
       }
       let obj = this.getObjectByName(name)[0];
       if (obj) {
-        // cameraControls.fitToSphere(obj.parent, true); // TODO 待处理，先用 setModelCenter 进行定位
+        // this.cameraControls.fitToSphere(obj.parent, true); // TODO 待处理，先用 setModelCenter 进行定位
         if (obj.isGroup) {
           this.setModelCenter(obj);
         } else if (obj.isMesh) {
@@ -3343,8 +3456,8 @@ export default {
         }
       */
     updatePropertyByCustom(params) {
-      if (!scene) return;
-      scene.traverse(child => {
+      if (!this.scene) return;
+      this.scene.traverse(child => {
         if (child.isMesh && child.userData[params.customName] === params.customValue) {
           for (const key in params.attr) {
             switch (key) {
@@ -3376,7 +3489,7 @@ export default {
       */
     cameraLocation(params) {
       const { enableTransition = true } = params;
-      cameraControls.setLookAt(
+      this.cameraControls.setLookAt(
         params.x,
         params.y,
         params.z,
@@ -3385,7 +3498,7 @@ export default {
         params.roll,
         enableTransition
       );
-      cameraControls.update(0);
+      this.cameraControls.update(0);
     },
     // 使用中心点和实体的长宽高进行定位
     /*
@@ -3400,7 +3513,7 @@ export default {
 
       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 fov = this.camera.fov * (Math.PI / 180);
       // let baseDistance = viewAll
       //   ? Math.abs((minDim * 1.0) / Math.sin(fov / 2))
       //   : Math.abs((maxDim * 1.0) / Math.sin(fov / 2));
@@ -3412,7 +3525,7 @@ export default {
       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(
+      this.cameraControls.setLookAt(
         cameraCenter.x,
         cameraCenter.y,
         cameraCenter.z,
@@ -3432,11 +3545,11 @@ export default {
         }
       */
     billboard(data) {
-      if (!scene) return null;
+      if (!this.scene) return null;
       const divLabel = new CSS2DObject(data.billboard);
       divLabel.name = data.labelClass; // 这个是用来清除广告牌用的
       divLabel.position.set(data.x, data.y, data.z);
-      scene.add(divLabel);
+      this.scene.add(divLabel);
       return divLabel;
     },
     // 通过名字获取实体对象, 返回数组
@@ -3445,10 +3558,10 @@ export default {
         passType: 要过滤的类型，默认是group，不返回group类型的实体
       */
     getObjectByName(name, passType = 'group') {
-      if (!scene) return [];
+      if (!this.scene) return [];
       let object = [];
       const instancedMeshProps = instanceToInstancedMeshMap.get(name);
-      scene.traverse(item => {
+      this.scene.traverse(item => {
         const tempName = instancedMeshProps ? instancedMeshProps.drawObjectId : name;
         if (item.name == tempName && item.type.toLowerCase() != passType.toLowerCase()) {
           object.push(item);
@@ -3458,8 +3571,8 @@ export default {
     },
     // 通过id获取实体对象, 返回查找到的对象
     getObjectById(id) {
-      if (!scene) return null;
-      return scene.getObjectById(id);
+      if (!this.scene) return null;
+      return this.scene.getObjectById(id);
     },
     getColorConfig() {
       const modelState = this.noObserver
@@ -3511,7 +3624,7 @@ export default {
     },
     // 通过id删除对象
     removeObjectById(id) {
-      if (!scene) return;
+      if (!this.scene) return;
       let array = this.getObjectByName(id);
       array.forEach(item => {
         if (item.name === id) {
@@ -3520,13 +3633,13 @@ export default {
           if (item.isMesh) {
             item.clear();
           }
-          scene.remove(item);
+          this.scene.remove(item);
         }
       });
     },
     // 通过名称删除对象
     removeObjectByName(name) {
-      if (!scene) return;
+      if (!this.scene) return;
       let array = this.getObjectByName(name);
       array.forEach(item => {
         item.material && item.material.dispose();
@@ -3534,13 +3647,13 @@ export default {
         if (item.isMesh) {
           item.clear();
         }
-        if (scene) scene.remove(item);
+        if (this.scene) this.scene.remove(item);
       });
     },
     // 删除场景中所有的实体
     removeAll() {
       return new Promise(resolve => {
-        if (scene) {
+        if (this.scene) {
           this.removeTraverse();
           this.removeModelByDocumentId();
           resolve();
@@ -3550,10 +3663,10 @@ export default {
       });
     },
     removeTraverse() {
-      if (!modelGroup) return;
-      let length = modelGroup.children.length;
+      if (!this.modelGroup) return;
+      let length = this.modelGroup.children.length;
       if (length > 0) {
-        let list = modelGroup.children[0];
+        let list = this.modelGroup.children[0];
         if (!list) return;
         list.traverse(item => {
           if (item.isMesh) {
@@ -3562,32 +3675,32 @@ export default {
             item.clear();
             item.material = null;
             item.geometry = null;
-            modelGroup && modelGroup.remove(item);
+            this.modelGroup && this.modelGroup.remove(item);
             item = null;
           }
         });
-        modelGroup && modelGroup.remove(list);
+        this.modelGroup && this.modelGroup.remove(list);
         this.removeTraverse();
       } else {
         // 在这里清除一些标记之类的
-        modelGroup.clear();
-        scene.remove(modelGroup);
-        renderer.clear();
-        modelGroup = null;
-        modelGroup = new this.THREE.Group();
+        this.modelGroup.clear();
+        this.scene.remove(this.modelGroup);
+        this.renderer.clear();
+        this.modelGroup = null;
+        this.modelGroup = new this.THREE.Group();
       }
     },
     // 销毁场景 释放内存
     destroyScene() {
-      cancelAnimationFrame(animateId);
+      cancelAnimationFrame(this.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 (this.outlinePass) {
+            const idx = this.outlinePass.selectedObjects.indexOf(proxy);
+            if (idx !== -1) this.outlinePass.selectedObjects.splice(idx, 1);
           }
-          if (scene) scene.remove(proxy);
+          if (this.scene) this.scene.remove(proxy);
           if (proxy && proxy.material && proxy.material.dispose) proxy.material.dispose();
         });
         this.noObserver.outlineInstanceProxyMap.clear();
@@ -3597,9 +3710,9 @@ export default {
         ? this.noObserver.batchLoadingState
         : this.batchLoadingState;
       // 清理防抖定时器和重置状态
-      if (centeringDebounceTimer) {
-        clearTimeout(centeringDebounceTimer);
-        centeringDebounceTimer = null;
+      if (this.centeringDebounceTimer) {
+        clearTimeout(this.centeringDebounceTimer);
+        this.centeringDebounceTimer = null;
       }
 
       // 清理渲染暂停/恢复相关的定时器
@@ -3617,9 +3730,9 @@ export default {
       // 停止批量加载
       this.stopBatchLoading();
 
-      hasExecutedCentering = false;
-      needsCenteringAfterInteraction = false;
-      userInteracting = false;
+      this.hasExecutedCentering = false;
+      this.needsCenteringAfterInteraction = false;
+      this.userInteracting = false;
 
       // 关闭视椎体裁切并清理防抖定时器
       this.modelStateManager.frustumCheckEnabled = false;
@@ -3629,36 +3742,36 @@ export default {
       }
       this.clearBypassCullingModelIds();
 
-      if (scene) {
+      if (this.scene) {
         this.removeTraverse();
-        scene.clear();
-        scene = null;
+        this.scene.clear();
+        this.scene = null;
       }
 
       // 移除滚轮事件监听器
-      if (renderer && renderer.domElement && this._wheelHandler) {
-        renderer.domElement.removeEventListener('wheel', this._wheelHandler);
+      if (this.renderer && this.renderer.domElement && this._wheelHandler) {
+        this.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);
+      if (this.renderer && this.renderer.domElement) {
+        this.renderer.domElement.removeEventListener('mouseup', this.mouseClick, false);
+        this.renderer.domElement.removeEventListener('mousedown', this.mouseDown, false);
+        this.renderer.domElement.removeEventListener('pointerup', this.mouseClick, false);
+        this.renderer.domElement.removeEventListener('pointerdown', this.mouseDown, false);
       }
 
       // 取消 pointer lock 并移除相关键盘事件
-      if (pointControls) {
+      if (this.pointControls) {
         if (this._onFirstPersonChange) {
           try {
-            pointControls.removeEventListener('change', this._onFirstPersonChange);
+            this.pointControls.removeEventListener('change', this._onFirstPersonChange);
           } catch (e) {}
           this._onFirstPersonChange = null;
         }
         try {
-          pointControls.unlock && pointControls.unlock();
+          this.pointControls.unlock && this.pointControls.unlock();
         } catch (e) {}
       }
       if (this.noObserver) {
@@ -3669,38 +3782,38 @@ export default {
       document.removeEventListener('keydown', this.handleMeasureKeyDown, false);
 
       // 关闭测量工具
-      if (threeMeasure) {
+      if (this.threeMeasure) {
         try {
-          threeMeasure.close && threeMeasure.close();
+          this.threeMeasure.close && this.threeMeasure.close();
         } catch (e) {}
-        threeMeasure = null;
+        this.threeMeasure = null;
       }
 
-      // 移除 cameraControls 事件监听
-      if (cameraControls) {
+      // 移除 this.cameraControls 事件监听
+      if (this.cameraControls) {
         if (this._onControlStart)
-          cameraControls.removeEventListener('controlstart', this._onControlStart);
+          this.cameraControls.removeEventListener('controlstart', this._onControlStart);
         if (this._onControlEnd)
-          cameraControls.removeEventListener('controlend', this._onControlEnd);
+          this.cameraControls.removeEventListener('controlend', this._onControlEnd);
         this._onControlStart = null;
         this._onControlEnd = null;
       }
 
       // 清理 Label 渲染器 DOM
-      if (labelRenderer && labelRenderer.domElement && instructions) {
+      if (this.labelRenderer && this.labelRenderer.domElement && this.instructions) {
         try {
-          instructions.removeChild(labelRenderer.domElement);
+          this.instructions.removeChild(this.labelRenderer.domElement);
         } catch (e) {}
       }
-      labelRenderer = null;
+      this.labelRenderer = null;
 
-      renderer.forceContextLoss();
-      renderer.dispose();
-      camera = null;
-      cameraControls = null;
-      pointControls = null;
-      renderer.domElement = null;
-      renderer = null;
+      this.renderer.forceContextLoss();
+      this.renderer.dispose();
+      this.camera = null;
+      this.cameraControls = null;
+      this.pointControls = null;
+      this.renderer.domElement = null;
+      this.renderer = null;
     },
     // 绘制曲线
     /*
@@ -3718,8 +3831,10 @@ export default {
         route.push(new this.THREE.Vector3(element.x, element.y, element.z));
       });
       if (route.length > 1) {
-        curve = new this.THREE.CatmullRomCurve3(route);
-        const geometryLine = new this.THREE.BufferGeometry().setFromPoints(curve.getPoints(5000));
+        this.curve = new this.THREE.CatmullRomCurve3(route);
+        const geometryLine = new this.THREE.BufferGeometry().setFromPoints(
+          this.curve.getPoints(5000)
+        );
         const materialLine = new this.THREE.LineBasicMaterial({
           color: params.color,
           depthTest: false,
@@ -3727,7 +3842,7 @@ export default {
         });
         let line = new this.THREE.Line(geometryLine, materialLine);
         line.name = params.name;
-        if (scene) scene.add(line);
+        if (this.scene) this.scene.add(line);
       }
     },
     // 绘制贴图曲线
@@ -3747,24 +3862,24 @@ export default {
       // 画曲线
       if (route.length > 1) {
         // 曲线 作为路径
-        curve = new this.THREE.CatmullRomCurve3(route, false, 'catmullrom', 0);
-        const geometry = new this.THREE.TubeGeometry(curve, 5000, 0.5, 4);
+        this.curve = new this.THREE.CatmullRomCurve3(route, false, 'catmullrom', 0);
+        const geometry = new this.THREE.TubeGeometry(this.curve, 5000, 0.5, 4);
         //加载纹理
-        lineTexture = new this.THREE.TextureLoader().load('/static/arrow/arrow-right.png');
-        lineTexture.wrapS = this.THREE.RepeatWrapping;
-        lineTexture.wrapT = this.THREE.RepeatWrapping;
-        lineTexture.repeat.set(20, 1); //水平重复20次
-        lineTexture.needsUpdate = true;
-        lineTexture.offset.y = 0.5;
+        this.lineTexture = new this.THREE.TextureLoader().load('/static/arrow/arrow-right.png');
+        this.lineTexture.wrapS = this.THREE.RepeatWrapping;
+        this.lineTexture.wrapT = this.THREE.RepeatWrapping;
+        this.lineTexture.repeat.set(20, 1); //水平重复20次
+        this.lineTexture.needsUpdate = true;
+        this.lineTexture.offset.y = 0.5;
         const material = new this.THREE.MeshBasicMaterial({
-          map: lineTexture,
+          map: this.lineTexture,
           side: this.THREE.BackSide, //显示背面
           transparent: true,
         });
         let line = new this.THREE.Line(geometry, material);
         line.name = params.name;
-        if (scene) scene.add(line);
-        clock = new this.THREE.Clock();
+        if (this.scene) this.scene.add(line);
+        this.clock = new this.THREE.Clock();
       }
     },
     //
@@ -3777,8 +3892,8 @@ export default {
         name: '', 路径的名称，用来清除用的
       */
     startRoam(params) {
-      progress = 0;
-      roamConfig = {
+      this.progress = 0;
+      this.roamConfig = {
         loop: params.loop,
         speed: params.speed,
       };
@@ -3786,7 +3901,7 @@ export default {
         name: params.name,
         path: params.path,
       });
-      roaming = true;
+      this.roaming = true;
     },
     // 更新漫游的配置
     /*
@@ -3794,52 +3909,52 @@ export default {
       */
     updateRoamConfig(params) {
       for (let key in params) {
-        roamConfig[key] = params[key];
+        this.roamConfig[key] = params[key];
       }
     },
     // 结束/退出漫游
     endRoam() {
-      roaming = false;
-      progress = 0;
-      this.removeObjectByName(roamConfig.name);
-      roamConfig = {
+      this.roaming = false;
+      this.progress = 0;
+      this.removeObjectByName(this.roamConfig.name);
+      this.roamConfig = {
         loop: false,
         speed: 0,
         name: '',
       };
-      roaming = false;
-      lineTexture = null;
+      this.roaming = false;
+      this.lineTexture = null;
     },
     // 相机跟随轨道
     cameraTrack() {
-      if (roaming) {
+      if (this.roaming) {
         // renderEnabled = true
-        lineTexture.offset.x -= 0.05;
+        this.lineTexture.offset.x -= 0.05;
         // 相机和控制器的偏移
-        let offset = 10 / curve.getLength();
-        // progress 取值范围为0~1。getPoint(0)表示曲线起点，getPoint(1)表示曲线终点
-        if (progress <= 1 - offset) {
+        let offset = 10 / this.curve.getLength();
+        // this.progress 取值范围为0~1。getPoint(0)表示曲线起点，getPoint(1)表示曲线终点
+        if (this.progress <= 1 - offset) {
           // this.timeRender()
-          const point = curve.getPointAt(progress);
-          const pointBox = curve.getPointAt(progress + offset);
-          camera.position.set(point.x, point.y + 5, point.z);
-          camera.lookAt(pointBox.x, pointBox.y + 5, pointBox.z);
-          cameraControls.setPosition(point.x, point.y + 5, point.z, false);
-          cameraControls.setTarget(pointBox.x, pointBox.y + 5, pointBox.z, false);
-          progress += roamConfig.speed / 300;
+          const point = this.curve.getPointAt(this.progress);
+          const pointBox = this.curve.getPointAt(this.progress + offset);
+          this.camera.position.set(point.x, point.y + 5, point.z);
+          this.camera.lookAt(pointBox.x, pointBox.y + 5, pointBox.z);
+          this.cameraControls.setPosition(point.x, point.y + 5, point.z, false);
+          this.cameraControls.setTarget(pointBox.x, pointBox.y + 5, pointBox.z, false);
+          this.progress += this.roamConfig.speed / 300;
 
           if (typeof this._cameraChangeObserver === 'function') {
             this._cameraChangeObserver('roam');
           }
         } else {
           // 循环漫游
-          if (roamConfig.loop) {
-            progress = 0;
+          if (this.roamConfig.loop) {
+            this.progress = 0;
           }
         }
       } else {
-        lineTexture = null;
-        progress = 0;
+        this.lineTexture = null;
+        this.progress = 0;
       }
     },
     // 全局整体炸开
@@ -3847,10 +3962,10 @@ export default {
      * 参数val: 爆炸的值
      */
     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 (this.scene.children.length === 0) return;
+      for (let i = 0; i < this.scene.children.length; i++) {
+        console.log('this.scene', this.scene);
+        this.scene.children[i].traverse(item => {
           if (!item.isMesh || !item.worldDir) return;
           // 爆炸公式
           this.computedBomb(item, val);
@@ -3882,7 +3997,7 @@ export default {
     },
     getClippingPlanes() {
       let clippingPlanesConstant = [];
-      renderer.clippingPlanes.forEach(item => {
+      this.renderer.clippingPlanes.forEach(item => {
         clippingPlanesConstant.push(item.constant);
       });
       return clippingPlanesConstant;
@@ -3893,7 +4008,7 @@ export default {
         剖切值变换时, 使用
       */
     setGlobalClipping(flag = true) {
-      const box3 = new this.THREE.Box3().setFromObject(scene.children[0]);
+      const box3 = new this.THREE.Box3().setFromObject(this.scene.children[0]);
       let max = box3.max;
       let min = box3.min;
       const clippingPlanes = [
@@ -3923,10 +4038,10 @@ export default {
         ),
       ];
 
-      renderer.clippingPlanes = clippingPlanes;
+      this.renderer.clippingPlanes = clippingPlanes;
       if (flag) {
         // 全局剖切的初始值
-        guiParams = {
+        this.guiParams = {
           x轴: Math.ceil(clippingPlanes[0].constant),
           y轴: Math.ceil(clippingPlanes[2].constant),
           z轴: Math.ceil(clippingPlanes[1].constant),
@@ -3968,13 +4083,13 @@ export default {
         z: 2,
       };
       for (const key in params) {
-        renderer.clippingPlanes[axis[key]].constant = params[key];
+        this.renderer.clippingPlanes[axis[key]].constant = params[key];
       }
       // this.timeRender()
     },
     // 取消全局剖切
     cancelGlobalClipping() {
-      guiParams = {
+      this.guiParams = {
         x轴: 0,
         y轴: 0,
         z轴: 0,
@@ -3983,14 +4098,14 @@ export default {
         '-z轴': 0,
       };
       this.clippingPlanesConstants = null;
-      renderer.clippingPlanes = Object.freeze([]);
-      gui && gui.destroy();
+      this.renderer.clippingPlanes = Object.freeze([]);
+      this.gui && this.gui.destroy();
     },
     // 单个实体的剖切/ 局部剖切 obj 实体对象 flag 代表是否使用图形组件自带的剖切面板 默认为true
     setLocalClipping(obj, flag = true) {
-      clippingMesh.splice(0);
-      clippingMesh.push(obj);
-      renderer.localClippingEnabled = true;
+      this.clippingMesh.splice(0);
+      this.clippingMesh.push(obj);
+      this.renderer.localClippingEnabled = true;
       // mesh的boundingBox 可以获取到该对象位置的最大最小值 但是在这里我们需要把y、z轴互换
       const boundingBox = new this.THREE.Box3().copy(obj.boundingBox);
       boundingBox.applyMatrix4(obj.matrixWorld);
@@ -4006,7 +4121,7 @@ export default {
       obj.material.needsUpdate = true;
       // 将局部剖切的对象记录下来
       if (flag) {
-        guiParams = {
+        this.guiParams = {
           x轴: clippingPlanes[0].constant,
           y轴: clippingPlanes[2].constant,
           z轴: clippingPlanes[1].constant,
@@ -4041,7 +4156,7 @@ export default {
         y: 1,
         z: 2,
       };
-      let obj = clippingMesh[clippingMesh.length - 1];
+      let obj = this.clippingMesh[this.clippingMesh.length - 1];
       for (const key in params) {
         obj.material.clippingPlanes[axis[key]].constant = params[key];
         obj.material.needsUpdate = true;
@@ -4050,7 +4165,7 @@ export default {
     },
     // 取消局部/单个实体的剖切
     cancelLocalClipping() {
-      guiParams = {
+      this.guiParams = {
         x轴: 0,
         y轴: 0,
         z轴: 0,
@@ -4058,20 +4173,20 @@ export default {
         '-y轴': 0,
         '-z轴': 0,
       };
-      gui && gui.destroy();
-      clippingMesh.forEach(item => {
+      this.gui && this.gui.destroy();
+      this.clippingMesh.forEach(item => {
         item.material.clippingPlanes = Object.freeze([]);
         item.material.needsUpdate = true;
       });
-      clippingMesh.splice(0);
+      this.clippingMesh.splice(0);
     },
     // 添加剖切轴工具
     addClippingGui(title, boudingValue, objClipp1, objClipp2) {
-      gui = new GUI({
+      this.gui = new GUI({
         title: title,
       });
-      gui
-        .add(guiParams, 'x轴')
+      this.gui
+        .add(this.guiParams, 'x轴')
         .step(0.001)
         .min(boudingValue.min.x)
         .max(boudingValue.max.x)
@@ -4079,8 +4194,8 @@ export default {
           objClipp1[0].constant = d;
           objClipp2 && (objClipp2[0].constant = d);
         });
-      gui
-        .add(guiParams, '-x轴')
+      this.gui
+        .add(this.guiParams, '-x轴')
         .step(0.001)
         .min(boudingValue.min.x)
         .max(boudingValue.max.x)
@@ -4088,8 +4203,8 @@ export default {
           objClipp1[3].constant = -d;
           objClipp2 && (objClipp2[3].constant = -d);
         });
-      gui
-        .add(guiParams, 'y轴')
+      this.gui
+        .add(this.guiParams, 'y轴')
         .step(0.001)
         .min(boudingValue.min.y)
         .max(boudingValue.max.y)
@@ -4097,8 +4212,8 @@ export default {
           objClipp1[2].constant = d;
           objClipp2 && (objClipp2[2].constant = d);
         });
-      gui
-        .add(guiParams, '-y轴')
+      this.gui
+        .add(this.guiParams, '-y轴')
         .step(0.001)
         .min(boudingValue.min.y)
         .max(boudingValue.max.y)
@@ -4106,8 +4221,8 @@ export default {
           objClipp1[5].constant = -d;
           objClipp2 && (objClipp2[5].constant = -d);
         });
-      gui
-        .add(guiParams, 'z轴')
+      this.gui
+        .add(this.guiParams, 'z轴')
         .step(0.001)
         .min(boudingValue.min.z)
         .max(boudingValue.max.z)
@@ -4115,8 +4230,8 @@ export default {
           objClipp1[1].constant = d;
           objClipp2 && (objClipp2[1].constant = d);
         });
-      gui
-        .add(guiParams, '-z轴')
+      this.gui
+        .add(this.guiParams, '-z轴')
         .step(0.001)
         .min(boudingValue.min.z)
         .max(boudingValue.max.z)
@@ -4128,19 +4243,19 @@ export default {
     // 开启第一视角
     startFirstPer(options) {
       let { moveSpeed = 200, jumpSpeed = 200 } = options || {};
-      removeSpeed = moveSpeed;
-      upSpeed = jumpSpeed;
+      this.removeSpeed = moveSpeed;
+      this.upSpeed = jumpSpeed;
 
-      clock = new this.THREE.Clock();
-      downRaycaster = new this.THREE.Raycaster(
+      this.clock = new this.THREE.Clock();
+      this.downRaycaster = new this.THREE.Raycaster(
         new this.THREE.Vector3(),
         new this.THREE.Vector3(0, -1, 0),
         0,
         10
       );
-      velocity = new this.THREE.Vector3(); //移动速度变量
-      direction = new this.THREE.Vector3(); //移动的方向变量
-      firstPerSign = true;
+      this.velocity = new this.THREE.Vector3(); //移动速度变量
+      this.direction = new this.THREE.Vector3(); //移动的方向变量
+      this.firstPerSign = true;
       this.initPointerLock();
     },
     // 页面是否锁定
@@ -4148,11 +4263,11 @@ export default {
       this.home();
       setTimeout(() => {
         // 开启第一视角时，将相机与水平面保持水平
-        camera.rotation.x = 0;
-        camera.rotation.z = 0;
+        this.camera.rotation.x = 0;
+        this.camera.rotation.z = 0;
 
-        pointControls = new PointerLockControls(camera, renderer.domElement);
-        pointControls.lock();
+        this.pointControls = new PointerLockControls(this.camera, this.renderer.domElement);
+        this.pointControls.lock();
         if (!this._onFirstPersonChange) {
           this._onFirstPersonChange = () => {
             if (typeof this._cameraChangeObserver === 'function') {
@@ -4161,28 +4276,28 @@ export default {
           };
         }
         try {
-          pointControls.addEventListener('change', this._onFirstPersonChange);
+          this.pointControls.addEventListener('change', this._onFirstPersonChange);
         } catch (e) {}
         // 锁定
-        pointControls.addEventListener('lock', () => {
-          cameraControls.enabled = false;
+        this.pointControls.addEventListener('lock', () => {
+          this.cameraControls.enabled = false;
           window.addEventListener('keydown', this.onKeyDown, false);
           window.addEventListener('keyup', this.onKeyUp, false);
-          renderer.domElement.removeEventListener('mouseup', this.mouseClick, false);
-          renderer.domElement.removeEventListener('mousedown', this.mouseDown, false);
+          this.renderer.domElement.removeEventListener('mouseup', this.mouseClick, false);
+          this.renderer.domElement.removeEventListener('mousedown', this.mouseDown, false);
           if (typeof this._cameraChangeObserver === 'function') {
             this._cameraChangeObserver('firstPersonLock');
           }
         });
         // 解锁
-        pointControls.addEventListener('unlock', () => {
-          firstPerSign = false;
-          cameraControls.enabled = true;
+        this.pointControls.addEventListener('unlock', () => {
+          this.firstPerSign = false;
+          this.cameraControls.enabled = true;
           // 返回初始视角
           this.home();
           try {
-            if (this._onFirstPersonChange && pointControls) {
-              pointControls.removeEventListener('change', this._onFirstPersonChange);
+            if (this._onFirstPersonChange && this.pointControls) {
+              this.pointControls.removeEventListener('change', this._onFirstPersonChange);
             }
           } catch (e) {}
           if (this.noObserver) {
@@ -4191,57 +4306,61 @@ export default {
           setTimeout(() => {
             window.removeEventListener('keydown', this.onKeyDown);
             window.removeEventListener('keyup', this.onKeyUp);
-            renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
-            renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
+            this.renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
+            this.renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
             // this.timeRender()
           }, 0);
           if (typeof this._cameraChangeObserver === 'function') {
             this._cameraChangeObserver('firstPersonUnlock');
           }
         });
-        if (scene) scene.add(pointControls.object);
+        if (this.scene) this.scene.add(this.pointControls.object);
       }, 10);
     },
     // 第一视角运动
     firstPerspective() {
-      if (!cameraControls.enabled && firstPerSign) {
+      if (!this.cameraControls.enabled && this.firstPerSign) {
         // 获取到控制器对象
-        let control = pointControls.object;
+        let control = this.pointControls.object;
         // 获取刷新时间
-        let delta = clock.getDelta();
+        let delta = this.clock.getDelta();
         // velocity每次的速度，为了保证有过渡
-        velocity.x -= velocity.x * 10.0 * delta;
-        velocity.z -= velocity.z * 10.0 * delta;
-        velocity.y -= 9.8 * 100.0 * delta; // 默认下降的速度
+        this.velocity.x -= this.velocity.x * 10.0 * delta;
+        this.velocity.z -= this.velocity.z * 10.0 * delta;
+        this.velocity.y -= 9.8 * 100.0 * delta; // 默认下降的速度
         // 获取当前按键的方向并获取朝哪个方向移动
-        direction.z = Number(moveForward) - Number(moveBackward);
-        direction.x = Number(moveRight) - Number(moveLeft);
+        this.direction.z = Number(this.moveForward) - Number(this.moveBackward);
+        this.direction.x = Number(this.moveRight) - Number(this.moveLeft);
         // 将法向量的值归一化
-        direction.normalize();
-        if (moveForward || moveBackward) velocity.z -= direction.z * removeSpeed * delta;
-        if (moveLeft || moveRight) velocity.x -= direction.x * removeSpeed * delta;
+        this.direction.normalize();
+        if (this.moveForward || this.moveBackward)
+          this.velocity.z -= this.direction.z * this.removeSpeed * delta;
+        if (this.moveLeft || this.moveRight)
+          this.velocity.x -= this.direction.x * this.removeSpeed * delta;
         // }
         // 复制相机的位置
-        downRaycaster.ray.origin.copy(control.position);
+        this.downRaycaster.ray.origin.copy(control.position);
         // 获取相机靠下5的位置
-        downRaycaster.ray.origin.y += 5;
+        this.downRaycaster.ray.origin.y += 5;
         // 判断是否停留在了立方体上面
         let intersections =
-          scene && scene.children ? downRaycaster.intersectObjects(scene.children, true) : [];
+          this.scene && this.scene.children
+            ? this.downRaycaster.intersectObjects(this.scene.children, true)
+            : [];
         var onObject = intersections.length > 0;
         if (onObject === true) {
-          velocity.y = Math.max(0, velocity.y);
-          canJump = true;
+          this.velocity.y = Math.max(0, this.velocity.y);
+          this.canJump = true;
         }
         // 根据速度值移动控制器
-        pointControls.moveRight(-velocity.x * delta);
-        pointControls.moveForward(-velocity.z * delta);
-        control.position.y += velocity.y * delta;
+        this.pointControls.this.moveRight(-this.velocity.x * delta);
+        this.pointControls.this.moveForward(-this.velocity.z * delta);
+        control.position.y += this.velocity.y * delta;
         // 保证控制器的y轴在平面上
         if (control.position.y < 3 - 0 / 10) {
-          velocity.y = -0 / 10;
+          this.velocity.y = -0 / 10;
           control.position.y = 3 - 0 / 10;
-          canJump = true;
+          this.canJump = true;
         }
         if (this.noObserver) {
           if (!this.noObserver._firstPersonLastPos) {
@@ -4267,27 +4386,27 @@ export default {
         // 前进
         case 38:
         case 87:
-          moveForward = true;
+          this.moveForward = true;
           break;
         // 向左
         case 37:
         case 65:
-          moveLeft = true;
+          this.moveLeft = true;
           break;
         // 后退
         case 40:
         case 83:
-          moveBackward = true;
+          this.moveBackward = true;
           break;
         // 向右
         case 39:
         case 68:
-          moveRight = true;
+          this.moveRight = true;
           break;
         // 跳跃
         case 32:
-          if (canJump && spaceUp) velocity.y += upSpeed;
-          canJump = false;
+          if (this.canJump && spaceUp) this.velocity.y += this.upSpeed;
+          this.canJump = false;
           spaceUp = false;
           break;
       }
@@ -4299,22 +4418,22 @@ export default {
         // 前进
         case 38:
         case 87:
-          moveForward = false;
+          this.moveForward = false;
           break;
         // 向左
         case 37:
         case 65:
-          moveLeft = false;
+          this.moveLeft = false;
           break;
         // 后退
         case 40:
         case 83:
-          moveBackward = false;
+          this.moveBackward = false;
           break;
         // 向右
         case 39:
         case 68:
-          moveRight = false;
+          this.moveRight = false;
           break;
         // 跳跃
         case 32:
@@ -4324,14 +4443,14 @@ export default {
     },
     // 返回主视角/恢复相机初始状态
     home() {
-      hasExecutedCentering = true;
+      this.hasExecutedCentering = true;
 
-      if (roaming) {
+      if (this.roaming) {
         this.endRoam();
       }
 
-      const center = sceneBoundingBox.getCenter(new this.THREE.Vector3());
-      const size = sceneBoundingBox.getSize(new this.THREE.Vector3());
+      const center = this.sceneBoundingBox.getCenter(new this.THREE.Vector3());
+      const size = this.sceneBoundingBox.getSize(new this.THREE.Vector3());
       const maxDim = Math.max(size.x, size.y, size.z);
 
       this.cameraLocation({
@@ -4343,8 +4462,8 @@ export default {
         roll: center.z,
       });
       this.setCameraConfig();
-      // cameraControls.reset(true);
-      // cameraControls.update(0);
+      // this.cameraControls.reset(true);
+      // this.cameraControls.update(0);
       // this.timeRender()
     },
     // 测量
@@ -4352,63 +4471,63 @@ export default {
       参数: type: '', distance、area、angle、height, 暂时只提供距离、面积、角度、高度这四种方式
       */
     openMeasure(type) {
-      if (threeMeasure) {
-        threeMeasure.close();
-        threeMeasure = null;
+      if (this.threeMeasure) {
+        this.threeMeasure.close(false);
+        this.threeMeasure = null;
       }
-      measureFlag = true;
+      this.measureFlag = true;
       // renderEnabled = true
       switch (type) {
         case 'distance':
-          threeMeasure = new MeasureDistance.MeasureDistance(
-            renderer,
-            scene,
-            camera,
-            instructions.offsetWidth,
-            instructions.offsetHeight
+          this.threeMeasure = new MeasureDistance.MeasureDistance(
+            this.renderer,
+            this.scene,
+            this.camera,
+            this.instructions.offsetWidth,
+            this.instructions.offsetHeight
           );
-          threeMeasure.start();
+          this.threeMeasure.start();
           break;
         case 'area':
-          threeMeasure = new MeasureArea.MeasureArea(
-            renderer,
-            scene,
-            camera,
-            instructions.offsetWidth,
-            instructions.offsetHeight
+          this.threeMeasure = new MeasureArea.MeasureArea(
+            this.renderer,
+            this.scene,
+            this.camera,
+            this.instructions.offsetWidth,
+            this.instructions.offsetHeight
           );
-          threeMeasure.start();
+          this.threeMeasure.start();
           break;
         case 'angle':
-          threeMeasure = new MeasureAngle.MeasureAngle(
-            renderer,
-            scene,
-            camera,
-            instructions.offsetWidth,
-            instructions.offsetHeight
+          this.threeMeasure = new MeasureAngle.MeasureAngle(
+            this.renderer,
+            this.scene,
+            this.camera,
+            this.instructions.offsetWidth,
+            this.instructions.offsetHeight
           );
-          threeMeasure.start();
+          this.threeMeasure.start();
           break;
         case 'height':
-          threeMeasure = new MeasureHeight.MeasureHeight(
-            renderer,
-            scene,
-            camera,
-            instructions.offsetWidth,
-            instructions.offsetHeight
+          this.threeMeasure = new MeasureHeight.MeasureHeight(
+            this.renderer,
+            this.scene,
+            this.camera,
+            this.instructions.offsetWidth,
+            this.instructions.offsetHeight
           );
-          threeMeasure.start();
+          this.threeMeasure.start();
           break;
       }
       // 添加键盘事件监听器
       document.addEventListener('keydown', this.handleMeasureKeyDown, false);
     },
-    // 关闭测量
-    closeMeasure() {
-      measureFlag = false;
-      if (threeMeasure) {
-        threeMeasure.close();
-        threeMeasure = null;
+    // 关闭测量 isClear代表是否清除测量结果
+    closeMeasure(isClear) {
+      this.measureFlag = false;
+      if (this.threeMeasure) {
+        this.threeMeasure.close(isClear);
+        !isClear && (this.threeMeasure = null);
         // this.timeRender()
       }
       // 移除键盘事件监听器
@@ -4482,9 +4601,9 @@ export default {
         参数: object, 目标实体,
       */
     isolate(object) {
-      if (!scene) return;
+      if (!this.scene) return;
       // 隔离 将目标实体以外的实体隐藏掉
-      scene.traverse(item => {
+      this.scene.traverse(item => {
         if (item.isMesh && item.name !== object.name) {
           const offsetMatrix = new this.THREE.Matrix4()
             .copy(item.userData.copyMatrix)
@@ -4496,8 +4615,8 @@ export default {
     },
     // 还原操作 将修改过的实体进行恢复
     restore() {
-      if (!scene) return;
-      scene.traverse(item => {
+      if (!this.scene) return;
+      this.scene.traverse(item => {
         if (item.isMesh) {
           const instanceId = item.userData ? item.userData.instanceId : null;
           item.setColorAt(item.userData.instanceIndex, item.material.userData.nColor);
@@ -4542,24 +4661,24 @@ export default {
       const loader = new GLTFLoader();
       let locationModel = null;
       loader.load(url, gltf => {
-        locationModel = gltf.scene;
+        locationModel = gltf.this.scene;
         locationModel.scale.set(scale, scale, scale);
         locationModel.updateMatrixWorld();
         if (immediately) {
-          cameraControls.fitToSphere(gltf.scene, true);
+          this.cameraControls.fitToSphere(gltf.this.scene, true);
         }
         // 动画混合器
         // 不参与裁剪
         locationModel.userData.cull = false;
         locationModel.name = name;
-        if (scene) scene.add(locationModel);
+        if (this.scene) this.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);
+          let actionMixer = new this.THREE.AnimationMixer(gltf.this.scene);
           const walkActive = actionMixer.clipAction(gltf.animations[0]);
           walkActive.play();
-          modelActive.push(walkActive);
-          modelActions.push(actionMixer);
+          this.modelActive.push(walkActive);
+          this.modelActions.push(actionMixer);
         }
         callback && callback();
       });
@@ -4570,8 +4689,8 @@ export default {
       obj.forEach((item, index) => {
         if (item.animations > 0) {
           item.removeFromParent();
-          modelActions[index].uncacheRoot(item);
-          modelActions[index].uncacheRoot(modelActive[index]);
+          this.modelActions[index].uncacheRoot(item);
+          this.modelActions[index].uncacheRoot(this.modelActive[index]);
         }
         item.traverse(child => {
           if (child instanceof this.THREE.Mesh) {
@@ -4579,47 +4698,47 @@ export default {
             child.material.dispose();
           }
         });
-        if (scene) scene.remove(item);
+        if (this.scene) this.scene.remove(item);
       });
-      modelActions.splice(0);
-      modelActive.splice(0);
+      this.modelActions.splice(0);
+      this.modelActive.splice(0);
     },
     // 修改天空背景
     skyBoxScene(url) {
       const textureCube = new this.THREE.CubeTextureLoader().load(url);
-      scene.background = textureCube;
+      this.scene.background = textureCube;
     },
     // 清除天空背景
     clearSkyBoxScene() {
-      scene.background = null;
+      this.scene.background = null;
     },
     // 下雨模拟
     sceneSimu(type) {
-      if (!outlineComposer) {
-        outlineComposer = new EffectComposer(renderer, renderTarget);
-        outlineComposer.addPass(new RenderPass(scene, camera));
+      if (!this.outlineComposer) {
+        this.outlineComposer = new EffectComposer(this.renderer, this.renderTarget);
+        this.outlineComposer.addPass(new RenderPass(this.scene, this.camera));
       }
       if (type === 'rain') {
-        scenePass = new ShaderPass(RainShader);
-        scenePass.uniforms['iResolution'].value = new this.THREE.Vector2(
+        this.scenePass = new ShaderPass(RainShader);
+        this.scenePass.uniforms['iResolution'].value = new this.THREE.Vector2(
           window.innerWidth,
           window.innerHeight
         );
-        outlineComposer.addPass(scenePass);
+        this.outlineComposer.addPass(this.scenePass);
       } else if (type === 'snow') {
-        scenePass = new ShaderPass(SnowShader);
-        scenePass.uniforms['iResolution'].value = new this.THREE.Vector2(
+        this.scenePass = new ShaderPass(SnowShader);
+        this.scenePass.uniforms['iResolution'].value = new this.THREE.Vector2(
           window.innerWidth,
           window.innerHeight
         );
-        outlineComposer.addPass(scenePass);
+        this.outlineComposer.addPass(this.scenePass);
       }
     },
     clearSceneSim() {
-      if (scenePass && outlineComposer) {
-        outlineComposer.removePass(scenePass);
+      if (this.scenePass && this.outlineComposer) {
+        this.outlineComposer.removePass(this.scenePass);
       }
-      scenePass = null;
+      this.scenePass = null;
     },
     // 获取中心点
     getCenter(obj, isBox3Info) {
@@ -4633,7 +4752,7 @@ export default {
       let center = new this.THREE.Vector3();
       (box3 && box3.getCenter(center)) || obj.boundingBox.getCenter(center);
       if (isBox3Info || obj.userData.is3D) {
-        center.applyMatrix4(bizToThreeMatrix);
+        center.applyMatrix4(this.bizToThreeMatrix);
       }
       return center;
     },
@@ -4648,37 +4767,37 @@ export default {
       let size = new this.THREE.Vector3();
       (box3 && box3.getSize(size)) || obj.boundingBox.getSize(size);
       if (isBox3Info || obj.userData.is3D) {
-        size.applyMatrix4(bizToThreeMatrix);
+        size.applyMatrix4(this.bizToThreeMatrix);
       }
       return size;
     },
     animate() {
       if (isDebug) {
-        stats && stats.begin(); // 开始帧率统计
+        this.stats && this.stats.begin(); // 开始帧率统计
       }
 
-      const delta = fpsClock.getDelta();
-      timeStamp += delta;
-      animateId = requestAnimationFrame(this.animate);
+      const delta = this.fpsClock.getDelta();
+      this.timeStamp += delta;
+      this.animateId = requestAnimationFrame(this.animate);
 
       // 1. 先重置计数器（关键！）
-      renderer.info.reset(); // 重置上一帧的统计数据
+      this.renderer.info.reset(); // 重置上一帧的统计数据
 
-      if (timeStamp > singleFrameTime) {
-        if (modelActions.length > 0) {
-          modelActions.forEach(item => {
-            item.update(timeStamp);
+      if (this.timeStamp > singleFrameTime) {
+        if (this.modelActions.length > 0) {
+          this.modelActions.forEach(item => {
+            item.update(this.timeStamp);
           });
         }
-        cameraControls.enabled && cameraControls.update(timeStamp);
+        this.cameraControls.enabled && this.cameraControls.update(this.timeStamp);
         // 计算相机近裁面到包围盒当前面的距离
         this.cameraTrack();
         this.firstPerspective();
-        if (scenePass) {
-          let d = sceneClock.getDelta();
-          scenePass.uniforms['iTime'].value += d;
+        if (this.scenePass) {
+          let d = this.sceneClock.getDelta();
+          this.scenePass.uniforms['iTime'].value += d;
         }
-        labelRenderer.render(scene, camera);
+        this.labelRenderer.render(this.scene, this.camera);
         renderedThisFrame.clear();
 
         // 增强的渲染中断逻辑：在用户交互期间强制跳过渲染
@@ -4686,31 +4805,33 @@ export default {
           ? this.noObserver.batchLoadingState
           : this.batchLoadingState;
         const shouldSkipRendering =
-          skipNextRenderFrame || forceSkipRendering || loadingState.interactionState.isInteracting;
+          this.skipNextRenderFrame ||
+          this.forceSkipRendering ||
+          loadingState.interactionState.isInteracting;
 
         if (shouldSkipRendering) {
           // 重置单次跳过标记
-          if (skipNextRenderFrame) {
-            skipNextRenderFrame = false;
+          if (this.skipNextRenderFrame) {
+            this.skipNextRenderFrame = false;
           }
 
           // 统计跳过的帧数
           // interactionFrameCount++;
           // 在交互期间，每隔几帧强制渲染一次以保持基本的视觉反馈
           // if (interactionFrameCount % 2 === 0 && this.batchLoadingState.interactionState.isInteracting) {
-          renderer.clear(true, true, true);
-          renderer.render(scene, camera);
+          this.renderer.clear(true, true, true);
+          this.renderer.render(this.scene, this.camera);
           // }
           // 可选：添加调试信息（生产环境可注释掉）
           // console.log(`跳过渲染帧 #${interactionFrameCount}, 交互类型: ${this.batchLoadingState.interactionState.interactionType}`);
         } else {
           // 正常渲染
-          if (outlineComposer) {
+          if (this.outlineComposer) {
             // 使用后处理管线渲染，避免重复渲染
-            outlineComposer.render();
+            this.outlineComposer.render();
           } else {
-            renderer.clear(true, true, true);
-            renderer.render(scene, camera);
+            this.renderer.clear(true, true, true);
+            this.renderer.render(this.scene, this.camera);
           }
           // 重置交互帧计数
           // if (interactionFrameCount > 0) {
@@ -4727,15 +4848,15 @@ export default {
         //   try {
         //     const frustum = new this.THREE.Frustum();
         //     const vpMatrix = new this.THREE.Matrix4().multiplyMatrices(
-        //       camera.projectionMatrix,
-        //       camera.matrixWorldInverse
+        //       this.camera.projectionMatrix,
+        //       this.camera.matrixWorldInverse
         //     );
         //     frustum.setFromProjectionMatrix(vpMatrix);
 
-        //     // 优先使用 modelGroup 的子节点作为“模型”统计单位；否则回退到 scene.children
-        //     const children = (typeof modelGroup !== 'undefined' && modelGroup && modelGroup.children && modelGroup.children.length)
-        //       ? modelGroup.children
-        //       : scene.children;
+        //     // 优先使用 this.modelGroup 的子节点作为“模型”统计单位；否则回退到 this.scene.children
+        //     const children = (typeof this.modelGroup !== 'undefined' && this.modelGroup && this.modelGroup.children && this.modelGroup.children.length)
+        //       ? this.modelGroup.children
+        //       : this.scene.children;
 
         //     for (let i = 0; i < children.length; i++) {
         //       const obj = children[i];
@@ -4762,29 +4883,29 @@ export default {
         // 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,
+        //     drawCalls: this.renderer.info.render.calls,
+        //     triangles: this.renderer.info.render.triangles,
+        //     textures: this.renderer.info.memory.textures,
         //   });
         // }
         // }
 
-        // renderer.setRenderTarget(null)
-        timeStamp = timeStamp % singleFrameTime;
+        // this.renderer.setRenderTarget(null)
+        this.timeStamp = this.timeStamp % singleFrameTime;
       }
 
       if (isDebug) {
-        stats && stats.end(); // 结束帧率统计
+        this.stats && this.stats.end(); // 结束帧率统计
       }
     },
     // 暴露个别参数让业务自己做特殊业务。
     // 后续若多个业务有相同使用场景，再抽象至公共组件中。
     exportParmas() {
       return {
-        renderer,
-        camera,
-        cameraControls,
-        scene,
+        renderer: this.renderer,
+        camera: this.camera,
+        cameraControls: this.cameraControls,
+        scene: this.scene,
       };
     },
     isSourceVisible(instanceId, object) {
@@ -4828,14 +4949,14 @@ export default {
       return true;
     },
     removeOutlineObject(object, instanceIndex) {
-      if (!outlinePass || !object) return;
+      if (!this.outlinePass || !object) return;
       if (object.isInstancedMesh) {
         this.removeOutlineInstanceProxy(object, instanceIndex);
         return;
       }
 
-      const idx = outlinePass.selectedObjects.indexOf(object);
-      if (idx !== -1) outlinePass.selectedObjects.splice(idx, 1);
+      const idx = this.outlinePass.selectedObjects.indexOf(object);
+      if (idx !== -1) this.outlinePass.selectedObjects.splice(idx, 1);
     },
 
     /**
@@ -4853,9 +4974,9 @@ export default {
       };
       const { left, right, middle } = btn;
 
-      left && (cameraControls.mouseButtons.left = ACTION_ENUM[left]);
-      right && (cameraControls.mouseButtons.right = ACTION_ENUM[right]);
-      middle && (cameraControls.mouseButtons.middle = ACTION_ENUM[middle]);
+      left && (this.cameraControls.mouseButtons.left = ACTION_ENUM[left]);
+      right && (this.cameraControls.mouseButtons.right = ACTION_ENUM[right]);
+      middle && (this.cameraControls.mouseButtons.middle = ACTION_ENUM[middle]);
     },
 
     // 分帧加载相关方法
@@ -4899,8 +5020,8 @@ export default {
 
       // 去重处理
       // const existingDrawObjectIds = new Set();
-      // if (modelGroup && modelGroup.children && modelGroup.children.length) {
-      //   modelGroup.children.forEach(child => {
+      // if (this.modelGroup && this.modelGroup.children && this.modelGroup.children.length) {
+      //   this.modelGroup.children.forEach(child => {
       //     if (child && child.userData && child.userData.isInstancedMeshGroup && child.name) {
       //       existingDrawObjectIds.add(child.name);
       //     }
@@ -5107,11 +5228,11 @@ export default {
 
       isDebug && performance.mark('handleInstancedMeshModel-start');
       await handleInstancedMeshModel(
-        modelGroup,
+        this.modelGroup,
         batch.instances,
         batch.drawObjs,
         '',
-        scene,
+        this.scene,
         loadingState.color,
         loadingState.meshNameConfig,
         '',
@@ -5135,31 +5256,31 @@ export default {
         : this.batchLoadingState;
       if (!loadingState.isLoading) return;
 
-      // if (modelGroup) {
+      // if (this.modelGroup) {
       // if (firstDraw) {
-      //   if (scene) scene.add(modelGroup);
+      //   if (this.scene) this.scene.add(this.modelGroup);
       //   firstDraw = false;
       // }
       // if (!rotatedSceneFlag) {
       //   rotatedSceneFlag = true;
       // }
-      if (modelGroup) {
-        if (!modelGroup.userData.initDone) {
-          scene.add(modelGroup);
-          modelGroup.applyMatrix4(bizToThreeMatrix);
-          modelGroup.updateMatrixWorld();
-          this.smartModelCenter(sceneBoundingBox);
+      if (this.modelGroup) {
+        if (!this.modelGroup.userData.initDone) {
+          this.scene.add(this.modelGroup);
+          this.modelGroup.applyMatrix4(this.bizToThreeMatrix);
+          this.modelGroup.updateMatrixWorld();
+          this.smartModelCenter(this.sceneBoundingBox);
           this.setCameraConfig();
-          modelGroup.userData.initDone = true;
+          this.modelGroup.userData.initDone = true;
         }
-        modelGroup.updateMatrixWorld();
+        this.modelGroup.updateMatrixWorld();
         let modelBox3 = new this.THREE.Box3();
-        modelBox3.expandByObject(modelGroup);
+        modelBox3.expandByObject(this.modelGroup);
         let modelWorldPs = new this.THREE.Vector3()
           .addVectors(modelBox3.max, modelBox3.min)
           .multiplyScalar(0.5);
-        modelGroup.userData.modelWorldPs = modelWorldPs;
-        modelGroup.traverse(child => {
+        this.modelGroup.userData.modelWorldPs = modelWorldPs;
+        this.modelGroup.traverse(child => {
           if (child.isMesh && !child.userData.batchInitDone) {
             markRendered(child);
             const json = this.getMeshCenterAndVolume(child);
@@ -5204,7 +5325,7 @@ export default {
 
         if (isDebug) {
           var axesHelper = new this.THREE.AxesHelper(10000);
-          scene.add(axesHelper);
+          this.scene.add(axesHelper);
         }
         // this.showSceneBoundingBox();
       }
@@ -5245,8 +5366,8 @@ export default {
       }
 
       // 如果是第一次调用drawModel且用户正在交互，标记需要在交互结束后居中
-      if (modelGroups.length === 0 && userInteracting) {
-        needsCenteringAfterInteraction = true;
+      if (this.modelGroups.length === 0 && this.userInteracting) {
+        this.needsCenteringAfterInteraction = true;
       }
 
       // 启动分帧加载
@@ -5256,7 +5377,7 @@ export default {
     /**
      * 统一的中断控制中心 - 设置中断状态
      * @param {boolean} active - 是否激活中断
-     * @param {string} reason - 中断原因 ('wheel', 'camera', 'user_interaction' 等)
+     * @param {string} reason - 中断原因 ('wheel', 'this.camera', 'user_interaction' 等)
      * @param {Object} options - 配置项 { immediate: boolean }
      */
     setSystemInterruption(active, reason = 'user_interaction', options = {}) {
@@ -5269,8 +5390,8 @@ export default {
 
         // 1. 更新交互状态标记
         // 如果是相机操作，更新全局标记
-        if (reason === 'camera') {
-          userInteracting = true;
+        if (reason === 'this.camera') {
+          this.userInteracting = true;
         }
 
         // 更新 batchLoadingState 中的交互状态
@@ -5287,8 +5408,8 @@ export default {
         loadingState.pauseReason = reason;
 
         // 交互期间强制跳过渲染帧，提升响应速度
-        forceSkipRendering = true;
-        skipNextRenderFrame = true;
+        this.forceSkipRendering = true;
+        this.skipNextRenderFrame = true;
 
         // 3. 清理之前的恢复定时器（防止在交互中途意外恢复）
         if (loadingState.resumeTimer) {
@@ -5314,8 +5435,8 @@ export default {
 
         // 关键修复：立即更新交互状态，不依赖 doResume 的执行时机
         // 这样可以避免当一种交互（如 camera）结束但另一种（如 wheel）仍活跃时，状态无法正确复位的问题
-        if (reason === 'camera') {
-          userInteracting = false;
+        if (reason === 'this.camera') {
+          this.userInteracting = false;
         }
 
         // 定义恢复执行逻辑
@@ -5324,11 +5445,11 @@ export default {
           // 1. 如果有滚轮定时器未结束，说明还在连续滚动中，不恢复
           if (loadingState.interactionState.wheelTimeout) return;
 
-          // 2. 如果是 wheel 结束，但 userInteracting (camera) 还在进行，则不恢复
-          if (reason === 'wheel' && userInteracting) return;
+          // 2. 如果是 wheel 结束，但 this.userInteracting (this.camera) 还在进行，则不恢复
+          if (reason === 'wheel' && this.userInteracting) return;
 
           // 3. 检查是否有强制跳过标记 (可能由其他逻辑触发)
-          // if (forceSkipRendering && reason !== 'user_interaction') return; // 视情况而定
+          // if (this.forceSkipRendering && reason !== 'user_interaction') return; // 视情况而定
 
           // --- 执行恢复 ---
 
@@ -5338,7 +5459,7 @@ export default {
           loadingState.interactionState.isInteracting = false;
           loadingState.interactionState.interactionType = '';
 
-          forceSkipRendering = false;
+          this.forceSkipRendering = false;
 
           // 恢复本地批量加载 (如果未完成)
           if (loadingState.isLoading && loadingState.currentBatch < loadingState.totalBatches) {
@@ -5383,7 +5504,8 @@ export default {
      * 交互开始
      */
     beginInteraction(type = 'user') {
-      const reason = type === 'wheel' ? 'wheel' : type === 'camera' ? 'camera' : 'user_interaction';
+      const reason =
+        type === 'wheel' ? 'wheel' : type === 'this.camera' ? 'this.camera' : 'user_interaction';
       this.setSystemInterruption(true, reason);
     },
 
@@ -5440,10 +5562,10 @@ export default {
      * 隐藏场景包围盒
      */
     hideSceneBoundingBox() {
-      if (sceneBoundingBoxHelper && scene) {
-        scene.remove(sceneBoundingBoxHelper);
-        sceneBoundingBoxHelper = null;
-        boundingBoxVisible = false;
+      if (this.sceneBoundingBoxHelper && this.scene) {
+        this.scene.remove(this.sceneBoundingBoxHelper);
+        this.sceneBoundingBoxHelper = null;
+        this.boundingBoxVisible = false;
         console.log('场景包围盒已隐藏');
       }
     },
@@ -5452,7 +5574,7 @@ export default {
      * 切换场景包围盒显示状态
      */
     toggleSceneBoundingBox() {
-      if (boundingBoxVisible) {
+      if (this.boundingBoxVisible) {
         this.hideSceneBoundingBox();
       } else {
         this.showSceneBoundingBox();
@@ -5462,7 +5584,12 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-#fl-model {
+// #fl-model {
+//   width: 100%;
+//   height: 100%;
+//   cursor: pointer;
+// }
+.fl-model-containor {
   width: 100%;
   height: 100%;
   cursor: pointer;
@@ -5564,7 +5691,7 @@ export default {
   margin-bottom: 20px;
 }
 
-.loading-progress-bar {
+.loading-this.progress-bar {
   width: 100%;
   height: 8px;
   background-color: #f0f0f0;
@@ -5573,7 +5700,7 @@ export default {
   margin-bottom: 15px;
 }
 
-.loading-progress-fill {
+.loading-this.progress-fill {
   height: 100%;
   background: linear-gradient(90deg, #409eff 0%, #67c23a 100%);
   border-radius: 4px;
@@ -5588,7 +5715,7 @@ export default {
 </style>
 <style>
 /* 自定义lil-gui样式 - 浅色主题 */
-.lil-gui {
+.lil-this.gui {
   background: rgba(255, 255, 255, 0.95) !important;
   border: 1px solid #e0e0e0 !important;
   border-radius: 8px !important;
@@ -5597,7 +5724,7 @@ export default {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
 }
 
-.lil-gui .title {
+.lil-this.gui .title {
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
   color: #495057 !important;
   border-bottom: 1px solid #dee2e6 !important;
@@ -5606,50 +5733,50 @@ export default {
   border-radius: 8px 8px 0 0 !important;
 }
 
-.lil-gui .controller {
+.lil-this.gui .controller {
   border-bottom: 1px solid #f1f3f4 !important;
   background: transparent !important;
 }
 
-.lil-gui .controller:last-child {
+.lil-this.gui .controller:last-child {
   border-bottom: none !important;
 }
 
-.lil-gui .controller .name {
+.lil-this.gui .controller .name {
   color: #495057 !important;
   font-weight: 500 !important;
   font-size: 12px !important;
 }
 
-.lil-gui .controller .widget {
+.lil-this.gui .controller .widget {
   background: #f8f9fa !important;
   border: 1px solid #ced4da !important;
   border-radius: 4px !important;
   color: #495057 !important;
 }
 
-.lil-gui .controller .widget:hover {
+.lil-this.gui .controller .widget:hover {
   border-color: #80bdff !important;
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
 }
 
-.lil-gui .controller .widget:focus {
+.lil-this.gui .controller .widget:focus {
   border-color: #80bdff !important;
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
   outline: none !important;
 }
 
-.lil-gui .controller input[type='range'] {
+.lil-this.gui .controller input[type='range'] {
   background: #e9ecef !important;
   height: 4px !important;
   -webkit-appearance: none !important;
   appearance: none !important;
   border-radius: 2px !important;
 }
-.lil-gui .controller.number .fill {
+.lil-this.gui .controller.number .fill {
   border-right: solid #008de9;
 }
-.lil-gui .controller input[type='range']::-webkit-slider-thumb {
+.lil-this.gui .controller input[type='range']::-webkit-slider-thumb {
   background: #007bff !important;
   border: 2px solid #ffffff !important;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
@@ -5661,7 +5788,7 @@ export default {
   cursor: pointer !important;
 }
 
-.lil-gui .controller input[type='range']::-moz-range-thumb {
+.lil-this.gui .controller input[type='range']::-moz-range-thumb {
   background: #007bff !important;
   border: 2px solid #ffffff !important;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
@@ -5671,23 +5798,23 @@ export default {
   cursor: pointer !important;
 }
 
-.lil-gui .controller .option {
+.lil-this.gui .controller .option {
   background: #ffffff !important;
   color: #495057 !important;
   border-bottom: 1px solid #f1f3f4 !important;
 }
 
-.lil-gui .controller .option:hover {
+.lil-this.gui .controller .option:hover {
   background: #f8f9fa !important;
 }
 
-.lil-gui .controller .option:last-child {
+.lil-this.gui .controller .option:last-child {
   border-bottom: none !important;
 }
-.lil-gui input:active {
+.lil-this.gui input:active {
   background: #e6eff4;
 }
-.lil-gui .controller button {
+.lil-this.gui .controller button {
   background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
   color: #ffffff !important;
   border: none !important;
@@ -5696,51 +5823,51 @@ export default {
   transition: all 0.2s ease !important;
 }
 
-.lil-gui .controller button:hover {
+.lil-this.gui .controller button:hover {
   background: linear-gradient(135deg, #0056b3 0%, #004085 100%) !important;
   transform: translateY(-1px) !important;
   box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3) !important;
 }
 
-.lil-gui .controller .color {
+.lil-this.gui .controller .color {
   border: 2px solid #ffffff !important;
   border-radius: 4px !important;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
 }
-.lil-gui .controller.number .slider {
+.lil-this.gui .controller.number .slider {
   background-color: #e6eff4;
 }
-.lil-gui .controller.number .slider:hover {
+.lil-this.gui .controller.number .slider:hover {
   background-color: #e6eff4;
 }
-.lil-gui input:hover {
+.lil-this.gui input:hover {
   background: #e6eff4;
 }
-.lil-gui input[type='number']:focus,
-.lil-gui input[type='text']:focus,
-.lil-gui input {
+.lil-this.gui input[type='number']:focus,
+.lil-this.gui input[type='text']:focus,
+.lil-this.gui input {
   background: #e6eff4;
 }
-.lil-gui .controller > .name {
+.lil-this.gui .controller > .name {
   min-width: 25px;
 }
-.lil-gui .controller.number input {
+.lil-this.gui .controller.number input {
   color: #2e3136;
 }
-.lil-gui .controller.number .slider:active {
+.lil-this.gui .controller.number .slider:active {
   background-color: #e6eff4;
 }
-.lil-gui .folder > .title {
+.lil-this.gui .folder > .title {
   background: linear-gradient(135deg, #f1f3f4 0%, #e9ecef 100%) !important;
   color: #495057 !important;
   border-bottom: 1px solid #dee2e6 !important;
 }
 
-.lil-gui .folder > .title:before {
+.lil-this.gui .folder > .title:before {
   color: #6c757d !important;
 }
 
-.lil-gui .folder.closed > .children {
+.lil-this.gui .folder.closed > .children {
   display: none !important;
 }
 </style>