three.js 数学方法之Box3

从今天开始郭先生就会说一下three.js 的一些数学方法了，像Box3、Plane、Vector3、Matrix3、Matrix4当然还有欧拉角和四元数。今天说一说three.js的Box3方法（Box2是Box3的二维版本，可以参考Box3）。在线案例点击博客原文。

Box3在3D空间中表示一个包围盒。其主要用于表示物体在世界坐标中的边界框。它方便我们判断物体和物体、物体和平面、物体和点的关系等等。
构造器参数Box3( min : Vector3, max : Vector3 )，其参数为两个三维向量，第一个向量为Box3在3D空间中各个维度的最小值，第二个参数为Box3在3D空间中各个维度的最大值，代码如下。

var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2));
这个box就表示3D空间中中心点在(0,0,0)，长宽高为4的包围盒。
下面我们十分详细的说说他的属性和方法。

1. Box3的属性
   Box3只有三个属性。

isBox3 – 用于检测当前对象或者派生类对象是否是Box3。默认为 true。
.min – Vector3 表示包围盒的(x, y, z)下边界。默认值是( + Infinity, + Infinity, + Infinity )。
.max – Vector3 表示包围盒的(x, y, z)上边界。默认值是( - Infinity, - Infinity, - Infinity )。
2. Box3的方法

1. set( min: Vector3, max: Vector3 )
   这个比较简单，就是设置包围盒的上下边界

var box = new THREE.Box3().set(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2));//返回的包围盒和上面的包围盒相同
2. setFromArray( array: ArrayLike )
设置包围盒的上下边界使得数组 array 中的所有点的点都被包含在内

var box = new THREE.Box3().setFromArray([-2,-2,-2,2,2,2]);//返回的包围盒和上面的包围盒相同
3. setFromBufferAttribute( bufferAttribute: BufferAttribute )
设置此包围盒的上边界和下边界，以包含 attribute 中的所有位置数据，使用方法如下

var typedArray= new Float32Array(3*2);
var array = [-2,-2,-2,2,2,2];
array.forEach((d,i)=>typedArray[i] = d);
var bufferAttribute = new THREE.BufferAttribute(typedArray,3);
var box = new THREE.Box3().setFromBufferAttribute(bufferAttribute);
这里注意BufferAttribute的第一个参数是一个类型化数组，这个放到以后再说。

4. setFromPoints( points: Vector3[] )
   设置此包围盒的上边界和下边界，以包含数组 points 中的所有点。

var box = new THREE.Box3().setFromPoints([new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)]);//返回的包围盒和上面的包围盒相同
5. setFromCenterAndSize( center: Vector3, size: Vector3 )
将当前包围盒的中心点设置为 center ，并将此包围盒的宽度，高度和深度设置为大小指定 size 的值。

var box = new THREE.Box3().setFromCenterAndSize(new THREE.Vector3(0,0,0), new THREE.Vector3(4,4,4))//返回的包围盒和上面的包围盒相同
6. setFromObject( object: Object3D )
计算和世界轴对齐的一个对象 Object3D （含其子对象）的包围盒，计算对象和子对象的世界坐标变换。

var boxObject = new THREE.Mesh( new THREE.BoxGeometry(5, 5, 5), new THREE.MeshBasicMaterial({ color: 0xffaa00 }) );
var box = new THREE.Box3().setFromObject(boxObject);
把正方体网格作为参数，实际上是根据geometry.vertices的Vector3点集和computeBoundingBox()方法计算的。

7. clone()
   返回一个与该包围盒子有相同下边界min 和上边界 max的新包围盒代码如下

var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); var newBox = box.clone();
8. copy( box: Box3 )
将传入的值 box 中的 min 和 max 拷贝到当前对象。

var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2))