Three.js实现相机碰撞检测(使用Raycaster类)

最近做漫游巡检的功能的时候需要用到相机的碰撞检测功能,具体方法如下:

首先了解什么是Raycaster类:
Raycaster 应该翻译为“光线投射”,顾名思义,就是投射出去的一束光线。
网上一般都是鼠标点击拾取时候的碰撞检测,但是如果是相机的碰撞检测如何实现呢?

Raycaster的构造函数如下:
Raycaster( origin, direction, near, far ){
origin — 射线的起点向量。
direction — 射线的方向向量,应该归一化。
near — 所有返回的结果应该比 near 远。Near不能为负,默认值为0。
far — 所有返回的结果应该比 far 近。Far 不能小于 near,默认值为无穷大。
}

其中origin为起点向量也就意味着是相机的位置,direction为方向向量,我们只需要距离相机一段距离的点和相机的位置计算出方向的向量例如:

  var camera.position = new THREE.Vector3(300,500,700)
  var LookAt =new THREE.Vector3(300,500,880);
  var direction = LookAt.sub(camera.position).normalize()

其中direction 为方向向量,那么就可以进行碰撞检测了具体代码如下:

var raycaster = new THREE.Raycaster();

raycaster.set(camera.position,direction );
            raycaster.far=210;
            var intersects = raycaster.intersectObjects(objects, true);//_this.scene.children
            console.log(intersects)
            if(intersects.length>0){
               //加入碰撞检测之后需要做的操作
            }

其中检测光线是否与物体相交使用的是 intersectObject 或 intersectObjects 方法 相交的结果会以一个数组的形式返回,其中的元素依照距离排序,越近的排在越前,这样通过对数组中的元素进行处理,就能得出想要的结果。
如果是实现鼠标点击拾取的功能,可以用setFromCamera()方法具体操作可以看一下这个地址鼠标拾取方法

以上仅仅是记录一下自己解决的问题。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值