一、包围盒简介：

包围盒是一个简单的几何空间，里面包含着复杂形状的物体。为物体添加包围体的目的是快速的进行碰撞检测或者进行精确的碰撞检测之前进行过滤（即当包围体碰撞，才进行精确碰撞检测和处理）。包围体类型包括球体、轴对齐包围盒（AABB）、有向包围盒（OBB）、8-DOP以及凸壳。

包围盒广泛地应用于碰撞检测，比如射击、点击、相撞等，每一个物体都有自己的包围盒。因为包围盒一般为规则物体，因此用它来代替物体本身进行计算，会比直接用物体本身更加高效和简单。

目前广泛应用的是AABB和OBB包围盒，其中AABB包围盒更常见。因为它的生成方法很简单，因它与坐标轴是对齐的。但它也有不足，它不随物体旋转，可以看出当图中的老虎沿着Z轴方向站立时，AABB包围盒还和老虎比较贴合，但当老虎转了一个角度后，AABB包围盒便增加了较大的空隙，对于较精确的碰撞检测效果不太好。这时就需要OBB包围盒，它始终沿着物体的主成分方向生成最小的一个矩形包围盒，可以随物体旋转，可用于较精确的碰撞检测。

以上摘自：https://blog.csdn.net/qing101hua/article/details/53100112

二、 Three.js中的包围盒使用

在three.js中，获取一个模型的包围盒有很多种方法，下面我列一下，我个人经常使用的：
第一种方法，也是最无脑的方法：
实例化一个THREE.Box3，然后用.expandByObject 直接可以获取到此模型的包围盒，而且还能包含它的子对象，官方注释（扩展此包围盒的边界，使得对象及其子对象在包围盒内，包括对象和子对象的世界坐标的变换。）
第二种方法，获取单个几何体的模型的方法：
首先获取到模型的geometry的boundingbox，然后把这个boundingbox乘以模型的世界变换矩阵，就可以实现包围盒的获取。
以上两种，都是获取AABB类型的包围盒，使用简单，理解简单，也好用。

针对于OBB包围盒，今天发现three.js也有相应的封装，文件地址在/examples/jsm/math/OBB.js。
官方有demo，可以在我网站上翻一翻，地址：http://wjceo.com/three.js/examples/?q=obb#webgl_math_obb

你也可以自己打开一个官方的demo搜一下OBB，来查看一下，demo效果就是，如果两个盒子发生了碰撞，就会变成红色，仅此而已。

针对于这个OBB包围盒对象使用，我们需要手动设置其初始的包围盒尺寸，官方的demo没有在初始化的时候直接传值，而是，实例化后，直接设置的尺寸，而且还需要设置包围盒子尺寸的一半，不知道为啥要这么设置：

var obb = new OBB();
obb.halfSize.copy(new THREE.Vector(x, y, z)).multiplyScalar(0.5);

我们可以直接复制一下size的值，然后让每个值乘以0.5，就是一半的盒子。
每个对象都设置了一个OBB对象，那么怎么实现的碰撞检测。官方demo里面是在每一帧的render里面，因为demo里面的模型的几何体都是用的一个默认的几何体盒子，所以，在每一帧里面，模型都先copy了一下几何体的OBB对象，然后再乘以模型的世界矩阵，获取到了模型的OBB包围盒。
我们查看这个OBB.js文件，会发现里面有很多的内置方法，什么和点检测的，面检测碰撞的，和球的，所以，我们只需要调用相应的api即可。
官方demo在render里面，显示更新每个模型的OBB包围盒，然后拿着其中的一个和其它所有的OBB包围盒，通过intersectsOBB方法来检测是否碰撞，如果检测碰撞，直接设置颜色为红色。

113 Three.js的obb （OrientedboundingBox）方向包围盒的使用相关推荐

如何生成OBB（OrientedboundingBox）方向包围盒
如何生成OBB(OrientedboundingBox)方向包围盒转自:https://blog.csdn.net/qing101hua/article/details/53100112 评价:文章 ...
方向包围盒OBB（oriented bounding box）
制造几何仿真中的碰撞检测通常视为针对刚体对象间的碰撞检测,这样的话可以把非刚体即软体的建模和变形算法对碰撞检测的影响减少到最小.常见成熟的基于包围盒的碰撞检测(box intersection tes ...
分享113个JS特效动画效果，总有一款适合您
分享113个JS特效动画效果,总有一款适合您 113个JS特效动画效果下载链接:https://pan.baidu.com/s/1k0fyflcyTKQM9pYEif2f9g?pwd=hpa8 提取 ...
分享113个JS菜单导航，总有一款适合您
分享113个JS菜单导航,总有一款适合您 113个JS菜单导航下载链接:https://pan.baidu.com/s/1d4nnh-UAxNnSp9kfMBmPAw?pwd=cw23 提取码:cw ...
Compressor.js 图片压缩及方向修正
目录问题背景解决方案代码演示更多应用,请访问官网问题背景现在用手机拍照上传图片的应用场景越来越多,但是手机拍照的图片现在都过大,十几兆的都不在少数,最关键的一点手机拍照的方向不同,图片最后 ...
js 中控制打印方向横向还是纵向。
打印方向控制 @page { size: landscape; }//横向 @page { size: portrait; }//纵向但是写在Css 中无法切换还是要写在js中. //切换打印方向 ...
js处理图片变形、方向、压缩等
图片各类处理 //检查图片是否有被压扁,如果有,返回比率 //http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ra ...
js判断页面滚动方向
开发中有很多根据滚动来判断的逻辑,这时候最重要的一个步骤就是先判断滚动方向,然后才能进行后续逻辑我把自己最近项目中用到的代码放在下面(项目用的vue),各位酌情修改 data() {return { ...
移动端js判断手指滑动方向
var startx, starty;//获得角度function getAngle(angx, angy) {return Math.atan2(angy, angx) * 180 / Math.P ...

113 Three.js的obb （OrientedboundingBox）方向包围盒的使用

一、包围盒简介：

二、 Three.js中的包围盒使用

113 Three.js的obb （OrientedboundingBox）方向包围盒的使用相关推荐

最新文章

热门文章