Web3D编程总结——Threejs 3D碰撞检测初探初探

最新推荐文章于 2024-06-25 11:19:29 发布

VRlook

最新推荐文章于 2024-06-25 11:19:29 发布

阅读量2.6k

点赞数 1

分类专栏： WEBGL-Threejs 文章标签： Three.js 3D碰撞检测 Web3D WebVR THREEJS

本文链接：https://blog.csdn.net/vrlook/article/details/80343541

版权

本文总结了Web3D编程中的Threejs 3D碰撞检测技术，通过实例展示了如何利用THREE.Raycaster进行碰撞检测，并探讨了程序实现细节及优化方向。文章还提到了一种基于物体中心向顶点做射线检测的碰撞检测方法。

摘要由CSDN通过智能技术生成

自己动手写一个方法比分析他人的写的方法困难很多，由此而来的对程序的进一步理解也是分析别人的代码很难得到的。

一、先来几张效果图：

1、场景中有两个半径为1的球体，蓝色线段从球心出发指向球体的“正向”

2、物体被选中后改变纹理图片和透明度，可以使用“w、s、a、d、空格、ctrl”控制物体相对于物体的正向“前、后、左、右、上、下”移动，按住按键时间越长移动速度越快，绿色线段由球心指向物体运动方向，速度越快露出物体表面的部分越长，按“g”停止所有移动，再次点击物体取消选中状态。

3、可以选取多个物体同时移动。

4、两物体发生碰撞后停止移动，红色线段由物体球心指向运动方向上遇到的第一个其他物体

二、碰撞检测原理：

借用THREE.Raycaster来进行碰撞检测，因为Raycaster不能检测到物体的“内表面”，所以使用反射法。

三、程序实现：

完整程序代码可以在http://files.cnblogs.com/files/ljzc002/App2.zip下载查看，其中包括详细注释，这里解释一下几个比较重要的段落。

1、绘制示意物体运动情况的线段

this.line1;//自有方向线
this.line2;//运动方向线
this.line3;//碰撞检测线
var vector2=this.v0.clone().multiplyScalar(2).add(this.object3D.position);//通过向量算出线段的结束点
this.line1=this.createLine2(this.object3D.position,vector2,0x0000ff,this.planetGroup,"line1");//物体在水平方向的朝向线
this.line2=this.createLine2(this.object3D.position,this.object3D.position,0x00ff00,this.planetGroup,"line2");
this.line3=this.createLine2(this.object3D.position,this.object3D.position,0xff0000,this.planetGroup,"line3");

其中点vector2由向量v0乘以2加上