# 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));`

## 1. Box3的属性

Box3只有三个属性。

1. isBox3 – 用于检测当前对象或者派生类对象是否是Box3。默认为 true。
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 )

`var box = new THREE.Box3().set(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2));//返回的包围盒和上面的包围盒相同`

### 2. setFromArray( array: ArrayLike )

`var box = new THREE.Box3().setFromArray([-2,-2,-2,2,2,2]);//返回的包围盒和上面的包围盒相同`

### 3. setFromBufferAttribute( bufferAttribute: BufferAttribute )

```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);```

### 4. setFromPoints( points: Vector3[] )

`var box = new THREE.Box3().setFromPoints([new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2)]);//返回的包围盒和上面的包围盒相同`

### 5. setFromCenterAndSize( center: Vector3, size: Vector3 )

`var box = new THREE.Box3().setFromCenterAndSize(new THREE.Vector3(0,0,0), new THREE.Vector3(4,4,4))//返回的包围盒和上面的包围盒相同`

### 6. setFromObject( object: Object3D )

```var boxObject = new THREE.Mesh( new THREE.BoxGeometry(5, 5, 5), new THREE.MeshBasicMaterial({ color: 0xffaa00 }) );
var box = new THREE.Box3().setFromObject(boxObject);```

### 7. clone()

`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 )

```var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2));
var newBox = new THREE.Box3().copy(box);```

### 10. isEmpty()

`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 )

```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 )

```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)```

### 14. expandByVector( vector: Vector3 )

```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 )

```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 )

```var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2));
var point1 =www.chuancenpt.com new THREE.Vector3(1,2,2);
var point2 = www.jintianxuesha.com new THREE.Vector3(2,2,2);
var point3 =www.jinliyld.cn  new THREE.Vector3(3,2,2);
box.containsPoint(point1)//返回true box.containsPoint(point2)//返回true box.containsPoint(point3)//返回false```

### 18. containsBox( box: Box3 )

```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))/www.yachengyl.cn /返回true
console.log(box.containsBox(box2)) www.tengyao3zc.cn//返回true
console.log(box.containsBox(box3)) www.shentuylgw.cn//返回false```

### 19. 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(www.jujinyule.com 0,0,0),new THREE.Vector3()))//返回Vector3 {x: 0.5, y: 0.5, z: 0.5};
console.log(box.getParameter(new THREE.Vector3(www.zhuyngyule.cn 1,0,0),new THREE.Vector3()))//返回Vector3 {x: 0.75, y: 0.5, z: 0.5}
console.log(box.getParameter(new THREE.Vector3(www.ued3zc.cn 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}```

### 20. intersectsBox( box: Box3 )

```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 )

```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 )

```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```

### 23. intersectsTriangle( 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))//返回false```

### 24. clampPoint( point: Vector3, target: Vector3 )

```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 )

```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 )

```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 )

```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 )

```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 )

```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 )

```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和它克隆的包围盒相等。```

## 3. Box3的应用案例

```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);//在生成一个球形网格

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);```

0 条评论

• ### 如何用Deeplearning4j实现GAN

1、求解一个Discriminator，可以最大尺度的丈量Generator 产生的数据和真实数据之间的分布距离

• ### 宇智波程序笔记10-为什么你使用的 Spring Security OAuth 过期了

那么到底选择哪一个依赖合适呢？这不同的依赖又有什么区别？今天松哥就来和大家聊一聊 Spring Security 中关于 OAuth2 的恩怨。

• ### Charles 从入门到精通

Charles 是目前最主流的网络调试工具（Charles、Fiddler、Wireshark...）之一，对于一个开发者来说与网络打交道是日常需求，因此很多时...

• ### three.js 数学方法之Box3

郭先生今天说一说three.js的Box3方法（Box2是Box3的二维版本，可以参考Box3）。在线案例点击three.js Box3。

• ### three.js 对象绕任意轴旋转--模拟门转动

今天郭先生说说对象如何绕任意轴旋转。说一说其中一种方法，也是比较容易理解的一种，它的原理就是将子对象放到一个盒子中，然后改变子对象相对于父对象的位置（因为子对象...

• ### 【CCF】数位之和

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 ...

• ### Hystrix：HystrixCollapser请求合并

偶尔在spring4all，看到DiDi关于hystrix请求合并的一篇文章 Spring Cloud Hystrix的请求合并，查阅资料又整理了一下。 具体业...

• ### 科学知识的攻守平衡：发表AI研究是否可以减少滥用？（CS Society）

越来越多的人开始担心可能人工智能（AI）研究可能会被滥用。科学研究的发表导致对技术的滥用，但是也可以为防止滥用提供帮助。本文探讨了这两种影响之间的平衡。我们的理...

• ### iOS开发：获取WiFi名称（解决iOS12.0以上系统不能正常获取WiFi名称的方法）

今天五一劳动节，依然正常上班，然后就发一篇文章呗。前段时间在开发过程中遇到一个问题，就是之前设置的获取手机连接WiFi名称的方法不起作用了，后来经查发现是因为新...