So I am working on a wardrobe configurator and I have integrated working collision using MeshBVH the only issue I am facing is that when 2 objects collide it completely makes the drag to stop, I want it to move in a way that if one side is colliding it doesn’t move in that direction but should move in the other directions. Here’s the code I have:
if (!e.object || !e.object.matrixWorld) return;
if (e.object.userData.type == "drawer") {
const targetPosition = new THREE.Vector3(
e.object.position.x,
e.object.position.y,
e.object.position.z
);
let collisionDetected = false;
for (const collidableMesh of collidableMeshList) {
if (collidableMesh === e.object) continue;
e.object.updateMatrixWorld(true);
collidableMesh.updateMatrixWorld(true);
const invertedMatrix = new THREE.Matrix4()
.copy(e.object.matrixWorld)
.invert();
const relativeMatrix = new THREE.Matrix4().multiplyMatrices(
invertedMatrix,
collidableMesh.matrixWorld
);
if (
e.object.geometry.boundsTree.intersectsGeometry(
collidableMesh.geometry,
relativeMatrix
)
) {
collisionDetected = true;
break;
}
}
if (collisionDetected) {
e.object.position.copy(previousPosition);
updateHandlePosition(e.object, previousPosition);
} else {
previousPosition.copy(e.object.position);
updateHandlePosition(e.object, e.object.position);
}
}
function updateHandlePosition(drawer, position) {
drawer.children.forEach((child) => {
child.position.set(
position.x + Math.sign(position.x) * drawer.geometry.boundingBox.min.x,
position.y,
position.z
);
child.updateMatrix();
});
}