three.js 数学方法之Box3

郭先生今天说一说three.js的Box3方法（Box2是Box3的二维版本，可以参考Box3）。在线案例点击three.js 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只有三个属性。

1. .isBox3 -- 用于检测当前对象或者派生类对象是否是Box3。默认为 true。var box = new THREE.Box3().set(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2));//返回的包围盒和上面的包围盒相同2. setFromArray( array: ArrayLike<number> )设置包围盒的上下边界使得数组 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)); var newBox = new THREE.Box3().copy(box);9. makeEmpty()清空包围盒，下边界为( + Infinity, + Infinity, + Infinity )，上边界为( - Infinity, - Infinity, - Infinity )10. isEmpty()如果这个包围盒包含0个顶点，则返回true。注意，下界和上界相等的方框仍然包含一个点，即两个边界共享的那个点。 这个方法比较有意思，可以判断包围盒是否为空，体会下面的代码new THREE.Box3(new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0)).isEmpty()//返回false new THREE.Box3(new THREE.Vector3(0,0,0), new THREE.Vector3(-1,0,0)).isEmpty()//返回true正常情况下包围盒的上边界都是大于等于下边界的，如果某一个维度的上边界小于下边界那么这个包围盒就是空盒子11. getCenter( target: Vector3 )返回包围盒的中心点 Vector3。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); box.getCenter()/返回中心点Vector3 {x: 0, y: 0, z: 0}12. getSize( target: Vector3 )返回包围盒的宽度，高度，和深度。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); box.getSize()/返回包围盒的宽度，高度，和深度Vector3 {x: 4, y: 4, z: 4}13. expandByPoint( point: Vector3 )扩展这个包围盒的边界使得该点（point）在包围盒内。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); box.expandByPoint(new THREE.Vector3(4,0,0)).getCenter()//中心点已不是Vector3(0,0,0)，而是Vector3(1,0,0)通过Vector3(3,0,0)这个点扩展了原本的包围盒14. expandByVector( vector: Vector3 )按 vector 每个纬度的值展开这个箱子。 这个盒子的宽度将由 vector 的x分量在两个方向上展开。 这个盒子的高度将由 vector 两个方向上的y分量展开。 这个盒子的深度将由 vector z分量在两个方向上展开。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); box.expandByVector(new THREE.Vector3(0,1,2)).getSize()//新的包围盒size已变成Vector3 {x: 4, y: 6, z: 8}15. expandByScalar( scalar: number )按 scalar 的值展开盒子的每个维度。如果是负数，盒子的尺寸会缩小。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); box.expandByVector(1).getSize()//新的包围盒size已变成Vector3 {x: 6, y: 6, z: 6}16. expandByObject( object: Object3D )扩展此包围盒的边界，使得对象及其子对象在包围盒内，包括对象和子对象的世界坐标的变换。var boxObject = new THREE.Mesh( new THREE.BoxGeometry(2,2,2), new THREE.MeshBasicMaterial({ color: 0xffaa00 }) ); boxObject.position.set(2,0,0);//或者boxObject.geometry.translate(2,0,0) var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); box.expandByObject(boxObject);17. containsPoint( point: Vector3 )当传入的值 point 在包围盒内部或者边界都会返回true。这是个比较有用的方法var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); var point1 = new THREE.Vector3(1,2,2); var point2 = new THREE.Vector3(2,2,2); var point3 = new THREE.Vector3(3,2,2); box.containsPoint(point1)//返回true box.containsPoint(point2)//返回true box.containsPoint(point3)//返回false18. containsBox( box: Box3 )传入的 box 整体都被包含在该对象中则返回true。如果他们两个包围盒是一样的也返回true。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); var box1 = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(1,2,2)); var box2 = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); var box3 = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(3,2,2)); console.log(box.containsBox(box1))//返回true console.log(box.containsBox(box2))//返回true console.log(box.containsBox(box3))//返回false19. getParameter( point: Vector3 )返回一个点为这个盒子的宽度和高度的比例。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); console.log(box.getParameter(new THREE.Vector3(0,0,0),new THREE.Vector3()))//返回Vector3 {x: 0.5, y: 0.5, z: 0.5} console.log(box.getParameter(new THREE.Vector3(1,0,0),new THREE.Vector3()))//返回Vector3 {x: 0.75, y: 0.5, z: 0.5} console.log(box.getParameter(new THREE.Vector3(2,0,0),new THREE.Vector3()))//返回Vector3 {x: 1, y: 0.5, z: 0.5} console.log(box.getParameter(new THREE.Vector3(3,0,0),new THREE.Vector3()))//返回Vector3 {x: 1.25, y: 0.5, z: 0.5}这里我们只观察x方向，第一个输出x=0，刚好在包围盒的中心点，所以返回了0.5,第三个输出x=2刚好在包围盒的上边界，所以返回1，也就是100%，当然超过上边界就大于1（100%），低于下边界就小于0（0%）。20. intersectsBox( box: Box3 )确定当前包围盒是否与传入包围盒box 相交。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); var box1 = new THREE.Box3(new THREE.Vector3(2,2,2), new THREE.Vector3(4,4,4)); var box2 = new THREE.Box3(new THREE.Vector3(3,2,2), new THREE.Vector3(4,4,4)); console.log(box.intersectsBox(box1))//box与box1相交，边界相交也算相交 console.log(box.intersectsBox(box2))//box与box2不想交，21. intersectsSphere( sphere: Sphere )确定当前包围盒是否与球体 sphere 相交。 这个球体和包围和一样，都是一个3D空间。由一个中心点和半径构成，和包围盒十分类似，这里就不多赘述。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); var sphere1 = new THREE.Sphere(new THREE.Vector3(4,2,2), 1); var sphere2 = new THREE.Sphere(new THREE.Vector3(4,2,2), 2); var sphere3 = new THREE.Sphere(new THREE.Vector3(4,2,2), 3); console.log(box.intersectsSphere(sphere1))//返回false console.log(box.intersectsSphere(sphere2))//返回true console.log(box.intersectsSphere(sphere3))//返回true这里可以看出，他们的边界相交也算相交。22. intersectsPlane( plane: Plane )检测这个球与所传入的plane是否有交集。这个plane是在三维空间中无限延伸的二维平面，平面方程用单位长度的法向量和常数表示为海塞法向量Hessian normal form形式。它的构造器有两个参数，第一个是normal - (可选参数) 定义单位长度的平面法向量Vector3。默认值为 (1, 0, 0)。第二个是constant - (可选参数) 从原点到平面的有符号距离。 默认值为 0。这个plane我们日后还会讲。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); var plane1 = new THREE.Plane(new THREE.Vector3(1,0,0), 1) var plane2 = new THREE.Plane(new THREE.Vector3(1,0,0), 2) var plane3 = new THREE.Plane(new THREE.Vector3(1,0,0), 3) console.log(box.intersectsPlane(plane1))//返回true console.log(box.intersectsPlane(plane2))//返回true console.log(box.intersectsPlane(plane3))//返回false这里要注意平面的第二个参数是有符号的距离，所以代码中的三个平面都是在x轴的负半轴。23. intersectsTriangle( triangle: Triangle )确定当前包围盒是否与三角形 triangle 相交。这个三角同样是一个数学库，这里也不先说var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); var triangle1 = new THREE.Triangle(new THREE.Vector3(1,-1,1),new THREE.Vector3(1,-1,-1),new THREE.Vector3(1,0,1)) var triangle2 = new THREE.Triangle(new THREE.Vector3(2,-1,1),new THREE.Vector3(2,-1,-1),new THREE.Vector3(2,0,1)) var triangle3 = new THREE.Triangle(new THREE.Vector3(3,-1,1),new THREE.Vector3(3,-1,-1),new THREE.Vector3(3,0,1)) console.log(box.intersectsTriangle(triangle1))//返回true console.log(box.intersectsTriangle(triangle2))//返回true console.log(box.intersectsTriangle(triangle3))//返回false24. clampPoint( point: Vector3, target: Vector3 )是这个点point Clamps(处于范围内) 处于包围盒边界范围内，如果我们传一个target，那么新点就会复制到target上。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); console.log(box.clampPoint(new THREE.Vector3(3,0,0),new THREE.Vector3()))//这里返回Vector3 {x: 2, y: 0, z: 0} console.log(box.clampPoint(new THREE.Vector3(3,3,3),new THREE.Vector3()))//这里返回Vector3 {x: 2, y: 2, z: 2}这个结果可以知道，包围盒的这个方法把传入的任意点都转化成包围盒边界上或者包围盒内的点，如何点的某个维度不在包围盒中，那么这个维度就返回包围盒这个维度的边界的最大值或最小值。25. distanceToPoint( point: Vector3 )返回这个box的任何边缘到指定点的距离。如果这个点位于这个盒子里，距离将是0。这是个比较好的方法。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); console.log(box.distanceToPoint(new THREE.Vector3(2,2,2)))//返回0，因为在边界上 console.log(box.distanceToPoint(new THREE.Vector3(3,3,3)))//返回1.732（根号3），因为离这个点最近的点是new THREE.Vector3(2,2,2。26. getBoundingSphere( target: Sphere )通过包围盒获取包围球。得到的包围球刚好包围包围盒var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); box.getBoundingSphere(new THREE.Sphere())//center: Vector3 {x: 0, y: 0, z: 0},radius: 3.4641016151377544中心就是包围盒的中心，半径就是中心到一个顶点的距离。27. intersect( box: Box3 )返回此包围盒和 box 的交集，将此框的上界设置为两个框的max的较小部分， 将此包围盒的下界设置为两个包围盒的min的较大部分。var box1 = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); var box2 = new THREE.Box3(new THREE.Vector3(0,0,0), new THREE.Vector3(4,4,4)); console.log(box1.intersect(box2))//返回max: Vector3 {x: 2, y: 2, z: 2}，min: Vector3 {x: 0, y: 0, z: 0}28. union( box: Box3 )在 box 参数的上边界和已有box对象的上边界之间取较大者，而对两者的下边界取较小者，这样获得一个新的较大的联合盒子。var box1 = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); var box2 = new THREE.Box3(new THREE.Vector3(0,0,0), new THREE.Vector3(4,4,4)); console.log(box1.union(box2))//返回max: Vector3 {x: 4, y: 4, z: 4}，min: Vector3 {x: -2, y: -2, z: -2}29. applyMatrix4( matrix: Matrix4 )使用传入的矩阵变换Box3（包围盒8个顶点都会乘以这个变换矩阵）var matrix4 = new THREE.Matrix4().makeScale(0,1,2);//得到一个缩放矩阵 var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); box.applyMatrix4(matrix4);//包围盒应用矩阵，返回max: Vector3 {x: 0, y: 2, z: 4} min: Vector3 {x: 0, y: -2, z: -4}30. translate( offset: Vector3 )给包围盒的上下边界添加偏移量 offset，这样可以有效的在3D空间中移动包围盒。 偏移量为 offset 大小。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); box.translate(new THREE.Vector3(1,0,0))//返回max: Vector3 {x: 3, y: 2, z: 2}，min: Vector3 {x: -1, y: -2, z: -2}31. equals( box: Box3 )如果矩阵m 与当前矩阵所有对应元素相同则返回true。var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)); var box1 = box.clone(); box.equals(box1)//box和它克隆的包围盒相等。这是Box3的全部方法了。3. Box3的应用案例这里有两个相对运动的网格，我们来判断他们的相对位置，如下图。
2. .min -- Vector3 表示包围盒的(x, y, z)下边界。默认值是( + Infinity, + Infinity, + Infinity )。
3. .max -- Vector3 表示包围盒的(x, y, z)上边界。默认值是( - Infinity, - Infinity, - Infinity )。2. Box3的方法1. set( min: Vector3, max: Vector3 )这个比较简单，就是设置包围盒的上下边界

下面是主要代码

setBox3() {
    var boxGeometry = new THREE.BoxGeometry(30, 30, 30);
    var sphereGoemetry = new THREE.SphereGeometry(3, 30, 20);
    var sphereMaterial = new THREE.MeshBasicMaterial();
    box = this.setMaterial(boxGeometry, 0x0000ff);//先生成一个立方体网格
    box3 = new THREE.Box3().setFromObject(box);//根据几何体生成包围盒
    sphere = new THREE.Mesh(sphereGoemetry, sphereMaterial);//在生成一个球形网格
    scene.add(box);//添加到场景
    scene.add(sphere);//添加到场景

    this.render();
},
render() {
		//让球动起来
    sphere.position.y = Math.sin(time) * 16 + 8;
    sphere.position.x = Math.cos(time) * 16 + 8;
    time = time + 0.02;
    sphereBox3 = new THREE.Box3().setFromObject(sphere);//动态生成球的包围盒（这里用了包围盒，没有用包围球，边边角角有些出入，不影响大体效果）
    if(box3.containsBox(sphereBox3)) {
				//如果box3包含sphereBox3
        sphere.material.color = new THREE.Color(0x00ff00);
    } else if(box3.intersectsBox(sphereBox3)) {
				//如果box3交于sphereBox3
        sphere.material.color = new THREE.Color(0xff00ff);
    } else {
				//如果sphereBox3在box3之外
        sphere.material.color = new THREE.Color(0xffaa00);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(this.render);
}

转载请注明地址：郭先生的博客