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));
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 =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 )
传入的 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))/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}
这里我们只观察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))//返回false
24. 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的应用案例
这里有两个相对运动的网格,我们来判断他们的相对位置,如下图。
下面是主要代码
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);
- ASP.NET MVC学习笔记07数据表和模型添加新字段
- 以太坊·电影院场景区块链应用探索
- 最全爬虫攻略:微博、APP、公众号一个不能少!
- 注册中心 Eureka 源码解析 —— Eureka-Client 初始化(一)之 EurekaInstanceConfig
- 无论人工智能发展到什么地步,都离不开这6段代码
- Dubbo源码解析 —— 逻辑层设计之服务降级
- 【死磕Java并发】-----J.U.C之Condition
- 数据库中间件 MyCAT 源码分析 —— 【单库单表】查询
- 数据库中间件 MyCAT源码分析:【单库单表】插入
- 数据库中间件 MyCAT 源码分析 —— 调试环境搭建
- 分布式事务 TCC-Transaction 源码解析 —— 事务存储器
- 注册中心 Eureka 源码解析 —— 调试环境搭建
- 一样的代码、不一样的写法,JavaScript必知的简写技巧|附源代码
- 【死磕Java并发】-----J.U.C之读写锁:ReentrantReadWriteLock
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP使用JPGRAPH制作圆柱图的方法详解
- PHP 实现超简单的SESSION与COOKIE登录验证功能示例
- PHP 图像处理与SESSION制作超简单验证码的方法示例
- 简述PHP7.4 新特性和废弃的功能
- laravel5.1框架下的批量赋值实现方法分析
- Laravel框架环境与配置操作实例分析
- 记Laravel调用Gin接口调用formData上传文件的实现方法
- Laravel框架视图和模型操作方法分析
- 接口测试框架实战(六) | 配置的数据驱动
- PHP连续签到功能实现方法详解
- PHP实现发送微博消息功能完整示例
- php实现快速对二维数组某一列进行组装的方法小结
- PHP实现提取多维数组指定一列的方法总结
- PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
- Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解