three.js利用射线Raycaster进行碰撞检测

2023-07-28 19:36:04 74

本文实例为大家分享了利用射线Raycaster进行碰撞检测的具体代码，供大家参考，具体内容如下

学习碰撞检测之前，我们先了解一下Raycaster类

Raycaster应该翻译为“光线投射”，顾名思义，就是投射出去的一束光线。

Raycaster的构造函数如下

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

使用Raycaster进行碰撞检测

用Raycaster来检测碰撞的原理很简单，我们需要以物体的中心为起点，向各个顶点（vertices）发出射线，然后检查射线是否与其它的物体相交。如果出现了相交的情况，检查最近的一个交点与射线起点间的距离，如果这个距离比射线起点至物体顶点间的距离要小，则说明发生了碰撞。

这个方法有一个缺点，当物体的中心在另一个物体内部时，是不能够检测到碰撞的。而且当两个物体能够互相穿过，且有较大部分重合时，检测效果也不理想。

还有需要注意的一点是：在Three.js中创建物体时，它的顶点（veritces）数目是与它的分段数目相关的，分段越多，顶点数目越多。为了检测过程中的准确度考虑，需要适当增加物体的分段。

检测光线是否与物体相交使用的是 intersectObject或 intersectObjects方法:

.intersectObject(object,recursive)

//object—检测该物体是否与射线相交。
//recursive—如果设置，则会检测物体所有的子代。

相交的结果会以一个数组的形式返回，其中的元素依照距离排序，越近的排在越前.

这样通过对数组中的元素进行处理，就能得出想要的结果。

intersectObjects与 intersectObject类似，除了传入的参数是一个数组之外，并无大的差别。

/**
*功能：检测movingCube是否与数组collideMeshList中的元素发生了碰撞
*
*/
varoriginPoint=movingCube.position.clone();

for(varvertexIndex=0;vertexIndex0&&collisionResults[0].distance
在Three.js中是使用矩阵来记录3D转换的，每一个Object3D的实例都有一个矩阵，存储了位置position，旋转rotation和伸缩scale。
varglobalVertex=localVertex.applyMatrix4(movingCube.matrix);
这一句代码将物体的本地坐标乘以变换矩阵，得到了这个物体在世界坐标系中的值，处理之后的值才是我们所需要的。
下面是一个测试的完整实例：
index.html













Document

Main.js

varscene,camera,controls,renderer,cube,originPoint;
varWIDTH,HEIGHT;
varobjects=[];
//创建渲染器
functioninitRenderer(){
WIDTH=window.innerWidth;
HEIGHT=window.innerHeight;
renderer=newTHREE.WebGLRenderer({
antialias:true,
});
renderer.setSize(WIDTH,HEIGHT);
renderer.setPixelRatio(WIDTH/HEIGHT);
document.getElementById('canvas-frame').appendChild(renderer.domElement);

}
//创建场景
functioninitScene(){
scene=newTHREE.Scene();
scene.background=newTHREE.Color(0xf0f0f0);
}
//创建相机
functioninitCamera(){
camera=newTHREE.PerspectiveCamera(50,WIDTH/HEIGHT,1,10000);
camera.position.set(0,0,1000);
camera.lookAt(0,0,0);
}
//创建光源
functioninitLight(){
//方向光
vardirectionalLight=newTHREE.DirectionalLight(0xffffff,0.5);
scene.add(directionalLight);
//环境光
scene.add(newTHREE.AmbientLight(0x505050));
}
//创建对象
functioninitObject(){
vargeometry=newTHREE.BoxBufferGeometry(40,40,40);

for(vari=0;i<2;i++){

varobject=newTHREE.Mesh(geometry,newTHREE.MeshLambertMaterial({color:Math.random()*0xffffff}));
//随机位置
object.position.x=Math.random()*1000-500;
object.position.y=Math.random()*600-300;
object.position.z=Math.random()*800-400;
//随机角度
object.rotation.x=Math.random()*2*Math.PI;
object.rotation.y=Math.random()*2*Math.PI;
object.rotation.z=Math.random()*2*Math.PI;
//随机大小
object.scale.x=Math.random()*2+1;
object.scale.y=Math.random()*2+1;
object.scale.z=Math.random()*2+1;
//开启阴影
object.castShadow=true;
object.receiveShadow=true;

scene.add(object);
//放入数组
objects.push(object);

}
//
vargeometry=newTHREE.BoxGeometry(80,80,80);
varmaterial=newTHREE.MeshLambertMaterial({color:0xfff000});
cube=newTHREE.Mesh(geometry,material);
scene.add(cube);
/**
*.clone():Vector3
*返回一个新的Vector3，其具有和当前这个向量相同的x、y和z。
*/
originPoint=cube.position.clone();

}
//创建控制器
functioninitControls(){
//TrackballControls轨迹球控件，最常用的控件，可以使用鼠标轻松的移动、平移，缩放场景。
controls=newTHREE.TrackballControls(camera);
controls.rotateSpeed=1.0;//旋转速度
controls.zoomSpeed=1.2;//缩放速度
controls.panSpeed=0.8;//平controls
controls.noZoom=false;
controls.noPan=false;
controls.staticMoving=true;//静止移动，为true则没有惯性
controls.dynamicDampingFactor=0.3;//阻尼系数越小则滑动越大
//DragControls初始化拖拽控件
vardragControls=newTHREE.DragControls(objects,camera,renderer.domElement);
//开始拖拽
dragControls.addEventListener('dragstart',function(){

controls.enabled=false;

});
//拖拽结束
dragControls.addEventListener('dragend',function(){

controls.enabled=true;

});
}

functioninitThree(){
initRenderer();
initScene();
initCamera();
initLight();
initObject();
initControls();
animation();
}
//循环
functionanimation(){
requestAnimationFrame(animation);
renderer.render(scene,camera);
//更新控制器
controls.update();
//循环碰撞检测
for(vari=0;i0&&collisionResults[0].distance
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

three.js利用射线Raycaster进行碰撞检测

热门推荐

随机推荐