Three.js：基于已知顶点创建点云包围盒的技术疑问

嘿，我完全懂你的困惑——Three.js的BoxGeometry确实有点反直觉，它默认从原点生成盒子，只给宽高深的话，根本没法直接对应你手里那两个对角顶点的位置。不过你提到的Box3其实就是解开这个问题的钥匙，咱们可以用它来帮我们生成精准定位的可视化包围盒。

下面是一步步的实现方法：

• 首先，用你已经有的两个对角顶点（假设是mn最小点和mx最大点，都是THREE.Vector3实例）创建Box3对象，它会帮你计算出包围盒的所有关键信息：

  const boundingBox = new THREE.Box3(mn, mx);
  

• 接下来从Box3里提取我们需要的尺寸和中心位置：

  // 获取包围盒的宽、高、深
  const boxSize = new THREE.Vector3();
  boundingBox.getSize(boxSize);
  
  // 获取包围盒的中心点坐标
  const boxCenter = new THREE.Vector3();
  boundingBox.getCenter(boxCenter);
  

• 然后创建BoxGeometry和对应的网格，把网格的位置设置到刚才获取的中心点上——这一步就是让盒子从原点“挪”到你要的位置：

  // 用获取到的尺寸创建几何体
  const boxGeometry = new THREE.BoxGeometry(boxSize.x, boxSize.y, boxSize.z);
  // 这里用线框材质方便看清楚包围盒，你可以换成自己需要的材质
  const boxMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
  // 创建网格对象
  const boundingBoxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
  
  // 把网格定位到包围盒的中心
  boundingBoxMesh.position.copy(boxCenter);
  
  // 最后添加到场景里就行
  scene.add(boundingBoxMesh);
  

还要提醒你一下，你之前写的MeshBasicMateri是拼写错误，正确的是MeshBasicMaterial，别踩这个小坑～

另外补充一句：如果只是需要做碰撞检测、空间查询这类逻辑操作，直接用Box3就足够了，不用转成可视化的Mesh；只有当你需要在场景里看到这个包围盒的时候，才需要上面的步骤把它转成网格对象。

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