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

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

@@ -165,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',
@@ -213,6 +215,7 @@ export default {
         isPaused: false,
       },
       isolateMode: false,
+      collisionObbDebugEnabled: true,
     };
   },
   watch: {
@@ -254,6 +257,7 @@ export default {
       'centeringDebounceTimer',
       'sceneBoundingBox',
       'sceneBoundingBoxHelper',
+      'collisionObbDebugGroup',
     ];
     arr.forEach(item => {
       this[item] = null;
@@ -274,6 +278,7 @@ export default {
       'needsCenteringAfterInteraction',
       'isDragging',
       'boundingBoxVisible',
+      'collisionObbDebugEnabled',
     ].forEach(item => {
       this[item] = false;
     });
@@ -1551,12 +1556,14 @@ 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) {
@@ -1573,10 +1580,12 @@ export default {
             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 = {
@@ -1619,18 +1628,43 @@ export default {
               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;
@@ -1655,6 +1689,7 @@ export default {
         }
       }
       this.buildOctreeFromBoxIndex();
+      this.refreshCollisionObbDebug();
       console.log('time end', Date.now());
     },
     shouldApplyOcclusionByBox(box) {
@@ -1780,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 = [];
@@ -1800,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++) {
@@ -1811,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);
             }
           }
@@ -3891,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 = {
@@ -3924,6 +4206,26 @@ export default {
       }
       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;
       while (current) {
@@ -4341,6 +4643,7 @@ export default {
                 }
                 children.instanceMatrix.needsUpdate = true;
               });
+              this.refreshCollisionObbDebug();
               this.notifyCameraChange(); // 触发场景更新
               break;
             }
@@ -4445,6 +4748,7 @@ export default {
       if (this._boxIndex) {
         this.buildOctreeFromBoxIndex();
       }
+      this.refreshCollisionObbDebug();
     },
     showOutlinePass(instanceId) {
       let targetObj = this.getObjectByName(instanceId);
@@ -4591,6 +4895,7 @@ export default {
                   }
                   children.instanceMatrix.needsUpdate = true;
                 });
+                this.refreshCollisionObbDebug();
                 break;
               }
               case 'opacity':
@@ -4604,6 +4909,7 @@ export default {
                     children.geometry.attributes.opacity.needsUpdate = true;
                   }
                 });
+                break;
             }
           }
         }
@@ -4721,6 +5027,7 @@ export default {
       */
     cameraLocation(params) {
       const { enableTransition = true } = params;
+      this.resetCameraFocalOffset(enableTransition);
       this.cameraControls.setLookAt(
         params.x,
         params.y,
@@ -4757,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,
+      });
     },
     // 添加广告牌
     /*
@@ -5009,6 +5316,7 @@ export default {
         this.modelStateManager.debounceTimer = null;
       }
       this.clearBypassCullingModelIds();
+      this.hideCollisionObbDebug();
 
       if (this.scene) {
         this.removeTraverse();
@@ -5273,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';