Three.js 包围盒 Box3

Question

包围盒 是一种计算一系列顶点最优包围空间的算法，比如一个不规则几何体的所有顶点坐标都被包围在一个最小的长方体盒子中，需要一个算法来求解这个最小的长方体包围盒。Three.js封装与包围盒算法相关的三个 API，分别是三维包围盒 Box3、包围球 Sphere、包围矩形 Box2。

包围矩形 Box2

包围矩形对象Box2表示一个矩形区域，使用min和max两个属性来描述该矩形区域，属性值都是二维向量对象Vector2，通过Box2的构造函数可以直接设置min和max属性值，也可以通过Box2的一些方法来设置。

描述一个矩形区域需要通过xy坐标来表示，X范围[Xmin,Xmax],Y范围[Ymin,Ymax],.min属性值是Vector2(Xmin, Ymin),.max属性值是Vector2(Xmax, Ymax)。

通过参数设置min和max属性

// 参数1对应min属性值，参数2对应max属性值
var box2 = new THREE.Box2(new THREE.Vector2(0, 0), new THREE.Vector2(25, 25))
console.log('box2',box2);
box2.min=new THREE.Vector2(0, 0);
box2.max=new THREE.Vector2(25, 25);

设置min和max属性值

box2.min=new THREE.Vector2(0, 0);
box2.max=new THREE.Vector2(25, 25);

包围盒 Box3

包围盒Box3表示三维长方体包围区域，使用min和max两个属性来描述该包围区域，Box3的min和max属性值都是三维向量对象Vector3。

描述一个长方体包围盒需要通过xyz坐标来表示，X范围[Xmin,Xmax],Y范围[Ymin,Ymax],Z范围[Zmin,Zmax],.min属性值是Vector3(Xmin, Ymin, Zmin),.max属性值是Vector3(Xmax, Ymax, Zmin).

var box3 = new THREE.Box3()
console.log('box3',box3);
box3.min = new THREE.Vector3(-10, -10,0);
box3.max = new THREE.Vector3(100, 20,50);

包围球 Sphere

包围球Sphere是一个球形的包围区域，通过球心坐标.center和半径.radius两个属性来描述.

// 创建一个包围球对象，球心默认坐标原点，半径默认0.
var sphere = new THREE.Sphere()
console.log('sphere', sphere);
// 设置球心坐标
sphere.center=new THREE.Vector3(-10, -10,0);
// 设置包围球半径
sphere.radius=20;

Box3 方法 .setFromPoints()

包围盒Box3方法.setFromPoints()用来计算一系列顶点集合的最小包围盒，参数是表示顶点坐标的三维向量Vector3作为元素构成的数组对象。

// 通过球体API创建一个几何体，本质上就是一系列沿着球面分布的顶点
var geometry = new THREE.SphereGeometry(50, 100, 100);
// 创建一个包围盒对象Box3
var box3 = new THREE.Box3()
// 计算点集geometry.vertices的包围盒
box3.setFromPoints(geometry.vertices);
console.log('box3', box3);

几何体方法 .computeBoundingBox()

几何体Geometry调用Box3的方法.setFromPoints()封装了一个方法.computeBoundingBox()，用来计算几何体的包围盒属性.boundingBox。

几何体包围盒属性.boundingBox默认值为空null，执行.computeBoundingBox()方法才会计算该几何体的包围盒Box3，然后赋值给.boundingBox属性。

几何体包围球属性.boundingSphere使用方式和包围盒属性.boundingBox一样。

var geometry = new THREE.SphereGeometry(50, 100, 100); //球体
// .computeBoundingBox()方法计算.boundingBox的属性值
geometry.computeBoundingBox();
console.log('包围盒属性', geometry.boundingBox);
// 包围球相关属性和计算方法和包围盒一样
geometry.computeBoundingSphere();
console.log('包围球属性', geometry.boundingSphere);

几何体居中方法center()

在空间坐标系中把几何体居中，也就是几何体对应的包围盒中心平移到坐标原点。

// 几何体的中心默认与坐标原点重合
var geometry = new THREE.BoxGeometry(50, 50, 50);
// 几何体沿着x轴平移50，几何体的顶点坐标变化
geometry.translate(50, 0, 0);
// 居中：偏移的几何体居中
geometry.center();

Box3 方法 .expandByObject()

获得层级模型的包围盒，一个层级模型可能包含多个子孙后代，具体点说，比如一个Group对象有多个网格模型Mesh作为子对象。

加载一个层级模型，并计算它的包围盒

var loader = new THREE.ObjectLoader();
loader.load('group.json', function(group) {
  scene.add(group);//加载返回的模型对象插入场景
  var box3 = new THREE.Box3()
  // 计算层级模型group包围盒
  box3.expandByObject(group)
  console.log('查看包围盒box3', box3);
})

Box3 方法 .expandByScalar()

包围盒整体尺寸放大

// 缩放包围盒，尺寸放大1.5倍
box3.expandByScalar(1.5)

Box3 方法 .getSize()

返回包围盒具体的长宽高尺寸

var v3 = new THREE.Vector3()
// 获得包围盒长宽高尺寸，结果保存在参数三维向量对象v3中
box3.getSize(v3)
console.log('查看返回的包围盒尺寸', v3);

Box3 方法 .getCenter()

计算返回包围盒几何中心

// 计算一个层级模型对应包围盒的几何体中心
var center = new THREE.Vector3()
box3.getCenter(center)
console.log('查看几何体中心坐标', center);

Sphere 方法 .getBoundingSphere()

包围盒Box3和包围球Sphere可以相互等价转化，通过包围盒对象来计算包围球对象

var sphere = new THREE.Sphere()
// 计算包围盒box3对应的包围球
box3.getBoundingSphere(sphere)
console.log('查看通过box3重置的sphere', sphere);