PointerDragBehavior keeps resseting my mesh position

Hello guys!

I have a problem with a project i am trying to do. I am trying to drag around a mesh using PointerDragBehavior and have it at a different y position while dragging it. In the below example I want to drag around the sphere and to have it stay at y=2 while I have my mouse clicked on it. I tried using the onDragObservable event but it seems that it keeps resetting to the y=1 position while not moving(but the mouse is still clicked):

Is there anyway I can use onDragObservable for this to work like I want it to work or should I use a different aproach for it?

Pinging @Cedric

something like this?


Hi @Smoke_HHH and welcome to the forum. Found a few issues including with the docs. Have written a bug report and am doing a PR for the docs.

This PG https://www.babylonjs-playground.com/#9UFEBE#100 uses dragPlaneNormal = new BABYLON.Vector3(0, 1, 0) but drags move in XY plane not XZ plane.

Notice line 19 has a spelling error - useObjectOrienationForDragging - instead of useObjectOrientationForDragging

This was spelt incorrectly in the BJS code and so the PG worked for dragNormalPlane. The spelling error in the code was corrected and so using dragNormalPlane would no longer work.

This is the correction Babylon.js Playground

Other errors in the docs for meshBehaviors included 404s in some PGs. These will be updated when docs are updated.

Unfortunately none of these correct the specific error you want solving.

1 Like

Doc update is live
Thanks @JohnK

1 Like

Fast :smiley:

1 Like

While your solution is amazing…it dosen’t work well when I try to apply it in my curent project. The first problem that I have is the jumping motion the sphere does when clicked from the sides and after that dragging it. When I do that the sphere jump with the center of the mesh to my mouse position. I am working on a card game and this looks rather bad sadly. Second problem I have is that I tried applying it to my pointerDragBehaviour which uses dragPlaneNormal and I can’t seem to make it work. I would put that project up by itself but the problem is that it has a lot of elements in it and cannot be replicated on Playground easly.(I will try tho)
Thanks a lot for your help tho.

If you give me a PG with your specific setup I can take a look after my stuff today.

Ok…I have extracted what i am interested in from the code. I have simplified some stuff so you can see the problem I am having. In the end I would like that the drag behavior to stay the same but when I click the card and move it around, i want it to stay in focus(aka have it higher than the rest of the cards while it is dragged so it dosen’t pass under them but above them…so the y should be set higher while dragging and then go back to it’s old position). What dosen’t work now is that I get the wierd flicker effect because the y gets set to 1 and then back to it’s old position.

Here is the PG example:

Thank you very much for the help.

does it have to be dragBehavior?



No it dosen’t. The solution you provided(even tho i am still struggling to understand it since I am new to js and babylonjs) is amazing. I will be using this instead of pointerDragBehavior since I see no way to make it work. Thank you again for all the help.

1 Like

Hey…one question if you can help me. I understand everything up until one point. In the removeOb() function, why do you have to make card.dropOb = false?

comment that line out and start moving cards around.

I tried and I cannot. I understan in a way why it is there. From how I see it, after you remove the dropOb from scene you cannot add another observable untill dropOb is flase…but that is what I do not get. Why does it need to be set to false?

otherwise you can grab the card before the animation loop completes and cause the listeners to not get bound/unbound correctly, and sometimes sends it into a LERP spiral.

Ah, I see now, it is a flag more or less that indicates if the card can be picked up again (only if the drop ‘animation’ is done). Thank you.