如何使用three.min.js为3D物体创建包围盒并随其旋转

嘿，我来帮你把Three.js里的包围盒问题讲明白，刚好你问的两个场景我都熟，一步步给你拆解：

1. 为单个物体创建基础轴对齐包围盒（AABB） #

Three.js自带的Box3类就是用来处理轴对齐包围盒的，操作超简单，几步就能搞定：

• 首先创建你的目标3D物体（这里以立方体为例）：

// 创建立方体
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

• 生成包围盒：用Box3的setFromObject()方法，直接从物体计算包围范围——这个方法会自动考虑物体的位移、缩放，甚至子物体的范围（如果有的话）：

const boundingBox = new THREE.Box3();
boundingBox.setFromObject(cube);

• 可视化包围盒（可选）：如果需要看到这个包围盒，用Box3Helper就能生成一个红色的线框：

const boxHelper = new THREE.Box3Helper(boundingBox, 0xff0000);
scene.add(boxHelper);

注意：这种轴对齐包围盒（AABB）始终和世界坐标轴平行，哪怕物体旋转了，包围盒也只会扩大范围来包裹物体，不会跟着旋转。

2. 创建随物体旋转的定向包围盒（OBB） #

如果想要包围盒完全跟着物体旋转、保持和物体一致的姿态，那我们需要的是定向包围盒（OBB）。Three.js没有原生的OBB类，但可以通过物体的变换矩阵来实现，两种方法任你选：

方法一：用Box3Helper绑定物体矩阵 #

这是最简单的实现方式，核心是让Helper继承物体的世界变换矩阵：

1. 先获取物体的局部包围盒（也就是物体自身未做任何变换时的原始包围范围）：

const localBox = new THREE.Box3().setFromObject(cube);

2. 创建Helper并绑定物体的矩阵：

const obbHelper = new THREE.Box3Helper(localBox, 0x0000ff);
// 复制物体的世界矩阵，让Helper跟着物体变换
obbHelper.matrix.copy(cube.matrixWorld);
// 关闭Helper的自动矩阵更新，避免覆盖我们设置的矩阵
obbHelper.matrixAutoUpdate = false;
scene.add(obbHelper);

3. 动画中更新矩阵：如果物体有旋转、移动的动画，要在每一帧同步Helper的矩阵：

function animate() {
  requestAnimationFrame(animate);
  // 让立方体旋转
  cube.rotation.y += 0.01;
  // 同步Helper的矩阵
  obbHelper.matrix.copy(cube.matrixWorld);
  obbHelper.updateMatrixWorld();
  // 渲染场景
  renderer.render(scene, camera);
}
animate();

方法二：自定义线框实现OBB #

如果需要更灵活的控制（比如修改线框样式、添加交互），可以手动生成包围盒的线框：

1. 获取局部包围盒的8个顶点：

const localBox = new THREE.Box3().setFromObject(cube);
const vertices = [];
localBox.getCorners(vertices); // 把8个顶点存入数组

2. 创建线框几何体：定义顶点和连线的索引：

const obbGeometry = new THREE.BufferGeometry().setFromPoints(vertices);
// 定义线框的连接顺序（把8个顶点连成12条边）
const indices = [
  0,1, 1,2, 2,3, 3,0, // 底部四边
  4,5, 5,6, 6,7, 7,4, // 顶部四边
  0,4, 1,5, 2,6, 3,7  // 侧边四边
];
obbGeometry.setIndex(indices);

3. 创建线框并绑定物体矩阵：

const obbLine = new THREE.LineSegments(obbGeometry, new THREE.LineBasicMaterial({ color: 0x0000ff }));
obbLine.matrix.copy(cube.matrixWorld);
obbLine.matrixAutoUpdate = false;
scene.add(obbLine);

4. 动画中同步矩阵（和方法一一样）：

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.y += 0.01;
  obbLine.matrix.copy(cube.matrixWorld);
  obbLine.updateMatrixWorld();
  renderer.render(scene, camera);
}
animate();

这样实现的OBB就会完全跟着物体旋转、缩放，和物体保持完美的姿态同步啦～

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