DragPointerBehaviour from HTML element to Babylon scene

Questions
1

Hello guys,

I am working on the feature where I need:

  • Drag mesh from HTML element and move it to the scene.
  • Move mesh in all directions depending on ground and wall.
  • Switch between movement directions when mesh hits the ground or the back wall.

I have already prepared a demo: https://playground.babylonjs.com/#V1B8DP#16

In the demo, you can start dragging from the green rectangle and move the pointer to the scene, where the mesh should follow the pointer.

Open problems:

  • Is there any other way how to switch movement behavior between ground and wall?
  • How to correctly assign the position of mesh to the pointer when drag start in HTML element. (scene starts to listen to plane coordinates only when pointer is out of HTML.)
  • Position of the mesh is not correct when drag starts on the ground.

I am wondering to hear some improvements or better solutions.

2

cc @Cedric

3

Hi @Seffra and welcome to the forum!

Personaly, I would have done a ray picking and retrieved the normal using :

It depends on the use case, maybe it’s not worth the cpu computation.
After thinking a little more about it, I would try to compute the ray plane intersection.
https://www.scratchapixel.com/lessons/3d-basic-rendering/minimal-ray-tracer-rendering-simple-shapes/ray-plane-and-ray-disk-intersection
Once, you get 3 coordinates (1 for each plane), you use the plane that the point of intersection is the closest to the camera.

I have no idea for the HTML element, maybe someone else on the forum does.

Regarding the box position, it looks like the switch between XZ and XY planes is not correct. At least, it doesn’t happen when it should.

4

Hello @Seffra and welcome,

Is there any reason you are specifically using HTML for your UI? Babylon has its own GUI that you would be able to get the custom dragging working very quickly.

I’ll refer to an article for a demo I did about a year ago which had a drag and drop system.

If you do have to use HTML specifically, there should be drag/drop behaviors. When you drop you should be able to get the canvas position of the mouse and then convert that canvas coordinate using a projection matrix.

1 Like
5

Surface magnetic behavior, in the word knowledge, the extent to which behavior can not define an object is that, for example, a picture can be hung on the wall, but it can not be spread on the ground, but can only stand on the ground

6

Hello @Seffra just checking in, was your question solved?