PointerDragBehavior moving meshes with onDragObservable

Questions
,
1

Version: 7.30.0
Engine: WebGL2
Playground: Babylon.js Playground
Description:
I’m trying to move 2 meshes via PointerDragBehavior, so I attached PointerDragBehavior to one mesh (sphere), and move anther mesh (followingMesh) in the onDragObservable event, and update the position of followingMesh with the position of sphere.
But as I drag, the positions of the 2 meshes got different, see the screenrecording below, how to resolve it?

Actual:
screenrecording

Expected:
The 2 meshes should have the the same position while dragging.

2

I believe one needs to update the position more often than DragBehavior fires events.
Here is the one of possible solutions - https://playground.babylonjs.com/#PQUTZO#1

1 Like
3

Thanks for your quick respond. Does this means to delay position update for 1 frame? Why is this needed?

4

The matter is that if you drad too fast, the positions has not enough time to update after drag end - https://playground.babylonjs.com/#PQUTZO#2
Another possible solution is to update position on DragEnd - https://playground.babylonjs.com/#PQUTZO#3

1 Like
5

image
image794×545 48.2 KB

Using this, the positions printed on the GUI are the same, but positons rendered in scene is different.

Using onDragEndObservable can make the positions eventually the same, but not during dragging.

6

The positions printer on the GUI are positions fired with DragBehavior, not DradEnd. If you sync positions at the DragEnd, they are identical. Or if you drag again, they will be synced at start.
The difference (for X coord) is seen here - https://playground.babylonjs.com/#PQUTZO#4

7

Is this something with dirty mechanism? If line 81 being changed to followingMesh.position = sphere.position.clone();, the rendered and displayed position diffs.

image
image858×754 61.3 KB

8

cc @amoebachant

9

Hi @kzhsw,
The reason you were seeing that behavior is that the PointerDragBehavior doesn’t instantly move the mesh to the new mouse location, it animates it there. So, when you were reading the sphere’s position and setting the followingMesh’s position to that position, it was the current position of the sphere, not where it was animating to.

The event data provided to the callback for the onDragObservable has what you need though.
event.delta gives you the change in position that is being applied to the attached mesh (the sphere), so we can apply it to the follow mesh and it’ll jump exactly to where the sphere is going to animate to.

Take a look here: https://playground.babylonjs.com/#PQUTZO#6

You could animate it to that position as well if you prefer.

Hope that helps!

4 Likes