fl-web-component 2.0.8 → 2.0.9

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

@@ -128,6 +128,7 @@ import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
 import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
 import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import MeasureDistance from '@/utils/threejs/measure-distance.js';
@@ -155,6 +156,10 @@ import { OBB } from 'three/examples/jsm/math/OBB.js';
 import boxJson from './box.json';
 import { StreamLoader } from '../../utils/StreamLoader.js';
 import StreamLoaderParserWorker from '../../utils/StreamLoaderParser.worker.js';
+import SceneCommandService from '@/utils/threejs/editor/scene-command-service.js';
+import { EDITOR_EVENT, SCENE_NODE_TYPE, TRANSFORM_MODE } from '@/utils/threejs/editor/constants.js';
+import { isCustomRoot, isTransformAttachableObject } from '@/utils/threejs/editor/scene-helpers.js';
+import { onContextHandle } from './component/context';
 
 const isDebug = process.env.NODE_ENV !== 'production' || process.env.VUE_APP_IS_WATCH === true;
 // const isDebug = false;
@@ -168,6 +173,10 @@ export default {
         return {};
       },
     },
+    transformEditDisabled: {
+      type: Boolean,
+      default: false,
+    },
     containId: {
       type: String,
       default: 'fl-model',
@@ -200,8 +209,16 @@ export default {
         totalCount: 0,
         isPaused: false,
       },
+      isolateMode: false,
     };
   },
+  watch: {
+    transformEditDisabled(val) {
+      if (val) {
+        this.detachTransformControls();
+      }
+    },
+  },
   beforeCreate() {
     this.spaceUp = true;
     let arr = [
@@ -345,6 +362,23 @@ export default {
       occlusionWorkerRequestMap: new Map(),
       occlusionWorkerRequestId: 0,
     };
+    this.sceneCommandService = null;
+    this.sceneCommandEventDisposers = [];
+    this.transformEditor = {
+      transformControls: null,
+      transformHelper: null,
+      transformMode: TRANSFORM_MODE.TRANSLATE,
+      transforming: false,
+      transformTargetUuid: '',
+      transformStartSnapshot: null,
+      suppressSelectionOnce: false,
+      suppressSelectionTimer: null,
+      cameraControlsEnabled: true,
+      pointerCameraGuard: false,
+      pointerCameraEnabled: true,
+      keydownHandler: null,
+      handlers: {},
+    };
     this.modelGroups = [];
     this.modelActions = [];
     this.lastMiddleClickTime = 0;
@@ -369,8 +403,10 @@ export default {
     this.instructions = document.getElementById(this.containId); // 'fl-model'
     this.initRender();
     this.initScene();
+    this.initSceneCommandService();
     this.initCamera();
     this.initControl();
+    this.initTransformControls();
     this.initPostProcessing();
     // 初始化统一的相机事件监听
     this.initCameraChangeObserver();
@@ -379,14 +415,7 @@ export default {
     this.exportParmas();
 
     // 判断是设备是手机还是电脑
-    let isMobileDevice = this.isMobileDevice();
-    if (isMobileDevice) {
-      this.renderer.domElement.addEventListener('pointerup', this.mouseClick, false);
-      this.renderer.domElement.addEventListener('pointerdown', this.mouseDown, false);
-    } else {
-      this.renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
-      this.renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
-    }
+    this.bindScenePointerEvents();
     this.animate();
   },
   beforeDestroy() {
@@ -394,6 +423,764 @@ export default {
     this.destroyScene();
   },
   methods: {
+    bindScenePointerEvents() {
+      if (!this.renderer || !this.renderer.domElement) return;
+      this.renderer.domElement.addEventListener('pointerup', this.mouseClick, true);
+      this.renderer.domElement.addEventListener('pointerdown', this.mouseDown, true);
+    },
+    unbindScenePointerEvents() {
+      if (!this.renderer || !this.renderer.domElement) return;
+      this.renderer.domElement.removeEventListener('pointerup', this.mouseClick, true);
+      this.renderer.domElement.removeEventListener('pointerdown', this.mouseDown, true);
+      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);
+    },
+    setPointerCameraGuard(active) {
+      const editor = this.transformEditor;
+      if (!editor || !this.cameraControls) return;
+      if (active) {
+        if (editor.pointerCameraGuard) return;
+        editor.pointerCameraEnabled = this.cameraControls.enabled;
+        editor.pointerCameraGuard = true;
+        this.cameraControls.enabled = false;
+        return;
+      }
+      if (!editor.pointerCameraGuard) {
+        this.restoreTransformCameraControls();
+        return;
+      }
+      if (!(this.firstPerSign && this.pointControls && this.pointControls.isLocked)) {
+        this.cameraControls.enabled = editor.pointerCameraEnabled || editor.cameraControlsEnabled;
+      }
+      editor.pointerCameraGuard = false;
+    },
+    restoreTransformCameraControls() {
+      const editor = this.transformEditor;
+      if (!editor || !this.cameraControls) return;
+      const isFirstPersonLocked = !!(
+        this.firstPerSign &&
+        this.pointControls &&
+        this.pointControls.isLocked
+      );
+      editor.pointerCameraGuard = false;
+      editor.transforming = false;
+      if (!isFirstPersonLocked) {
+        this.cameraControls.enabled = true;
+        editor.cameraControlsEnabled = true;
+        editor.pointerCameraEnabled = true;
+      }
+    },
+    scheduleSuppressSelectionOnce() {
+      const editor = this.transformEditor;
+      if (!editor) return;
+      editor.suppressSelectionOnce = true;
+      if (editor.suppressSelectionTimer) {
+        clearTimeout(editor.suppressSelectionTimer);
+      }
+      editor.suppressSelectionTimer = setTimeout(() => {
+        editor.suppressSelectionOnce = false;
+        editor.suppressSelectionTimer = null;
+      }, 0);
+    },
+    initSceneCommandService() {
+      if (!this.scene || this.sceneCommandService) return;
+      this.sceneCommandService = new SceneCommandService({
+        THREE: this.THREE,
+        getScene: () => this.scene,
+        requestRender: () => {
+          if (typeof this.notifyCameraChange === 'function') {
+            this.notifyCameraChange('customEdit');
+          }
+        },
+      });
+      Object.values(EDITOR_EVENT).forEach(eventName => {
+        const dispose = this.sceneCommandService.subscribe(eventName, payload => {
+          this.handleSceneCommandEvent(eventName, payload);
+          this.$emit(eventName, payload);
+        });
+        this.sceneCommandEventDisposers.push(dispose);
+      });
+    },
+    handleSceneCommandEvent(eventName, payload) {
+      switch (eventName) {
+        case EDITOR_EVENT.OBJECT_SELECTED:
+          this.syncTransformSelection(payload && payload.uuid ? payload.uuid : '');
+          break;
+        case EDITOR_EVENT.TRANSFORM_MODE_CHANGED:
+          this.applyTransformMode(
+            payload && payload.mode ? payload.mode : TRANSFORM_MODE.TRANSLATE
+          );
+          break;
+        case EDITOR_EVENT.OBJECT_ADDED:
+        case EDITOR_EVENT.OBJECT_REMOVED:
+        case EDITOR_EVENT.OBJECT_CHANGED:
+        case EDITOR_EVENT.HISTORY_CHANGED:
+        case EDITOR_EVENT.SCENE_GRAPH_CHANGED:
+          this.ensureTransformSelectionValid();
+          break;
+      }
+    },
+    initTransformControls() {
+      if (!this.scene || !this.camera || !this.renderer || this.transformEditor.transformControls)
+        return;
+      const controls = new TransformControls(this.camera, this.renderer.domElement);
+      const helper = controls.getHelper();
+      controls.setMode(this.getTransformMode());
+      helper.visible = false;
+      helper.traverse(item => {
+        if (!item.userData) {
+          item.userData = {};
+        }
+        item.userData.transformControlHelper = true;
+      });
+      this.transformEditor.handlers = {
+        change: () => {
+          if (typeof this.notifyCameraChange === 'function') {
+            this.notifyCameraChange('customTransformControl');
+          }
+        },
+        objectChange: () => {
+          this.handleTransformObjectChange();
+        },
+        mouseUp: () => {
+          this.scheduleSuppressSelectionOnce();
+          this.restoreTransformCameraControls();
+        },
+        draggingChanged: event => {
+          this.handleTransformDraggingChanged(event);
+        },
+      };
+      controls.addEventListener('change', this.transformEditor.handlers.change);
+      controls.addEventListener('objectChange', this.transformEditor.handlers.objectChange);
+      controls.addEventListener('mouseUp', this.transformEditor.handlers.mouseUp);
+      controls.addEventListener('dragging-changed', this.transformEditor.handlers.draggingChanged);
+      this.scene.add(helper);
+      this.transformEditor.transformControls = controls;
+      this.transformEditor.transformHelper = helper;
+      this.transformEditor.keydownHandler = event => {
+        const isEscape = event && (event.key === 'Escape' || event.keyCode === 27);
+        if (!isEscape) return;
+        if (this.sceneCommandService && this.sceneCommandService.selectedUuid) {
+          this.clearCustomSelection();
+        }
+      };
+      window.addEventListener('keydown', this.transformEditor.keydownHandler, false);
+    },
+    disposeTransformControls() {
+      const editor = this.transformEditor;
+      if (!editor) return;
+      if (editor.keydownHandler) {
+        window.removeEventListener('keydown', editor.keydownHandler, false);
+        editor.keydownHandler = null;
+      }
+      const controls = editor.transformControls;
+      const helper = editor.transformHelper;
+      if (editor.suppressSelectionTimer) {
+        clearTimeout(editor.suppressSelectionTimer);
+        editor.suppressSelectionTimer = null;
+      }
+      if (controls) {
+        if (editor.handlers.change) {
+          controls.removeEventListener('change', editor.handlers.change);
+        }
+        if (editor.handlers.objectChange) {
+          controls.removeEventListener('objectChange', editor.handlers.objectChange);
+        }
+        if (editor.handlers.mouseUp) {
+          controls.removeEventListener('mouseUp', editor.handlers.mouseUp);
+        }
+        if (editor.handlers.draggingChanged) {
+          controls.removeEventListener('dragging-changed', editor.handlers.draggingChanged);
+        }
+        controls.detach();
+      }
+      if (helper && this.scene) {
+        this.scene.remove(helper);
+      }
+      editor.handlers = {};
+      editor.transformControls = null;
+      editor.transformHelper = null;
+      editor.transforming = false;
+      editor.transformTargetUuid = '';
+      editor.transformStartSnapshot = null;
+      editor.suppressSelectionOnce = false;
+    },
+    isTransformEditBlocked() {
+      return !!(this.firstPerSign && this.pointControls && this.pointControls.isLocked);
+    },
+    isTransformControlDisabled() {
+      return !!this.transformEditDisabled || this.isTransformEditBlocked();
+    },
+    applyTransformMode(mode) {
+      const nextMode =
+        Object.values(TRANSFORM_MODE).indexOf(mode) !== -1 ? mode : TRANSFORM_MODE.TRANSLATE;
+      this.transformEditor.transformMode = nextMode;
+      if (this.transformEditor.transformControls) {
+        this.transformEditor.transformControls.setMode(nextMode);
+      }
+      return nextMode;
+    },
+    getSelectableSceneObject(target) {
+      if (!this.sceneCommandService || !target) return null;
+      return this.sceneCommandService.findSelectableObject(target);
+    },
+    getSelectableCustomObject(target) {
+      const object = this.getSelectableSceneObject(target);
+      if (!object || !this.sceneCommandService) return null;
+      const nodeType = this.sceneCommandService.getNodeType(object.uuid);
+      return nodeType === 'custom-element' ||
+        nodeType === 'custom-group' ||
+        nodeType === 'custom-root'
+        ? object
+        : null;
+    },
+    selectSceneObject(uuid, options = {}) {
+      if (!this.sceneCommandService) return null;
+      if (this.isTransformEditBlocked()) return null;
+      return this.sceneCommandService.selectObject(uuid, options);
+    },
+    selectElement(uuid, options = {}) {
+      if (!this.sceneCommandService) return null;
+      if (this.isTransformEditBlocked()) return null;
+      return this.sceneCommandService.selectElement(uuid, options);
+    },
+    clearCustomSelection(options = {}) {
+      if (!this.sceneCommandService) {
+        this.detachTransformControls();
+        return;
+      }
+      this.sceneCommandService.clearSelection(options);
+    },
+    getDefaultPrimitivePlacement() {
+      const defaultPosition = { x: 0, y: 0, z: 0 };
+      const defaultSize = 100;
+      if (!this.cameraControls) {
+        return {
+          position: defaultPosition,
+          size: defaultSize,
+        };
+      }
+      const target = new this.THREE.Vector3();
+      if (typeof this.cameraControls.getTarget === 'function') {
+        this.cameraControls.getTarget(target);
+      } else if (this.cameraControls._target) {
+        target.copy(this.cameraControls._target);
+      }
+      const distance =
+        this.camera && this.camera.position && typeof this.camera.position.distanceTo === 'function'
+          ? this.camera.position.distanceTo(target)
+          : 0;
+      const size = Math.min(Math.max(distance * 0.008, 20), 100) || defaultSize;
+      return {
+        position: {
+          x: target.x,
+          y: target.y,
+          z: target.z,
+        },
+        size,
+      };
+    },
+    buildDefaultPrimitiveTransform(transform, position) {
+      const nextTransform = transform && typeof transform === 'object' ? { ...transform } : {};
+      if (!Array.isArray(nextTransform.position)) {
+        nextTransform.position = [position.x, position.y, position.z];
+      }
+      if (!Array.isArray(nextTransform.rotation)) {
+        nextTransform.rotation = [0, 0, 0];
+      }
+      if (!Array.isArray(nextTransform.scale)) {
+        nextTransform.scale = [1, 1, 1];
+      }
+      return nextTransform;
+    },
+    buildDefaultPrimitiveGeometryParams(type, size) {
+      const primitiveSize = Number.isFinite(size) ? size : 100;
+      switch (type) {
+        case 'box':
+          return {
+            width: primitiveSize,
+            height: primitiveSize,
+            depth: primitiveSize,
+          };
+        case 'sphere':
+          return {
+            radius: primitiveSize / 2,
+            phiStart: 0,
+            phiLength: 360,
+            thetaStart: 0,
+            thetaLength: 180,
+          };
+        case 'cylinder':
+          return {
+            radiusTop: primitiveSize / 2,
+            radiusBottom: primitiveSize / 2,
+            height: primitiveSize,
+          };
+        case 'capsule':
+          return {
+            radius: primitiveSize / 3,
+            length: primitiveSize,
+          };
+        case 'tetrahedron':
+        case 'octahedron':
+          return {
+            radius: primitiveSize / 2,
+          };
+        case 'ring':
+          return {
+            radius: primitiveSize / 2,
+            tube: primitiveSize / 8,
+            arc: 360,
+          };
+        default:
+          return {};
+      }
+    },
+    normalizeAddElementOptions(options = {}) {
+      const placement = this.getDefaultPrimitivePlacement();
+      const nextOptions = { ...options };
+      nextOptions.transform = this.buildDefaultPrimitiveTransform(
+        nextOptions.transform,
+        placement.position
+      );
+      if (!nextOptions.geometryParams) {
+        nextOptions.geometryParams = this.buildDefaultPrimitiveGeometryParams(
+          nextOptions.type,
+          placement.size
+        );
+      }
+      return nextOptions;
+    },
+    normalizeAddGroupOptions(options = {}) {
+      const placement = this.getDefaultPrimitivePlacement();
+      return {
+        ...options,
+        transform: this.buildDefaultPrimitiveTransform(options.transform, placement.position),
+      };
+    },
+    addElement(options) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.addElement(this.normalizeAddElementOptions(options));
+    },
+    addGroup(options = {}) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.addGroup(this.normalizeAddGroupOptions(options));
+    },
+    removeElement(uuid) {
+      if (!this.sceneCommandService) return;
+      this.sceneCommandService.removeElement(uuid);
+    },
+    cloneElement(uuid, options = {}) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.cloneElement(uuid, options);
+    },
+    moveElement(uuid, targetParentUuid, referenceUuid, insertMode = 'append') {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.moveElement(
+        uuid,
+        targetParentUuid,
+        referenceUuid,
+        insertMode
+      );
+    },
+    updateElement(options) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.updateElement(options);
+    },
+    updateOriginalModelStyle(options) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.updateOriginalModelStyle(options);
+    },
+    resetOriginalModelStyle(uuid) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.resetOriginalModelStyle(uuid);
+    },
+    setElementPosition(uuid, position, oldPosition) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.setElementPosition(uuid, position, oldPosition);
+    },
+    setElementRotation(uuid, rotation, oldRotation) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.setElementRotation(uuid, rotation, oldRotation);
+    },
+    setElementScale(uuid, scale, oldScale) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.setElementScale(uuid, scale, oldScale);
+    },
+    renameElement(uuid, name) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.renameElement(uuid, name);
+    },
+    setElementVisible(uuid, visible) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.setElementVisible(uuid, visible);
+    },
+    setTransformMode(mode) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.setTransformMode(mode, {
+        forceEmit: true,
+      });
+    },
+    getTransformMode() {
+      if (!this.sceneCommandService) {
+        return this.transformEditor.transformMode;
+      }
+      return this.sceneCommandService.getTransformMode();
+    },
+    getCustomObjectSnapshot(uuid) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.getObjectSnapshot(uuid);
+    },
+    getModelReviseLocateName(uuid) {
+      if (!uuid || !this.sceneCommandService) return '';
+      const snapshot = this.sceneCommandService.getObjectSnapshot(uuid);
+      if (snapshot && snapshot.name) {
+        return snapshot.name;
+      }
+      const originalRecord = this.sceneCommandService.getOriginalModelStyle(uuid);
+      return originalRecord && originalRecord.name ? originalRecord.name : '';
+    },
+    setOriginalModelNodeName(options = {}) {
+      if (!this.sceneCommandService || !this.sceneCommandService.setOriginalModelNodeName) {
+        return '';
+      }
+      return this.sceneCommandService.setOriginalModelNodeName(options);
+    },
+    getOriginalModelSelectablePriority(object) {
+      if (!object) return -1;
+      let priority = 0;
+      if (object.isInstancedMesh === true) {
+        priority += 8;
+      }
+      if (object.type && object.type !== 'Group') {
+        priority += 4;
+      }
+      if (object.material) {
+        priority += 2;
+      }
+      return priority;
+    },
+    findOriginalModelSelectableObject(uuid, name) {
+      if (
+        this.sceneCommandService &&
+        typeof this.sceneCommandService.resolveOriginalModelObject === 'function'
+      ) {
+        const originalObject = this.sceneCommandService.resolveOriginalModelObject({
+          uuid,
+          name,
+        });
+        if (originalObject && originalObject.uuid) {
+          return originalObject;
+        }
+      }
+      const objectByUuid = this.sceneCommandService
+        ? this.sceneCommandService.getObjectByUuid(uuid)
+        : null;
+      if (objectByUuid) {
+        return objectByUuid;
+      }
+      if (!name) {
+        return null;
+      }
+      const objectList = this.getObjectByName(name, '');
+      if (!Array.isArray(objectList) || objectList.length === 0) {
+        return null;
+      }
+      return (
+        objectList
+          .filter(item => item && item.uuid)
+          .sort(
+            (left, right) =>
+              this.getOriginalModelSelectablePriority(right) -
+              this.getOriginalModelSelectablePriority(left)
+          )[0] || null
+      );
+    },
+    async locateModelByUuid(uuid) {
+      if (!uuid || !this.sceneCommandService) return false;
+      const originalRecord = this.sceneCommandService.getOriginalModelStyle(uuid);
+      const nodeType =
+        this.sceneCommandService.getNodeType(uuid) ||
+        (originalRecord ? SCENE_NODE_TYPE.ORIGINAL_MODEL : '');
+      if (uuid === SCENE_NODE_TYPE.ORIGINAL_MODEL || nodeType === SCENE_NODE_TYPE.CUSTOM_ROOT) {
+        this.selectElement();
+        return false;
+      }
+      if (
+        nodeType === SCENE_NODE_TYPE.CUSTOM_GROUP ||
+        nodeType === SCENE_NODE_TYPE.CUSTOM_ELEMENT
+      ) {
+        this.selectElement(uuid);
+        return this.locateModel(uuid);
+      }
+      const name =
+        originalRecord && originalRecord.name
+          ? originalRecord.name
+          : this.getModelReviseLocateName(uuid);
+      if (nodeType !== SCENE_NODE_TYPE.ORIGINAL_MODEL && !name) {
+        return false;
+      }
+      if (!name) return false;
+      try {
+        const targetObject = this.findOriginalModelSelectableObject(uuid, name);
+        if (targetObject && targetObject.uuid) {
+          this.selectSceneObject(targetObject.uuid);
+        } else {
+          this.selectElement();
+        }
+        await this.loadModelByIds({
+          params: {
+            ids: [name],
+          },
+          onComplete: () => {
+            this.locateModel([name]);
+            const loadedObject = this.findOriginalModelSelectableObject(uuid, name);
+            if (loadedObject && loadedObject.uuid) {
+              this.selectSceneObject(loadedObject.uuid);
+            }
+          },
+        });
+        return true;
+      } catch (error) {
+        return false;
+      }
+    },
+    getSelectedSceneObjectSnapshot() {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.getSelectedObjectSnapshot();
+    },
+    getSelectedCustomObjectSnapshot() {
+      if (!this.sceneCommandService) return null;
+      if (this.sceneCommandService.getSelectedNodeType() === 'original-model') {
+        return null;
+      }
+      return this.sceneCommandService.getSelectedObjectSnapshot();
+    },
+    getSelectedOriginalModelStyleSnapshot() {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.getSelectedOriginalModelStyleSnapshot();
+    },
+    getOriginalModelStyleChanges() {
+      if (!this.sceneCommandService) return [];
+      return this.sceneCommandService.getOriginalModelStyleChanges();
+    },
+    undo() {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.undo();
+    },
+    redo() {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.redo();
+    },
+    subscribe(eventName, handler) {
+      if (!this.sceneCommandService) {
+        return function () {};
+      }
+      return this.sceneCommandService.subscribe(eventName, handler);
+    },
+    getCustomTree() {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.getCustomTree();
+    },
+    getCustomSaveTree() {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.getCustomSaveTree();
+    },
+    getSaveSnapshot() {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.getSaveSnapshot();
+    },
+    applySaveSnapshot(snapshot) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.applySaveSnapshot(snapshot);
+    },
+    serializeCustomElements() {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.serializeCustomElements();
+    },
+    deserializeCustomElements(json) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.deserializeCustomElements(json);
+    },
+    removeAllCustomElements() {
+      if (!this.sceneCommandService) return;
+      this.sceneCommandService.removeAllCustomElements();
+    },
+    resolveInsertTarget(selectedUuid) {
+      if (!this.sceneCommandService) return null;
+      return this.sceneCommandService.resolveInsertTarget(selectedUuid);
+    },
+    detachTransformControls() {
+      const editor = this.transformEditor;
+      if (!editor) return;
+      const controls = editor.transformControls;
+      const helper = editor.transformHelper;
+      if (controls) {
+        controls.detach();
+      }
+      if (helper) {
+        helper.visible = false;
+      }
+      editor.transforming = false;
+      editor.transformTargetUuid = '';
+      editor.transformStartSnapshot = null;
+      this.restoreTransformCameraControls();
+      if (typeof this.notifyCameraChange === 'function') {
+        this.notifyCameraChange('customTransformDetach');
+      }
+    },
+    attachTransformControls(object) {
+      const editor = this.transformEditor;
+      if (!editor || !editor.transformControls) return null;
+      if (this.isTransformControlDisabled()) {
+        this.detachTransformControls();
+        return null;
+      }
+      if (!object || isCustomRoot(object) || !isTransformAttachableObject(object)) {
+        this.detachTransformControls();
+        return null;
+      }
+      object.updateMatrixWorld(true);
+      editor.transformControls.attach(object);
+      if (editor.transformHelper) {
+        editor.transformHelper.visible = true;
+      }
+      editor.transformTargetUuid = object.uuid;
+      this.applyTransformMode(this.getTransformMode());
+      if (typeof this.notifyCameraChange === 'function') {
+        this.notifyCameraChange('customTransformAttach');
+      }
+      return object;
+    },
+    syncTransformSelection(uuid) {
+      if (!this.sceneCommandService) return null;
+      if (!uuid) {
+        this.detachTransformControls();
+        return null;
+      }
+      const object = this.sceneCommandService.getObjectByUuid(uuid);
+      return this.attachTransformControls(object);
+    },
+    ensureTransformSelectionValid() {
+      if (!this.sceneCommandService) return null;
+      const selectedUuid = this.sceneCommandService.selectedUuid;
+      if (!selectedUuid) {
+        this.detachTransformControls();
+        return null;
+      }
+      const object = this.sceneCommandService.getObjectByUuid(selectedUuid);
+      if (!object || !isTransformAttachableObject(object)) {
+        this.detachTransformControls();
+        return null;
+      }
+      return this.attachTransformControls(object);
+    },
+    buildTransformPayload(objectData, options = {}) {
+      if (!objectData) return null;
+      return {
+        ...objectData,
+        isTransforming: !!options.isTransforming,
+        mode: this.getTransformMode(),
+      };
+    },
+    emitTransformEvent(eventName, objectData, options = {}) {
+      const payload = this.buildTransformPayload(objectData, options);
+      if (!payload || !this.sceneCommandService) return;
+      this.sceneCommandService.emitEvent(eventName, payload);
+    },
+    isTransformValueChanged(oldValue = [], newValue = []) {
+      if (
+        !Array.isArray(oldValue) ||
+        !Array.isArray(newValue) ||
+        oldValue.length !== newValue.length
+      ) {
+        return true;
+      }
+      for (let index = 0; index < oldValue.length; index += 1) {
+        const currentDiff = Math.abs(
+          (Number(oldValue[index]) || 0) - (Number(newValue[index]) || 0)
+        );
+        if (currentDiff > 0.000001) {
+          return true;
+        }
+      }
+      return false;
+    },
+    commitTransformChanges(object) {
+      if (!object || !this.sceneCommandService) return null;
+      const startSnapshot = this.transformEditor.transformStartSnapshot;
+      const endSnapshot = this.getCustomObjectSnapshot(object.uuid);
+      if (!startSnapshot || !endSnapshot) {
+        return endSnapshot;
+      }
+      const mode = this.getTransformMode();
+      if (mode === TRANSFORM_MODE.TRANSLATE) {
+        if (this.isTransformValueChanged(startSnapshot.position, endSnapshot.position)) {
+          this.setElementPosition(object.uuid, endSnapshot.position, startSnapshot.position);
+        }
+      } else if (mode === TRANSFORM_MODE.ROTATE) {
+        if (this.isTransformValueChanged(startSnapshot.rotation, endSnapshot.rotation)) {
+          this.setElementRotation(object.uuid, endSnapshot.rotation, startSnapshot.rotation);
+        }
+      } else if (mode === TRANSFORM_MODE.SCALE) {
+        if (this.isTransformValueChanged(startSnapshot.scale, endSnapshot.scale)) {
+          this.setElementScale(object.uuid, endSnapshot.scale, startSnapshot.scale);
+        }
+      }
+      return this.getCustomObjectSnapshot(object.uuid);
+    },
+    handleTransformObjectChange() {
+      const editor = this.transformEditor;
+      const controls = editor && editor.transformControls;
+      if (!editor || !controls || !controls.object || !editor.transforming) return;
+      controls.object.updateMatrixWorld(true);
+      this.emitTransformEvent(
+        EDITOR_EVENT.OBJECT_TRANSFORM_CHANGING,
+        this.getCustomObjectSnapshot(controls.object.uuid),
+        {
+          isTransforming: true,
+        }
+      );
+      if (typeof this.notifyCameraChange === 'function') {
+        this.notifyCameraChange('customTransform');
+      }
+    },
+    handleTransformDraggingChanged(event) {
+      const editor = this.transformEditor;
+      if (!editor) return;
+      const isDraggingNow = !!(event && event.value);
+      editor.transforming = isDraggingNow;
+      if (this.cameraControls) {
+        if (isDraggingNow) {
+          editor.cameraControlsEnabled = editor.pointerCameraGuard
+            ? editor.pointerCameraEnabled
+            : this.cameraControls.enabled;
+          this.cameraControls.enabled = false;
+        } else {
+          this.restoreTransformCameraControls();
+        }
+      }
+      const controls = editor.transformControls;
+      const object = controls && controls.object ? controls.object : null;
+      if (isDraggingNow) {
+        editor.transformStartSnapshot = object ? this.getCustomObjectSnapshot(object.uuid) : null;
+        this.emitTransformEvent(
+          EDITOR_EVENT.OBJECT_TRANSFORM_CHANGING,
+          editor.transformStartSnapshot,
+          {
+            isTransforming: true,
+          }
+        );
+        return;
+      }
+      const resultSnapshot = this.commitTransformChanges(object);
+      editor.transformStartSnapshot = null;
+      this.emitTransformEvent(EDITOR_EVENT.OBJECT_TRANSFORM_CHANGED, resultSnapshot, {
+        isTransforming: false,
+      });
+    },
     getOutlineInstanceProxyKey(instancedMesh, instanceIndex) {
       return `${instancedMesh.uuid}:${instanceIndex}`;
     },
@@ -490,20 +1277,6 @@ export default {
       if (proxy.material) proxy.material.dispose && proxy.material.dispose();
       return proxy;
     },
-    // 判断是设备是手机还是电脑
-    isMobileDevice() {
-      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
-      if (/windows phone/i.test(userAgent)) {
-        return true;
-      }
-      if (/android/i.test(userAgent)) {
-        return true;
-      }
-      if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
-        return true;
-      }
-      return false;
-    },
     // 节流工具方法
     throttle(func, limit) {
       let lastFunc;
@@ -2306,6 +3079,7 @@ export default {
         projectId,
         debug: isDebug,
         renderModelData: this.renderModelData.bind(this),
+        onRangeStreamComplete: this.handleRangeStreamComplete.bind(this),
         ensureNotInteracting: async abortSignal => {
           if (
             this.userInteracting ||
@@ -2415,6 +3189,19 @@ export default {
       this.setSceneBox(null, documentId, false);
       this.setBoxIndex(null, documentId, false);
     },
+    locateSceneBoxByDocumentId(documentId, options = {}) {
+      if (!documentId || !this.noObserver || !this.noObserver.sceneBoxes) {
+        return false;
+      }
+      const box = this.noObserver.sceneBoxes.get(String(documentId));
+      if (!box || !box.isBox3 || box.isEmpty()) {
+        return false;
+      }
+      const center = box.getCenter(new this.THREE.Vector3());
+      const size = box.getSize(new this.THREE.Vector3());
+      this.locateByCenterBox(center, size, options);
+      return true;
+    },
     /**
      * 同步获取当前WebGL画面的截图数据，解决preserveDrawingBuffer为false时html2canvas截黑屏的问题
      */
@@ -2434,7 +3221,15 @@ export default {
     /**
      * 内部渲染流式数据方法
      */
-    renderModelData(meshes, primitives, list, range, onComplete, immediateUpdate) {
+    renderModelData(
+      meshes,
+      primitives,
+      list,
+      range,
+      onComplete,
+      immediateUpdate,
+      renderOptions = {}
+    ) {
       // 构造 drawModel 需要的数据格式
       const modelRegistry = this.noObserver.streamLoader.modelRegistry;
       const modelRecords = Array.from(modelRegistry.values());
@@ -2481,10 +3276,56 @@ export default {
         version: list ? list.version : '',
       };
 
-      options.onComplete = onComplete;
+      options.suppressLoadComplete = !!renderOptions.suppressLoadComplete;
       options.immediateUpdate = immediateUpdate;
 
-      this.drawModel(regionModelData, '', meshNameConfig, options);
+      return new Promise(resolve => {
+        let finished = false;
+        const finish = result => {
+          if (finished) return;
+          finished = true;
+          resolve(result || {});
+        };
+
+        options.onComplete = complete => {
+          if (
+            this.sceneCommandService &&
+            typeof this.sceneCommandService.retryPendingOriginalModelSaveChanges === 'function'
+          ) {
+            this.sceneCommandService.retryPendingOriginalModelSaveChanges();
+          }
+          onComplete?.(complete);
+          finish(complete);
+        };
+        options.onCancel = cancelInfo => {
+          finish({
+            canceled: true,
+            ...(cancelInfo || {}),
+          });
+        };
+
+        this.drawModel(regionModelData, '', meshNameConfig, options);
+      });
+    },
+
+    waitNextRenderFrame() {
+      return new Promise(resolve => {
+        if (typeof requestAnimationFrame === 'function') {
+          requestAnimationFrame(() => {
+            resolve();
+          });
+          return;
+        }
+        setTimeout(resolve, 0);
+      });
+    },
+
+    async handleRangeStreamComplete(payload = {}) {
+      await this.waitNextRenderFrame();
+      this.$emit('loadComplete', {
+        source: 'inRangeDis2',
+        ...payload,
+      });
     },
 
     getRangeStream(options) {
@@ -2570,6 +3411,9 @@ export default {
       this.renderer.debug.checkShaderErrors = false;
       this.renderer.info.autoReset = false;
       this.renderer.setPixelRatio(window.devicePixelRatio);
+      if (this.instructions && window.getComputedStyle(this.instructions).position === 'static') {
+        this.instructions.style.position = 'relative';
+      }
       const rect = this.instructions.getBoundingClientRect();
       this.renderer.setSize(rect.width, rect.height);
       this.renderer.domElement.id = 'three-model-' + this.containId;
@@ -2825,7 +3669,7 @@ export default {
       const rect = this.instructions.getBoundingClientRect();
       this.labelRenderer.setSize(rect.width, rect.height);
       this.labelRenderer.domElement.style.position = 'absolute';
-
+      this.labelRenderer.domElement.style.left = '0';
       this.labelRenderer.domElement.style.top = '0';
       this.labelRenderer.domElement.style.pointerEvents = 'none';
       this.instructions.appendChild(this.labelRenderer.domElement);
@@ -2853,7 +3697,9 @@ export default {
           options?.onComplete?.(complete);
           console.log('加载完成');
           // 触发原有的完成事件
-          this.$emit('loadComplete');
+          if (!options?.suppressLoadComplete) {
+            this.$emit('loadComplete');
+          }
         }
       );
     },
@@ -2885,6 +3731,14 @@ export default {
       this.skipNextRenderFrame = true;
 
       const intersects = this.getRaycasterObjects(event);
+      const shouldBlockCamera = intersects.some(item =>
+        this.isActiveTransformControlIntersection(item)
+      );
+      if (shouldBlockCamera) {
+        this.setPointerCameraGuard(true);
+      } else {
+        this.setPointerCameraGuard(false);
+      }
       this.firstTime = new Date().getTime();
       let params = {
         event,
@@ -2915,6 +3769,87 @@ export default {
         ? this.raycaster.intersectObjects(this.scene.children, true)
         : [];
     },
+    isTransformControlIntersection(intersection) {
+      let current = intersection && intersection.object ? intersection.object : null;
+      while (current) {
+        if (current.userData && current.userData.transformControlHelper === true) {
+          return true;
+        }
+        current = current.parent;
+      }
+      return false;
+    },
+    isActiveTransformControlIntersection(intersection) {
+      const editor = this.transformEditor;
+      const controls = editor && editor.transformControls;
+      const helper = editor && editor.transformHelper;
+      if (!controls || !controls.object || !helper || !helper.visible) {
+        return false;
+      }
+      return this.isTransformControlIntersection(intersection);
+    },
+    getPrimaryIntersection(intersects = []) {
+      if (!Array.isArray(intersects) || intersects.length === 0) {
+        return null;
+      }
+      const validIntersects = intersects.filter(
+        item => item && item.object && !this.isTransformControlIntersection(item)
+      );
+      if (validIntersects.length === 0) {
+        return null;
+      }
+      const selectableIntersect = validIntersects.find(item =>
+        this.getSelectableSceneObject(item.object)
+      );
+      return selectableIntersect || validIntersects[0] || null;
+    },
+    buildIntersectionParams(intersection, event, cameraData) {
+      if (!intersection) {
+        return {
+          objects: [],
+          mousePosition: { x: event.clientX, y: event.clientY },
+          camera: cameraData,
+          v3Position: {
+            x: -1,
+            y: -1,
+            z: -1,
+          },
+        };
+      }
+      const selectableObject = this.getSelectableSceneObject(intersection.object);
+      const params = {
+        objects: [intersection.object],
+        mousePosition: { x: event.clientX, y: event.clientY },
+        camera: cameraData,
+        v3Position: {
+          x: intersection.point.x,
+          y: intersection.point.y,
+          z: intersection.point.z,
+        },
+        instanceId: this.getInstanceId(intersection.object, intersection.instanceId),
+      };
+      if (selectableObject) {
+        const nodeType = this.sceneCommandService
+          ? this.sceneCommandService.getNodeType(selectableObject.uuid)
+          : '';
+        params.selectedObject = selectableObject;
+        params.selectedObjectUuid = selectableObject.uuid;
+        params.selectedNodeType = nodeType;
+        if (
+          nodeType === 'custom-element' ||
+          nodeType === 'custom-group' ||
+          nodeType === 'custom-root'
+        ) {
+          params.customObject = selectableObject;
+          params.customObjectUuid = selectableObject.uuid;
+        }
+        if (nodeType === 'original-model') {
+          params.originalModel = selectableObject;
+          params.originalModelUuid = selectableObject.uuid;
+        }
+      }
+      return params;
+    },
     getInstanceId(instancedMesh, instanceIndex, options) {
       if (!instancedMesh || instanceIndex === undefined || instanceIndex === null) {
         return null;
@@ -2936,10 +3871,14 @@ export default {
       }, 50); // 短暂延迟确保交互完成
 
       // 在测量模式下，不进行事件暴露
+      if (!this.transformEditor.transforming) {
+        this.setPointerCameraGuard(false);
+      }
       if (!this.measureFlag) {
         this.lastTime = new Date().getTime();
         if (this.lastTime - this.firstTime < 300) {
           const intersects = this.getRaycasterObjects(event);
+          const primaryIntersection = this.getPrimaryIntersection(intersects);
           let params = {};
           let cameraData = {
             position: {
@@ -2953,43 +3892,101 @@ export default {
               roll: this.cameraControls._target.z,
             },
           };
-          if (intersects.length > 0) {
+          if (primaryIntersection) {
             this.clearBypassCullingModelIds();
-            const instanceId = this.getInstanceId(intersects[0].object, intersects[0].instanceId);
-            params = {
-              objects: [intersects[0].object],
-              mousePosition: { x: event.clientX, y: event.clientY },
-              camera: cameraData,
-              v3Position: {
-                x: intersects[0].point.x,
-                y: intersects[0].point.y,
-                z: intersects[0].point.z,
-              },
-              // inHighPriorityRegion: inHighPriority,
-              instanceId,
-            };
+            params = this.buildIntersectionParams(primaryIntersection, event, cameraData);
           } else {
-            params = {
-              objects: [],
-              mousePosition: { x: event.clientX, y: event.clientY },
-              camera: cameraData,
-              v3Position: {
-                x: -1,
-                y: -1,
-                z: -1,
-              },
-              // inHighPriorityRegion: false,
-            };
+            params = this.buildIntersectionParams(null, event, cameraData);
           }
           if (event.button === 0) {
+            if (this.transformEditor && this.transformEditor.suppressSelectionOnce) {
+              this.transformEditor.suppressSelectionOnce = false;
+              this.setPointerCameraGuard(false);
+              return;
+            }
+            if (params.selectedObjectUuid) {
+              this.selectSceneObject(params.selectedObjectUuid);
+            } else if (this.sceneCommandService) {
+              this.clearCustomSelection();
+            }
+            if (!this.transformEditor.transforming) {
+              this.setPointerCameraGuard(false);
+            }
             this.$emit('leftClick', params);
           } else if (event.button === 1) {
+            this.setPointerCameraGuard(false);
             if (this.lastTime - this.lastMiddleClickTime < 2000) {
               this.$emit('middleDblClick', params);
               this.lastMiddleClickTime = 0;
             } else {
               this.lastMiddleClickTime = this.lastTime;
             }
+          } else if (event.button === 2) {
+            if ((params.objects && params.objects.length > 0) || this.isolateMode) {
+              this.setPointerCameraGuard(false);
+              this.$emit('rightClick', params);
+              onContextHandle(
+                event,
+                'fl-model',
+                '隐藏',
+                this.isolateMode ? '取消隔离' : '隔离',
+                () => {
+                  this.updateProperty([
+                    {
+                      name: params.instanceId,
+                      attr: {
+                        visible: false,
+                      },
+                    },
+                  ]);
+                },
+                () => {
+                  this.setAllModelVisible(this.isolateMode);
+                  this.updateProperty([
+                    {
+                      name: params.instanceId,
+                      attr: {
+                        visible: true,
+                      },
+                    },
+                  ]);
+                  this.isolateMode = !this.isolateMode;
+                }
+              );
+            }
+          } else if (event.button === 2) {
+            if ((params.objects && params.objects.length > 0) || this.isolateMode) {
+              this.setPointerCameraGuard(false);
+              this.$emit('rightClick', params);
+              onContextHandle(
+                event,
+                'fl-model',
+                '隐藏',
+                this.isolateMode ? '取消隔离' : '隔离',
+                () => {
+                  this.updateProperty([
+                    {
+                      name: params.instanceId,
+                      attr: {
+                        visible: false,
+                      },
+                    },
+                  ]);
+                },
+                () => {
+                  this.setAllModelVisible(this.isolateMode);
+                  this.updateProperty([
+                    {
+                      name: params.instanceId,
+                      attr: {
+                        visible: true,
+                      },
+                    },
+                  ]);
+                  this.isolateMode = !this.isolateMode;
+                }
+              );
+            }
           }
         }
       }
@@ -3411,24 +4408,56 @@ export default {
         }
       }
     },
+    expandLocateBoxByObject(box3, object) {
+      if (!box3 || !object) return;
+      if (object.isGroup) {
+        object.traverseVisible(child => {
+          if (child.isMesh || child.isLine || child.isPoints) {
+            box3.expandByObject(child);
+          }
+        });
+        return;
+      }
+      box3.expandByObject(object);
+    },
+    locateObjectByBox(object, options = {}) {
+      if (!object) return false;
+      const box3 = new this.THREE.Box3();
+      this.expandLocateBoxByObject(box3, object);
+      if (box3.isEmpty()) return false;
+      const center = box3.getCenter(new this.THREE.Vector3());
+      const size = box3.getSize(new this.THREE.Vector3());
+      this.locateByCenterBox(center, size, options);
+      return true;
+    },
     // 定位到模型
-    // name 模型名称 可以是数组
+    // name 模型名称或运行态 uuid，可以是数组
     locateModel(name) {
-      if (!this.scene) return;
+      if (!this.scene) return false;
       if (Array.isArray(name)) {
         const box3 = new this.THREE.Box3();
         name.forEach(n => {
+          const objectByUuid = this.getObjectByUuid(n);
+          if (objectByUuid) {
+            this.expandLocateBoxByObject(box3, objectByUuid);
+            return;
+          }
           const arr = this.getObjectByName(n);
           arr.forEach(o => {
-            box3.expandByObject(o);
+            this.expandLocateBoxByObject(box3, o);
           });
         });
         if (!box3.isEmpty()) {
           const center = box3.getCenter(new this.THREE.Vector3());
           const size = box3.getSize(new this.THREE.Vector3());
           this.locateByCenterBox(center, size, { viewAll: true });
+          return true;
         }
-        return;
+        return false;
+      }
+      const objectByUuid = this.getObjectByUuid(name);
+      if (objectByUuid && this.locateObjectByBox(objectByUuid)) {
+        return true;
       }
       let obj = this.getObjectByName(name)[0];
       if (obj) {
@@ -3440,7 +4469,9 @@ export default {
           let size = this.getSize(obj);
           this.locateByCenterBox(center, size);
         }
+        return true;
       }
+      return false;
     },
     // 根据自定义参数修改模型
     /*
@@ -3569,6 +4600,11 @@ export default {
       });
       return object;
     },
+    // 通过 uuid 获取实体对象
+    getObjectByUuid(uuid) {
+      if (!this.scene || !uuid) return null;
+      return this.scene.getObjectByProperty('uuid', uuid) || null;
+    },
     // 通过id获取实体对象, 返回查找到的对象
     getObjectById(id) {
       if (!this.scene) return null;
@@ -3654,6 +4690,7 @@ export default {
     removeAll() {
       return new Promise(resolve => {
         if (this.scene) {
+          this.removeAllCustomElements();
           this.removeTraverse();
           this.removeModelByDocumentId();
           resolve();
@@ -3693,6 +4730,16 @@ export default {
     // 销毁场景 释放内存
     destroyScene() {
       cancelAnimationFrame(this.animateId);
+      this.disposeTransformControls();
+
+      if (this.sceneCommandEventDisposers.length > 0) {
+        this.sceneCommandEventDisposers.forEach(dispose => dispose && dispose());
+        this.sceneCommandEventDisposers = [];
+      }
+      if (this.sceneCommandService) {
+        this.sceneCommandService.destroy();
+        this.sceneCommandService = null;
+      }
 
       if (this.noObserver && this.noObserver.outlineInstanceProxyMap) {
         this.noObserver.outlineInstanceProxyMap.forEach(proxy => {
@@ -3755,12 +4802,7 @@ export default {
       }
 
       // 移除鼠标点击/按下事件监听器
-      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);
-      }
+      this.unbindScenePointerEvents();
 
       // 取消 pointer lock 并移除相关键盘事件
       if (this.pointControls) {
@@ -4002,13 +5044,46 @@ export default {
       });
       return clippingPlanesConstant;
     },
+    isGlobalClippingExcludedNode(object) {
+      if (!object) return true;
+      const userData = object.userData || {};
+      const nodeType = userData.nodeType || userData.rootType || '';
+      if (nodeType === 'custom-root') return true;
+      if (userData.transformControlHelper === true) return true;
+      if (object.isCamera || object.isLight) return true;
+      if (typeof object.type === 'string' && /Helper$/i.test(object.type)) return true;
+      return object.type === 'CSS2DObject' || object.type === 'TransformControlsRoot';
+    },
+    getGlobalClippingRoots() {
+      if (this.modelGroup && this.modelGroup.children && this.modelGroup.children.length) {
+        return [this.modelGroup];
+      }
+      if (!this.scene || !this.scene.children || this.scene.children.length === 0) return [];
+      return this.scene.children.filter(child => !this.isGlobalClippingExcludedNode(child));
+    },
+    getGlobalClippingBox() {
+      if (!this.scene) return null;
+      const roots = this.getGlobalClippingRoots();
+      if (roots.length === 0) return null;
+      const box3 = new this.THREE.Box3();
+      roots.forEach(root => {
+        box3.expandByObject(root);
+      });
+      return box3.isEmpty() ? null : box3;
+    },
     // 设置全局整体剖切
     /*
         先开启模型全局剖切模式, 会返回剖切值的最大最小值
         剖切值变换时, 使用
       */
     setGlobalClipping(flag = true) {
-      const box3 = new this.THREE.Box3().setFromObject(this.scene.children[0]);
+      const box3 = this.getGlobalClippingBox();
+      if (!box3) {
+        return {
+          min: null,
+          max: null,
+        };
+      }
       let max = box3.max;
       let min = box3.min;
       const clippingPlanes = [
@@ -4280,11 +5355,11 @@ export default {
         } catch (e) {}
         // 锁定
         this.pointControls.addEventListener('lock', () => {
+          this.detachTransformControls();
           this.cameraControls.enabled = false;
           window.addEventListener('keydown', this.onKeyDown, false);
           window.addEventListener('keyup', this.onKeyUp, false);
-          this.renderer.domElement.removeEventListener('mouseup', this.mouseClick, false);
-          this.renderer.domElement.removeEventListener('mousedown', this.mouseDown, false);
+          this.unbindScenePointerEvents();
           if (typeof this._cameraChangeObserver === 'function') {
             this._cameraChangeObserver('firstPersonLock');
           }
@@ -4306,8 +5381,8 @@ export default {
           setTimeout(() => {
             window.removeEventListener('keydown', this.onKeyDown);
             window.removeEventListener('keyup', this.onKeyUp);
-            this.renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
-            this.renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
+            this.bindScenePointerEvents();
+            this.ensureTransformSelectionValid();
             // this.timeRender()
           }, 0);
           if (typeof this._cameraChangeObserver === 'function') {
@@ -5002,7 +6077,7 @@ export default {
         : this.batchLoadingState;
       // 如果已经在加载中，先停止之前的加载
       if (loadingState.isLoading) {
-        this.stopBatchLoading();
+        this.stopBatchLoading('restart');
       }
 
       // 重置instance-parser的处理状态
@@ -5337,7 +6412,7 @@ export default {
     /**
      * 停止批量加载
      */
-    stopBatchLoading() {
+    stopBatchLoading(reason = 'stop') {
       const loadingState = this.noObserver
         ? this.noObserver.batchLoadingState
         : this.batchLoadingState;
@@ -5345,6 +6420,9 @@ export default {
         cancelAnimationFrame(loadingState.animationFrameId);
         loadingState.animationFrameId = null;
       }
+      if (loadingState.isLoading && typeof loadingState.options?.onCancel === 'function') {
+        loadingState.options.onCancel({ reason });
+      }
       loadingState.isLoading = false;
       this.batchLoadingState.isLoading = false;
     },
@@ -5592,6 +6670,7 @@ export default {
 .fl-model-containor {
   width: 100%;
   height: 100%;
+  position: relative;
   cursor: pointer;
 }
 ::v-deep .tips-label {