Less drag and more drop with a button

Hi again.
Prepare to give me a promotion for creating 100 topics :slight_smile:

https://playground.babylonjs.com/#279FW9#44

I want to create a mesh with a button, attache it to the cursor and drop it, when click again.
It works fine, except, when I create another mesh, the position of the old mesh will also be set again, so I have two or more meshes on the same position and it seems, that it is only one mesh.
How can I manage, to let the first mesh be fixed on its position, when creating a new mesh?

Also, is it better to use the createInstance function, instead of creating a mesh with new Mesh on every function call, like I did in the playground?

1 Like

OK, not a problem. You can’t dispose of your event listeners on every click. How’s this:

https://playground.babylonjs.com/#279FW9#54

Galen

1 Like

If you want to add multiple boxes, give them unique IDs

Solution was to create a variable for increment and an empty array.
look here >> https://playground.babylonjs.com/#ZVBH8D#2

:grin:

1 Like

You can use instances https://playground.babylonjs.com/#279FW9#55 however all instances will have the same material. You could replace ‘createInstance’ with ‘clone’ if you want to have different materials.

1 Like

Well, alot of responses. Thank you all.

@Galen

Good to know I can delete unnecessary code. I just copied this part from another playground about drag and drop and didn’t even try to let this part away.

I already tried that! At least if it means giving them unique names.
And that is where we come to:

@JohnK

You made it work by giving them unique names. I also did that, but I still had the same problem: all created meshes moved to the same pointed spot.
I tried to adapt your playground to my code.
https://playground.babylonjs.com/#279FW9#62

My code:

createName is a function that returns a string with ‘barrack’ in it. It is unique, I tested it in the debuglayer. I don’t see any important difference in my code and the playground…but the playground is working like I want it to.

@lcarlos
Same with your code. When I adapt your playground to my code on desktop, it is working fine. But tbh I rather want to refere the mesh with a name. I want to have as less global variables as possible :sweat_smile:

Both playgrounds are working fine, so that means my code is the problem.
Is this screenshot enough for anyone to see the error in my code? I’d be glad.

Sorry not to have time to do more until tomorrow or the day after. In the mean time note that onPointerMove, onPointerUp, canavs.addListener are methods of the scene not of a box (barrack) so should not be inside the ‘creatingBoxes()’ or ‘createBarrack’ functions.

Here is a version that maybe closer to what you want https://playground.babylonjs.com/#279FW9#63. Difficult to know without knowing exactly what you are trying to achieve.

In the case of global variables, imho, it is more to do with where they belong to the scene or the box for example rather than doing away with them because ‘they are bad’. To do away with them completely you need to write fully Oops code.

Same with your code. When I adapt your playground to my code on desktop, it is working fine. But tbh I rather want to refere the mesh with a name. I want to have as less global variables as possible ! <<<<,

About this! You can get the name of each object within the array that you created and all were created with unique names.

about your code! What do you want to do with this part of the player?

The goal is to create and place a building with a button, like in RTS games like Age of Empires, Starcraft, Warcraft etc.

No need to do more stuff, the earlier playgrounds of you guys were already my solution. Implementing them in my code just didn’t work out (I’m coming to that).

Usually I know this. I was still doing it, because I was refering to var name, which I initialized in the function.
I figured out that this was the problem all along.
Although I created a unique name with var name = createName(),
for some reason all names at the same time were used, when I called

function onPointerMove(evt) {
        if(!clicked) { return; }
        scene.getMeshByName(name).position.x = scene.pick(scene.pointerX, scene.pointerY, null, null).pickedPoint.x;
        scene.getMeshByName(name).position.z = scene.pick(scene.pointerX, scene.pointerY, null, null).pickedPoint.z;
    }

so, all meshes were positioned to the same spot.
When I use the counter in the name, everything is working fine.

Just to show what I mean, how it works now

I’m still curious:
(Without the counter) Even when I refere the mesh in the onPointerMove function with the variables name with which I created a mesh, like

var mesh = new BABYLON.MeshBuilder.CreateMesh(...)
onPointerMove {
    mesh.position.x = scene.pick(X)
    mesh.position.z = .position.x = scene.pick(Z)
}

all meshes created with this function will be moved.
Example: https://playground.babylonjs.com/#279FW9#65
Basically the same as before. Just to illustrate what I mean.
When I create a new mesh with var mesh = createMesh(), shouldn’t just this currently created mesh be moved, instead of all meshes? I’m trying to understand what is causing this. The main problem is solved.

What I want to achieve with that information, is a way to use my var name = createName() function without a meshCounter.
Maybe when the onPointerMove function is outside, but called inside my function and is given the mesh to move as parameter? I didn’t got that to work, but I believe this should work somehow.
I have similar functions like this, the only difference is, that created meshes have a fixed position and it all works fine. They have a unique name and they move independently.

I hope I made my question clear. If not, no reply wouldn’t be that bad, because I have the solution of my main problem :upside_down_face: