Mesh Collision Detection

Questions
,
1

Hello Devs and happy new year
, answer this question or give me the first step to do it and you will save a life :')

if i click on the button, then a mesh will be added in the scene, and that mesh should not collides with the other meshes
also, the mesh should be positioned in such a way that it initially does not collide with the other meshes
watch the video to understand more
what am trying to do, is to create a website somehow similar to Ikea kitchen design

2

You can use Box3 to detect intersections with other Box3 (each Mesh geometry has its own .boundingBox property which you can use to determine intersections between nearby meshes.)

3

Thanks for replying @mjurczyk
to check if we have intersections between the boxes then we should already know how much boxes do we have so that we can check for the intersection between the boxes, but in my case the number of meshes is unknown because we want to add a mesh when we press a button, is there a way to check for the collision for the mesh that is being dragged against all the other meshes

4

You need to manage the state of your app:
1_ Whenever a new mesh is created, you register it.
2_ Whenever the mesh moves you check for collisions.

Here is a simple basic implementation, just to give you an idea:

const myMeshes = []; // a simple state holding all the meshes
const createMesh = () => {
     const mesh = ... // Create your mesh
     ... // Some logic
     myMeshes.push(mesh)  // Register the mesh
}

Then you can check for collisions on object move:

const onObjectMove = () => myMeshes.forEach((mesh) => {
    //...Check if there are any collisions
});
5

You could check out the THREE-Mesh-bvh library if you’re trying to handle collisions between unknown geometries. You might be able to do some optimizing here if you can make the assumption that all of you’re meshes are going to be more or less consistent along the z-axis.

1 Like