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

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

@@ -138,6 +138,7 @@ import MeasureHeight from '@/utils/threejs/measure-height.js';
 import MeasureClearDistance from '@/utils/threejs/measure-clear-distance.js';
 import { parseData, processMeshData, processNodeData } from '@/utils/flgltf-parser';
 import {
+  GEOM_TYPES,
   handleInstancedMeshModel,
   resetProcessingState,
   PRIMITIVE_TYPE,
@@ -154,7 +155,7 @@ import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
 import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 import { OBB } from 'three/examples/jsm/math/OBB.js';
-import boxJson from './box.json';
+// import 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';
@@ -164,7 +165,9 @@ import { onContextHandle } from './component/context';
 
 const isDebug = process.env.NODE_ENV !== 'production' || process.env.VUE_APP_IS_WATCH === true;
 // const isDebug = false;
-const COLLISION_PENETRATION_EPSILON = 0.1;
+const COLLISION_PENETRATION_EPSILON = 10;
+const COLLISION_OBB_AXIS_EPSILON = 1e-8;
+const COLLISION_DEBUG_GROUP_NAME = '__collision_obb_debug_group__';
 
 export default {
   name: 'FlModel',
@@ -212,6 +215,7 @@ export default {
         isPaused: false,
       },
       isolateMode: false,
+      collisionObbDebugEnabled: true,
     };
   },
   watch: {
@@ -253,6 +257,7 @@ export default {
       'centeringDebounceTimer',
       'sceneBoundingBox',
       'sceneBoundingBoxHelper',
+      'collisionObbDebugGroup',
     ];
     arr.forEach(item => {
       this[item] = null;
@@ -273,6 +278,7 @@ export default {
       'needsCenteringAfterInteraction',
       'isDragging',
       'boundingBoxVisible',
+      'collisionObbDebugEnabled',
     ].forEach(item => {
       this[item] = false;
     });
@@ -1536,8 +1542,12 @@ export default {
       if (isAdd && boxJson) {
         const arr = boxJson ? boxJson : [];
         const modelIds = new Set();
+        const validGeomTypes = new Set(Object.values(GEOM_TYPES));
         for (let i = 0; i < arr.length; i++) {
           const it = arr[i];
+          if (!validGeomTypes.has(it.geomType)) {
+            continue;
+          }
           if (it.obb.length == 0) {
             continue;
           }
@@ -1546,32 +1556,52 @@ export default {
           const min = new this.THREE.Vector3(it.min[0], it.min[1], it.min[2]);
           const max = new this.THREE.Vector3(it.max[0], it.max[1], it.max[2]);
 
-          // 构造 AABB
-          const boxThree = new this.THREE.Box3(min, max);
+          const sourceBox = new this.THREE.Box3(min.clone(), max.clone());
+          // 八叉树仍使用 AABB 粗筛，最终碰撞使用 sourceBox 派生的 OBB 精筛
+          const boxThree = sourceBox.clone();
+
+          const hasMatrix = Array.isArray(it.matrix) && it.matrix.length >= 16;
+          const hasMeshMatrix = Array.isArray(it.meshMatrix) && it.meshMatrix.length >= 16;
+          let localMatrix = null;
+          let collisionMatrix = null;
+          if (hasMatrix || hasMeshMatrix) {
+            localMatrix = new this.THREE.Matrix4();
+            if (hasMeshMatrix) {
+              localMatrix.fromArray(it.meshMatrix);
+            } else {
+              localMatrix.identity();
+            }
+            if (hasMatrix) {
+              const matrix = new this.THREE.Matrix4().fromArray(it.matrix);
+              localMatrix.multiply(matrix);
+            }
 
-          const hasMatrix = Array.isArray(it.matrix);
-          if (hasMatrix && it.matrix.length >= 16) {
-            const matrix = new this.THREE.Matrix4().fromArray(it.matrix);
-            const worldMatrix = matrix.clone();
+            const worldMatrix = localMatrix.clone();
             if (this.bizToThreeMatrix) {
               worldMatrix.premultiply(this.bizToThreeMatrix);
             }
+            collisionMatrix = worldMatrix;
             boxThree.applyMatrix4(worldMatrix);
           } else if (this.bizToThreeMatrix) {
             // 注意：applyMatrix4 会重新计算 AABB
-            boxThree.applyMatrix4(this.bizToThreeMatrix);
+            collisionMatrix = this.bizToThreeMatrix.clone();
+            boxThree.applyMatrix4(collisionMatrix);
           }
 
           const userData = {
             flag: it.flag || 1, // 默认为 1
+            geomType: it.geomType,
             obbData: it.obb, // 存储原始 OBB 数据
             transparent: it.transp > 0,
             sourceVisible: it.visible === false ? false : true,
             visible: it.visible === false ? false : true, // 默认显示
+            occlusionEnabled:
+              it.geomType === GEOM_TYPES.geom_3d || it.geomType === GEOM_TYPES.geom_3d_obj,
           };
           if (it.flag === 1) {
             userData.indices = it.indices;
-            userData.matrix = it.matrix;
+            userData.matrix = localMatrix ? localMatrix.toArray() : it.matrix;
+            userData.meshMatrix = it.meshMatrix;
             // userData.matrix = new this.THREE.Matrix4().identity();
           }
           // 如果是 flag=3，解析并存储中心点、半轴长、旋转矩阵
@@ -1589,24 +1619,52 @@ export default {
               center.z
             );
             obbMatrix.multiply(rotationMatrix4);
+            if (localMatrix) {
+              obbMatrix.premultiply(localMatrix);
+            }
 
             userData.obb = {
               matrix: obbMatrix,
               center: center,
               halfSize: halfSize,
             };
+
+            const collisionObb = new OBB(center.clone(), halfSize.clone(), rotation.clone());
+            if (collisionMatrix) {
+              collisionObb.applyMatrix4(collisionMatrix);
+            }
+            userData.collisionObbs = [collisionObb];
           }
           // 如果是 flag=2，解析并存储多个子包围盒 (min, max)
           else if (it.flag === 2 && it.obb && it.obb.length > 0) {
             const subBoxes = [];
+            const collisionObbs = [];
             for (let k = 0; k < it.obb.length; k += 6) {
               if (k + 5 < it.obb.length) {
                 const min = new this.THREE.Vector3(it.obb[k], it.obb[k + 1], it.obb[k + 2]);
                 const max = new this.THREE.Vector3(it.obb[k + 3], it.obb[k + 4], it.obb[k + 5]);
                 subBoxes.push({ min, max });
+
+                const subBox = new this.THREE.Box3(min.clone(), max.clone());
+                const collisionObb = new OBB().fromBox3(subBox);
+                if (collisionMatrix) {
+                  collisionObb.applyMatrix4(collisionMatrix);
+                }
+                collisionObbs.push(collisionObb);
               }
             }
             userData.subBoxes = subBoxes;
+            if (collisionObbs.length > 0) {
+              userData.collisionObbs = collisionObbs;
+            }
+          }
+
+          if (!userData.collisionObbs || userData.collisionObbs.length === 0) {
+            const collisionObb = new OBB().fromBox3(sourceBox);
+            if (collisionMatrix) {
+              collisionObb.applyMatrix4(collisionMatrix);
+            }
+            userData.collisionObbs = [collisionObb];
           }
 
           boxThree.userData = userData;
@@ -1631,8 +1689,12 @@ export default {
         }
       }
       this.buildOctreeFromBoxIndex();
+      this.refreshCollisionObbDebug();
       console.log('time end', Date.now());
     },
+    shouldApplyOcclusionByBox(box) {
+      return !!(box && box.userData && box.userData.occlusionEnabled);
+    },
     tryInitialCenterAfterBoundsReady() {
       if (this.hasExecutedCentering || this.userInteracting) return;
       if (
@@ -1753,17 +1815,261 @@ export default {
       const numberValue = Number(value);
       return Number.isFinite(numberValue) ? numberValue : id;
     },
-    _getBoxMinPenetration(boxA, boxB) {
-      const x = Math.min(boxA.max.x - boxB.min.x, boxB.max.x - boxA.min.x);
-      const y = Math.min(boxA.max.y - boxB.min.y, boxB.max.y - boxA.min.y);
-      const z = Math.min(boxA.max.z - boxB.min.z, boxB.max.z - boxA.min.z);
-      return Math.min(x, y, z);
-    },
-    _isCollisionBoxMatched(boxA, boxB) {
+    _isCollisionAabbOverlapped(boxA, boxB) {
       if (!this._isCollisionBoxAvailable(boxA) || !this._isCollisionBoxAvailable(boxB))
         return false;
-      if (!boxA.intersectsBox(boxB)) return false;
-      return this._getBoxMinPenetration(boxA, boxB) > COLLISION_PENETRATION_EPSILON;
+      return boxA.intersectsBox(boxB);
+    },
+    _getCollisionObbs(box) {
+      if (!this._isCollisionBoxAvailable(box)) return [];
+      const userData = box.userData || {};
+      if (Array.isArray(userData.collisionObbs) && userData.collisionObbs.length > 0) {
+        return userData.collisionObbs;
+      }
+
+      const fallbackCollisionObb = new OBB().fromBox3(box);
+      userData.collisionObbs = [fallbackCollisionObb];
+      box.userData = userData;
+      return userData.collisionObbs;
+    },
+    _getCollisionDebugGroup() {
+      if (!this.scene) return null;
+      if (this.collisionObbDebugGroup && this.collisionObbDebugGroup.parent === this.scene) {
+        return this.collisionObbDebugGroup;
+      }
+
+      const group = new this.THREE.Group();
+      group.name = COLLISION_DEBUG_GROUP_NAME;
+      group.userData.transformControlHelper = true;
+      group.userData.collisionObbDebugHelper = true;
+      this.scene.add(group);
+      this.collisionObbDebugGroup = group;
+      return group;
+    },
+    _createCollisionObbLineSegments(obb, color) {
+      if (!obb) return null;
+
+      const axisInfo = this._getObbAxisInfo(obb);
+      const center = axisInfo.center;
+      const axes = axisInfo.axes;
+      const halfSizes = axisInfo.halfSizes;
+
+      const corners = [];
+      for (let x = -1; x <= 1; x += 2) {
+        for (let y = -1; y <= 1; y += 2) {
+          for (let z = -1; z <= 1; z += 2) {
+            const corner = new this.THREE.Vector3().copy(center);
+            corner.add(axes[0].clone().multiplyScalar(halfSizes[0] * x));
+            corner.add(axes[1].clone().multiplyScalar(halfSizes[1] * y));
+            corner.add(axes[2].clone().multiplyScalar(halfSizes[2] * z));
+            corners.push(corner);
+          }
+        }
+      }
+
+      const edgeIndices = [
+        [0, 1],
+        [0, 2],
+        [0, 4],
+        [1, 3],
+        [1, 5],
+        [2, 3],
+        [2, 6],
+        [3, 7],
+        [4, 5],
+        [4, 6],
+        [5, 7],
+        [6, 7],
+      ];
+      const positions = new Float32Array(edgeIndices.length * 2 * 3);
+      let offset = 0;
+      for (let i = 0; i < edgeIndices.length; i++) {
+        const start = corners[edgeIndices[i][0]];
+        const end = corners[edgeIndices[i][1]];
+        positions[offset++] = start.x;
+        positions[offset++] = start.y;
+        positions[offset++] = start.z;
+        positions[offset++] = end.x;
+        positions[offset++] = end.y;
+        positions[offset++] = end.z;
+      }
+
+      const geometry = new this.THREE.BufferGeometry();
+      geometry.setAttribute('position', new this.THREE.BufferAttribute(positions, 3));
+      const material = new this.THREE.LineBasicMaterial({
+        color,
+        transparent: true,
+        opacity: 0.95,
+        depthTest: false,
+        depthWrite: false,
+        toneMapped: false,
+      });
+      const lineSegments = new this.THREE.LineSegments(geometry, material);
+      lineSegments.renderOrder = 999;
+      lineSegments.userData.transformControlHelper = true;
+      lineSegments.userData.collisionObbDebugHelper = true;
+      return lineSegments;
+    },
+    _clearCollisionObbDebugGroup(removeGroup = false) {
+      const group = this.collisionObbDebugGroup;
+      if (!group) return;
+
+      while (group.children.length > 0) {
+        const child = group.children[group.children.length - 1];
+        group.remove(child);
+        if (child.geometry) child.geometry.dispose();
+        if (child.material) child.material.dispose();
+      }
+
+      if (removeGroup && this.scene && group.parent === this.scene) {
+        this.scene.remove(group);
+        this.collisionObbDebugGroup = null;
+      } else if (!this.scene) {
+        this.collisionObbDebugGroup = null;
+      }
+    },
+    hideCollisionObbDebug() {
+      this._clearCollisionObbDebugGroup();
+      this.collisionObbDebugEnabled = false;
+    },
+    _buildCollisionPairMap() {
+      const pairMap = new Map();
+      const collisionPairs = this.getOctreeCollisionPairs();
+      const pairs = collisionPairs && Array.isArray(collisionPairs.pairs) ? collisionPairs.pairs : [];
+      for (let i = 0; i < pairs.length; i++) {
+        const pair = pairs[i];
+        if (!pair) continue;
+        const idA = String(pair.idA);
+        const idB = String(pair.idB);
+        if (!idA || !idB) continue;
+        if (!pairMap.has(idA)) pairMap.set(idA, new Set());
+        if (!pairMap.has(idB)) pairMap.set(idB, new Set());
+        pairMap.get(idA).add(idB);
+        pairMap.get(idB).add(idA);
+      }
+      return pairMap;
+    },
+    refreshCollisionObbDebug() {
+      if (!this.collisionObbDebugEnabled) return;
+      const group = this._getCollisionDebugGroup();
+      if (!group) return;
+
+      this._clearCollisionObbDebugGroup(false);
+      const pairMap = this._buildCollisionPairMap();
+      if (pairMap.size === 0) return;
+
+      pairMap.forEach((relatedIds, modelId) => {
+        const box =
+          this._boxIndex && this._boxIndex.has(String(modelId))
+            ? this._boxIndex.get(String(modelId))
+            : this._boxIndex && this._boxIndex.has(modelId)
+            ? this._boxIndex.get(modelId)
+            : null;
+        if (!this._isCollisionBoxAvailable(box)) return;
+
+        const obbs = this._getCollisionObbs(box);
+        if (!obbs.length) return;
+
+        const isColliding = relatedIds && relatedIds.size > 0;
+        const color = isColliding ? 0xff3b30 : 0x36cfc9;
+        for (let i = 0; i < obbs.length; i++) {
+          const lineSegments = this._createCollisionObbLineSegments(obbs[i], color);
+          if (!lineSegments) continue;
+          lineSegments.name = `${COLLISION_DEBUG_GROUP_NAME}:${modelId}:${i}`;
+          lineSegments.userData.modelId = modelId;
+          lineSegments.userData.colliding = isColliding;
+          group.add(lineSegments);
+        }
+      });
+    },
+    showCollisionObbDebug() {
+      this.collisionObbDebugEnabled = true;
+      this.refreshCollisionObbDebug();
+    },
+    toggleCollisionObbDebug(forceVisible) {
+      const nextVisible =
+        typeof forceVisible === 'boolean' ? forceVisible : !this.collisionObbDebugEnabled;
+      if (nextVisible) {
+        this.showCollisionObbDebug();
+      } else {
+        this.hideCollisionObbDebug();
+      }
+    },
+    _getObbAxisInfo(obb) {
+      const xAxis = new this.THREE.Vector3();
+      const yAxis = new this.THREE.Vector3();
+      const zAxis = new this.THREE.Vector3();
+      obb.rotation.extractBasis(xAxis, yAxis, zAxis);
+      return {
+        center: obb.center,
+        halfSizes: [obb.halfSize.x, obb.halfSize.y, obb.halfSize.z],
+        axes: [xAxis, yAxis, zAxis],
+      };
+    },
+    _getObbProjectionRadius(axisInfo, axis) {
+      return (
+        axisInfo.halfSizes[0] * Math.abs(axis.dot(axisInfo.axes[0])) +
+        axisInfo.halfSizes[1] * Math.abs(axis.dot(axisInfo.axes[1])) +
+        axisInfo.halfSizes[2] * Math.abs(axis.dot(axisInfo.axes[2]))
+      );
+    },
+    _getObbMinPenetration(obbA, obbB) {
+      const axisInfoA = this._getObbAxisInfo(obbA);
+      const axisInfoB = this._getObbAxisInfo(obbB);
+      const centerDelta = new this.THREE.Vector3().subVectors(axisInfoB.center, axisInfoA.center);
+      let minPenetration = Infinity;
+
+      const testAxis = axis => {
+        const lengthSq = axis.lengthSq();
+        if (lengthSq <= COLLISION_OBB_AXIS_EPSILON) return true;
+
+        const normalizedAxis = axis.clone().multiplyScalar(1 / Math.sqrt(lengthSq));
+        const projectionDistance = Math.abs(centerDelta.dot(normalizedAxis));
+        const penetration =
+          this._getObbProjectionRadius(axisInfoA, normalizedAxis) +
+          this._getObbProjectionRadius(axisInfoB, normalizedAxis) -
+          projectionDistance;
+
+        if (penetration <= 0) {
+          minPenetration = penetration;
+          return false;
+        }
+        if (penetration < minPenetration) {
+          minPenetration = penetration;
+        }
+        return true;
+      };
+
+      for (let i = 0; i < 3; i++) {
+        if (!testAxis(axisInfoA.axes[i]) || !testAxis(axisInfoB.axes[i])) {
+          return minPenetration;
+        }
+      }
+
+      for (let i = 0; i < 3; i++) {
+        for (let j = 0; j < 3; j++) {
+          const crossAxis = axisInfoA.axes[i].clone().cross(axisInfoB.axes[j]);
+          if (!testAxis(crossAxis)) {
+            return minPenetration;
+          }
+        }
+      }
+
+      return minPenetration === Infinity ? 0 : minPenetration;
+    },
+    _isCollisionBoxMatched(boxA, boxB) {
+      if (!this._isCollisionAabbOverlapped(boxA, boxB)) return false;
+
+      const obbsA = this._getCollisionObbs(boxA);
+      const obbsB = this._getCollisionObbs(boxB);
+      for (let i = 0; i < obbsA.length; i++) {
+        for (let j = 0; j < obbsB.length; j++) {
+          if (this._getObbMinPenetration(obbsA[i], obbsB[j]) > COLLISION_PENETRATION_EPSILON) {
+            return true;
+          }
+        }
+      }
+      return false;
     },
     _queryOctreeByBox(box) {
       const results = [];
@@ -1773,7 +2079,7 @@ export default {
       const stack = [root];
       while (stack.length) {
         const node = stack.pop();
-        if (!node || !node.box || !this._isCollisionBoxMatched(node.box, box)) continue;
+        if (!node || !node.box || !this._isCollisionAabbOverlapped(node.box, box)) continue;
 
         if (node.children) {
           for (let i = 0; i < 8; i++) {
@@ -1784,7 +2090,7 @@ export default {
         if (node.items && node.items.length) {
           for (let i = 0; i < node.items.length; i++) {
             const item = node.items[i];
-            if (item && this._isCollisionBoxMatched(item.box, box)) {
+            if (item && this._isCollisionAabbOverlapped(item.box, box)) {
               results.push(item);
             }
           }
@@ -2303,6 +2609,10 @@ export default {
         for (let i = 0; i < hits.length; i++) {
           if (hits[i].box && hits[i].box.userData && hits[i].box.userData.visible === false)
             continue;
+          if (!this.shouldApplyOcclusionByBox(hits[i].box)) {
+            visibleIdSet.add(this.formatModelId(hits[i].modelId));
+            continue;
+          }
           candidates.push(hits[i]);
         }
       } else if (this._boxIndex && this._boxIndex.size > 0) {
@@ -2310,6 +2620,10 @@ export default {
           if (bypassList && bypassList.size > 0 && bypassList.has(modelId)) return;
           if (box.userData && box.userData.visible === false) return;
           if (this.isBoxInFrustum(box)) {
+            if (!this.shouldApplyOcclusionByBox(box)) {
+              visibleIdSet.add(this.formatModelId(modelId));
+              return;
+            }
             candidates.push({ modelId, box });
           }
         });
@@ -2985,6 +3299,16 @@ export default {
                 instanceInfo && typeof instanceInfo.instanceIndex === 'number'
                   ? instanceInfo.instanceIndex
                   : null;
+              const box =
+                this._boxIndex && this._boxIndex.has(String(modelId))
+                  ? this._boxIndex.get(String(modelId))
+                  : this._boxIndex && this._boxIndex.has(modelId)
+                  ? this._boxIndex.get(modelId)
+                  : null;
+              if (!this.shouldApplyOcclusionByBox(box)) {
+                allInactive = false;
+                continue;
+              }
 
               const inFrustum = this.isModelInFrustum(child, instanceIndex, globalFrustum);
               const modelInVisible = toLoadSet.has(modelId);
@@ -2998,6 +3322,18 @@ export default {
 
             // 第二遍遍历：同步状态并决定是否卸载
             for (const modelId of modelIds) {
+              const box =
+                this._boxIndex && this._boxIndex.has(String(modelId))
+                  ? this._boxIndex.get(String(modelId))
+                  : this._boxIndex && this._boxIndex.has(modelId)
+                  ? this._boxIndex.get(modelId)
+                  : null;
+              if (!this.shouldApplyOcclusionByBox(box)) {
+                if (toLoadSet.has(modelId)) {
+                  toLoadSet.delete(modelId);
+                }
+                continue;
+              }
               // 无论是否卸载，只要模型已在场景中，就从待加载集合中移除
               if (toLoadSet.has(modelId)) {
                 toLoadSet.delete(modelId);
@@ -3019,6 +3355,18 @@ export default {
             ? child.parent.userData.instanceId
             : child.uuid;
         if (bypassList && bypassList.size > 0 && bypassList.has(modelId)) return;
+        const box =
+          this._boxIndex && this._boxIndex.has(String(modelId))
+            ? this._boxIndex.get(String(modelId))
+            : this._boxIndex && this._boxIndex.has(modelId)
+            ? this._boxIndex.get(modelId)
+            : null;
+        if (!this.shouldApplyOcclusionByBox(box)) {
+          if (toLoadSet.has(modelId)) {
+            toLoadSet.delete(modelId);
+          }
+          return;
+        }
 
         const inFrustum = this.isModelInFrustum(child, null, globalFrustum);
         let modelInVisible = toLoadSet.has(modelId);
@@ -3814,6 +4162,7 @@ export default {
       this.skipNextRenderFrame = true;
 
       const intersects = this.getRaycasterObjects(event);
+      console.log(intersects);
       const shouldBlockCamera = intersects.some(item =>
         this.isActiveTransformControlIntersection(item)
       );
@@ -3821,6 +4170,9 @@ export default {
         this.setPointerCameraGuard(true);
       } else {
         this.setPointerCameraGuard(false);
+        if (event.button === 0) {
+          this.setOrbitPointByIntersection(this.getPrimaryIntersection(intersects));
+        }
       }
       this.firstTime = new Date().getTime();
       let params = {
@@ -3848,9 +4200,31 @@ export default {
       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)
-        : [];
+      if (this.scene && this.scene.children) {
+        let intersects = this.raycaster.intersectObjects(this.scene.children, true);
+        return intersects.filter(item => item.object.type === 'Mesh');
+      }
+      return [];
+    },
+    setOrbitPointByIntersection(intersection) {
+      if (
+        !intersection ||
+        !intersection.point ||
+        !this.cameraControls ||
+        typeof this.cameraControls.setOrbitPoint !== 'function'
+      ) {
+        return;
+      }
+      const { x, y, z } = intersection.point;
+      if (![x, y, z].every(Number.isFinite)) return;
+
+      // 左键旋转前先将旋转中心切到鼠标命中点，避免继续围绕默认目标点旋转。
+      this.cameraControls.setOrbitPoint(x, y, z);
+      this.cameraControls.update(0);
+    },
+    resetCameraFocalOffset(enableTransition = false) {
+      if (!this.cameraControls || typeof this.cameraControls.setFocalOffset !== 'function') return;
+      this.cameraControls.setFocalOffset(0, 0, 0, enableTransition);
     },
     isTransformControlIntersection(intersection) {
       let current = intersection && intersection.object ? intersection.object : null;
@@ -4269,6 +4643,7 @@ export default {
                 }
                 children.instanceMatrix.needsUpdate = true;
               });
+              this.refreshCollisionObbDebug();
               this.notifyCameraChange(); // 触发场景更新
               break;
             }
@@ -4298,6 +4673,23 @@ export default {
         this.buildOctreeFromBoxIndex();
       }
     },
+    safeTraverse(object, callback) {
+      const stack = [object];
+
+      while (stack.length > 0) {
+        const current = stack.pop();
+        if (!current) continue;
+
+        callback(current);
+
+        const children = Array.isArray(current.children) ? current.children : [];
+        for (let i = children.length - 1; i >= 0; i--) {
+          if (children[i]) {
+            stack.push(children[i]);
+          }
+        }
+      }
+    },
     setAllModelVisible(visible) {
       const isVisible = Boolean(visible);
       const matrixCache = new this.THREE.Matrix4();
@@ -4310,7 +4702,7 @@ export default {
       }
 
       if (this.scene) {
-        this.scene.traverse(child => {
+        this.safeTraverse(this.scene, child => {
           if (!child || !child.isInstancedMesh) return;
           const userData = child.userData || {};
           if (!(userData.instancesMap instanceof Map) || userData.instancesMap.size === 0) return;
@@ -4346,7 +4738,7 @@ export default {
           return nodeType === 'custom-root' || rootType === 'custom-root';
         });
         if (customRoot) {
-          customRoot.traverse(object => {
+          this.safeTraverse(customRoot, object => {
             object.visible = isVisible;
           });
         }
@@ -4356,6 +4748,7 @@ export default {
       if (this._boxIndex) {
         this.buildOctreeFromBoxIndex();
       }
+      this.refreshCollisionObbDebug();
     },
     showOutlinePass(instanceId) {
       let targetObj = this.getObjectByName(instanceId);
@@ -4502,6 +4895,7 @@ export default {
                   }
                   children.instanceMatrix.needsUpdate = true;
                 });
+                this.refreshCollisionObbDebug();
                 break;
               }
               case 'opacity':
@@ -4515,6 +4909,7 @@ export default {
                     children.geometry.attributes.opacity.needsUpdate = true;
                   }
                 });
+                break;
             }
           }
         }
@@ -4632,6 +5027,7 @@ export default {
       */
     cameraLocation(params) {
       const { enableTransition = true } = params;
+      this.resetCameraFocalOffset(enableTransition);
       this.cameraControls.setLookAt(
         params.x,
         params.y,
@@ -4668,15 +5064,15 @@ 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));
-      this.cameraControls.setLookAt(
-        cameraCenter.x,
-        cameraCenter.y,
-        cameraCenter.z,
-        center.x,
-        center.y,
-        center.z,
-        true
-      );
+      this.cameraLocation({
+        x: cameraCenter.x,
+        y: cameraCenter.y,
+        z: cameraCenter.z,
+        heading: center.x,
+        pitch: center.y,
+        roll: center.z,
+        enableTransition: true,
+      });
     },
     // 添加广告牌
     /*
@@ -4920,6 +5316,7 @@ export default {
         this.modelStateManager.debounceTimer = null;
       }
       this.clearBypassCullingModelIds();
+      this.hideCollisionObbDebug();
 
       if (this.scene) {
         this.removeTraverse();
@@ -5184,6 +5581,7 @@ export default {
       const nodeType = userData.nodeType || userData.rootType || '';
       if (nodeType === 'custom-root') return true;
       if (userData.transformControlHelper === true) return true;
+      if (userData.collisionObbDebugHelper === 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';