THREE.js中BoundingBox不随Group旋转的问题求助

你遇到的问题根源在于THREE.Box3默认计算的是轴对齐包围盒（AABB）——不管Group怎么旋转，setFromObject都会重新生成一个贴合当前物体的最小轴对齐矩形，所以视觉上看起来像是包围盒没跟着旋转，但实际上它只是换了个轴对齐的范围来包裹旋转后的Group。

如果需要包围盒跟着Group一起旋转（即有向包围盒OOBB），可以按以下方式修改代码：

解决方案代码 #

let group;
let originalLocalBox; // 保存Group局部空间的原始包围盒

createGroup() {
    // ... 你的元素创建逻辑
    group = new THREE.Group();
    group.add(elements);
 
    // 计算Group局部空间的包围盒（不应用任何世界变换）
    originalLocalBox = new THREE.Box3().setFromObject(group, false);

    scene.add(group);
}

rotateGroup() {
    group.rotation.x -= 0.1;
    updateRotatedBoundingBox();
}

updateRotatedBoundingBox() {
    // 更新Group的世界矩阵，确保变换是最新的
    group.updateMatrixWorld(true);
    const worldMatrix = group.matrixWorld;

    // 将局部空间的原始包围盒，通过Group的世界矩阵转换为世界空间的有向包围盒
    const rotatedBox = originalLocalBox.clone().applyMatrix4(worldMatrix);

    // 示例：渲染旋转后的包围盒（如果需要可视化）
    if (window.boxHelper) scene.remove(window.boxHelper);
    window.boxHelper = new THREE.Box3Helper(rotatedBox, 0xff0000);
    scene.add(window.boxHelper);

    // 后续可以用rotatedBox做碰撞检测等逻辑
}

关键说明 #

• setFromObject的第二个参数设为false：这样计算的是Group自身局部空间的包围盒，不会受旋转、平移等变换影响，保留原始的尺寸和方向。
• applyMatrix4(worldMatrix)：将局部空间的包围盒应用Group的世界变换（包含旋转、缩放、平移），得到在世界空间中跟随Group旋转的有向包围盒。
• 如果你只是需要轴对齐的包围盒，那你原来的代码其实是正确的——它确实更新了包围盒，只是因为轴对齐的特性，看起来和旋转前的形状不同而已。

内容的提问来源于stack exchange，提问作者senior_script