我已经实现了分离轴定理来管理平移和旋转矩形碰撞检测和响应(响应的物理特性可能不是很准确,但没关系,我现在已经足够好了)。但是,当两个矩形重叠时,或者当一个矩形卡在画布边缘时,我很难管理: 就像在这个 gif 上一样
如果有人开始解释如何做,或者可以引导我寻找有用的资源。我将不胜感激。
这里是代码的链接,如果你想一睹为快:https ://jsixj.csb.app/
编辑:不是没有检测到碰撞,而是为时已晚:碰撞检测触发较晚,因此两个矩形“深度纠缠”,碰撞响应将速度矢量更改为相反方向,然后,下一个帧,检测到碰撞,因为两个矩形没有时间相互“分离”,等等。换句话说:在每个更新(requestAnimationFrame)中,检测到碰撞并且速度矢量相应地改变为相反的方向,但由于矩形还深度重叠,它们没有时间分开。
这个问题很好解决,在圈子的情况下很容易解决: 伪代码:
//We calculate the vector between the center of each circle
let vect = Vector.sub(Circle1.center, Circle2.center)
//its magnitude
let dist = Vector.Mag(vect)
//We deduct the unitary vector
let unitVect = Vector.div(vect, dist)
//is the two circle are overlapping
if(dist <= Circle1.radius + Circle2.radius){
//we set the new center of Circle1 so that the two circle just touch eachother without overlapping
const correction = Vector.mult(unitNormal, Circle1.radius + Circle2.radius)
const newV = Vector.add(Circle1.pos, correction)
Circle1.center = newV
}
矩形肯定更棘手,特别是在旋转时,因为我认为,我们必须考虑矩形的方向来解决问题我正在寻找解决这个问题的一般哲学的线索,但如果你需要挖掘我写的代码有点,请参考上面的链接
编辑:为了更好地理解我在上面试图解释的内容是另一个 gif 来说明:
我将速度向量建模为绿色,然后你可以看到当矩形卡住时会发生什么,碰撞检测太快改变了每一帧的速度方向,因此避免了矩形“逃离”边缘。