Drag and drop without clicking

[jamessimo]

Hey guys, so im building a tycoon game were you can buy furniture and place it in your house. I have implemented the drag drop system from the playground (http://www.babylonjs-playground.com) and it works for objects which have been placed on the scene. 

 

My issue is is that I now want to click a button to BUY an object (mesh) and as soon as I mouse up from the button the mesh would follow my mouse (like the drag and drop) and stop after I click again to place the object. 

 

I have tried to expand the drag drop to allow this but in its current implementation it has to have a click/pick event on the mesh I want to move. 

 

Has any one expanded the drag drop to work with and without a click event or do I have to make a second set of functions to do this? 

Cheers for any help you can pass my way. 

[jessepmason]

I think you are correct!

This is how I have been doing it...http://www.babylonjs-playground.com/#27ERB0#1

instructions:

- click the -editor button to close the editor panel (it wont work otherwise)

- click on the red plane (pretend this is your css buy button)

- sphere should be moving with the mouse

- click again somwhere on a mesh and the sphere should stop moving

 

if someone knows a more efficient way, let me know!

[jamessimo]

I think you are correct!

This is how I have been doing it...http://www.babylonjs-playground.com/#27ERB0#1

 

So looking at your code I see that you have a global buy bool that gets set if you click the buy button, then it simply maps the buyMesh's X Y to your on mouse move X Y.

This is fine inside a Babylon scene but would this not work if your buy button was made with HTML& CSS and lived outside the BABYLON Scene.

var onPointerUp = function(evt) { /* THIS WOULD NEVER GET CALLED IF THE BUTTON WAS HTML */  pickResult = scene.pick(evt.clientX, evt.clientY);  if (buy) {    //....  } else {    if (pickResult.hit) { /* THIS WOULD NEVER GET CALLED IF THE BUTTON WAS HTML */      //....      pickedMesh = pickResult.pickedMesh;      if (pickedMesh.name == "buyButton") { /* THIS WOULD NEVER GET CALLED IF THE BUTTON WAS HTML */        //Place the mesh over the mouse and set BUY to TRUE      }    }  }}

So this solution is not ideal as most html5 game UI is made with either Markup or a canvas object, this implementation requires the BABYLON mouse event to be fired over a mesh (to extract the mouse coords from the event).

 

Would it be better to ignore the onPointerUp function and some how after I click my HTML button to first create the bought object, then some how force the  scene.pick(evt.clientX, evt.clientY); On the newly created object? 

 

Is this possible? or am I over thinking it?  Any feedback would be appreciated! 

[jessepmason]

You will have to forgive me as I am still a beginner at this and still learning so their might be a better way..

I don't know how to add CSS to a playground yet so here it is on my website: http://vrmodify.com/BuyButton.html

 

basicly the pointer move event is going to move a new mesh if a variable is true and your css function sets the variable true and sets the mesh you want to create/move

 

hopefully I am helping!