Simple collision detection on drag

Questions
1

Hey people,

I am kinda new to the BabylonJS scene. I wanted to achieve a very simple collision detection when dragging a mesh. Basically I have a ground and one mesh on top. Goal is that the mesh is not draggable outside the ground. I thought it would be the easiest to have a invisible wall around my ground and have a collision detection on the mesh.

In my example I did a very simple setup (at least I guess it is simple and basic) where I have one sphere, which is draggable, and one wall on the side of the ground. This wall is not yet invisible and not everywhere around the ground.

The collision detection works fundamentally, but when I drag the sphere very fast or when I drag far outside the collision detection doesn’t work anymore. Does anybody have a glue why the collision detection is not that exact?

2

Welcome to the forum!

I have noticed you integrated a physics engine (cannon in that case) to use as collision detector. A physics engine has a lot of advantages, but is sometimes not the right choice for a specific usecase.

If you don’t need the physics calculations (like forces, impulses, gravity, etc’), I would use babylon’s internal collision system instead of a complex physics engine. You can use “mesh.moveWithCollisions” to move and calculate collisions against any collider that you define, and prevent the mesh from going through it completely (the same way our camera collision system works, It is decribed here:

Camera Collisions | Babylon.js Documentation

3

Thanks for the kind words. Also thanks for the quick reply

Alright I checked out the mesh.moveWithCollisions method, it looks promising. Still I am not sure how that would work in combination with the PointerDragBehavior

I saw some examples using a global variable startingPoint like in following example: Babylon.js Playground

I don’t know if I like having that as it uses the global variable startingPoint except being encapsulated within one object. Furthermore meshes cannot be clicked when there is no ground behind one mesh (this is why I used PointerDragBehavior in the first place)

4

helloo @JPeer264 , did you figure out how to use moveWithCollisions with the pointerDragBehavior ? I would appreciate any example , as I am trying but it’s not seem to work as expected

Thank You

5

Do you have a repro of your issue in the playground ?

6

Helloo @sebavan :slight_smile:

this is repro for my issue
Any Suggestion will be appreciated

Thank You

7

Thanks a lot, @Cedric might have some ideas ?

8

Here i a PG that uses validateDrag to check collisions:

The idea here is to replace Vector3.Distance with the collision detection of your choice.

1 Like
9

Click on scene to activate key use

A turn anti-clockwise
D turn clockwise
W move forward
S move backward.

Note as in the above PG moveWithCollisions takes a direction vector as a parameter not a position. Try the delta from

rather than base.position

On mobile currently so cannot provide more help.

10

If you want to use moveWithCollisions to check for collisions while dragging, you could do it like this for example. :slight_smile:

pointerDragBehavior.moveAttached = false
pointerDragBehavior.onDragObservable.add((eventData) => {
    base.moveWithCollisions(eventData.delta)
})
4 Likes
11

Thank You All !! :blush:

1 Like
12

Hello @blake :slight_smile:
I have an additional issue that I am trying to solve
I am using a cuboid instead of a simple ground because I want some thickness
But the drag function is not working anymore as expected
maybe you know what can be the issue?

Thank you in advance

13

Mesh Collision | Babylon.js Playground (babylonjs.com)

with pointerDragBehavior.updateDragPlane = false; the dragplane stays the same.

2 Likes
14

Also worth noting that the base mesh is now colliding with the ground, which can be fixed by moving the base mesh up by half the ground’s height (by 0.1 in this case). Then things are working as expected again. :slight_smile:

15

Hey sorry for getting back so late. Unfortunately I did not came up with a solution in combination with PointerDragBehavior. For now I left it having a global variable and use it as I posted it in the playground. However I might give it another shot as there were some pretty nice examples already here.

16

Hello @blake Thank you so much for your response!
For this case , all goes as expected now!
May I ask if we are using a transform Node instead of the base mesh
How this behavior can be done ? knowing that the transform Node doesn’t accept moveWithCollisions
Because I have another case where I have to use the transform node instead

Thank you

17

Heya, one option, using a TransformNode parent, is to in the validateDrag method check each child for intersections against each box. I tend to dislike using validateDrag to check intersections thou, because a fast drag can’t get as close to the obstacle and also it’s harder to drag along the edge of an obstacle.

But another option could be to use an AbstractMesh instead of a TransformNode for the parent, then you can still use moveWithCollisions like before. IMO this option provides the better dragging experience. :slight_smile:

1 Like
18

Amazing !! Thank you so much for your time and solutions !! :blush:

1 Like