How to move a model around a scene?

[peteK2]

Hello one and all,

This is my first post here and I am new to Babylon.js framework, which I am really enjoying learning. I have a quick question I would like to ask if that's ok?

I made an example scene in the playground just to test out and used the skull model, below.

http://babylonjs-playground.com/#PZGBU#1

I want to be able to move the skull around the scene but when I use the "Drag and Drop" example's code it only lets me move it horizontally along the scene.

I read somewhere that it is possible to use Alt / Ctrl / Shift keys on the keyboard to move the models vertically too.

If anybody could post a solution to this question it would be fantastic as I have tried and failed to get it to function.

Regards!

[Wingnut]

Hi @peteK2, welcome to the Babylon.js forum.  Yeah, I think it was me... yacking here... that talked about checking for control/alt/shift keys (sometimes called "buckies").

It's real easy.  Let's look at the PG:  http://babylonjs-playground.com/#PZGBU#5

There ya go.  Hold control while dragging, and we move "Bone Face" up and down the Y axis.  Wanna see how?  I knew ya did.

In the onPointerMove function check out lines 84-87.  Line 84 checks for the .ctrlKey being pressed.  If pressed, we use slightly different values in our .addInPlace call (in line 85).  You can pretend addInPlace means... add-on.    currentMesh.position is a vector3, and addInPlace needs ANOTHER vector3 or the adding won't work right.  SO I make one...

new BABYLON.Vector3(0, diff.z, 0)

diff.z ... is the amount of change in the UP/DOWN movement of the pointer.  So I shoved diff.z into the Y-axis slot of the new vector3.  Y-axis is up and down, so the mesh is now moving up and down... as diff.z changes during the up/down (mouse forward/backward) drag.  Easy, eh?

Line 86-87... if no control key... do things normally.

Keep in mind that this drag and drop code NEEDS a ground behind the pointer when/where you start the drag.  A low-altitude camera can make dragging fail... because of that.

Let's look at a test of this.

http://babylonjs-playground.com/#PZGBU#6

In line 8, I increased the camera's .beta a bit (from 1.2 to 1.4), and that makes us look more straight-on.  Notice you cannot drag the skull... if you start your click-drag high-up on the skull.  That's because there is no ground behind it.  Ground is needed BEHIND the drag-start point, in order for line 34's getGroundPosition function to work.  It is an important part of the "diff" checking.

Grab the skull lower, below the ground's horizon line, and all is well.  I hope this doesn't cause problems for your project, and I hope I was helpful.  Welcome again, good to have you with us.  Holler if you have more questions... and... ya know... PARTY ON! 

 

Aww heck, let's get crazy.  http://babylonjs-playground.com/#PZGBU#7

Active buckies:  control, alt, shift, and controlshift.  Full positional AND rotational control!  Wow!  Now we're smokin' the good stuff! 

[peteK2]

Hola @Wingnut

Wow, what a phenomenal response, this went above and beyond my question and I thank you for taking the time to help me on this.

This was very informative and it has really helped me progress with my project.

All the best!

[Wingnut]

Thanks @peteK2, those are nice words... I appreciate that.

I forgot to do scaling.    http://babylonjs-playground.com/#PZGBU#8

Now, control-alt dragging (up/down) does scaling on all three axes (including negative scaling, which makes the mesh look strange). 

It would be REALLY nice to have separate scaling of x, y, or z, PLUS all three at once, but I'm running out of buckies.    So, its all three at once. 

A "pro" way of doing this... would be to have "edit modes".  If user is in rotation mode, nobucky/control/alt/shift and combinations... do ONLY rotations. 

In position mode, all the buckies and combos ONLY do positioning.

In scaling mode, all the buckies and combos ONLY do scaling.

That way, we would have enough buckies and combinations to do only x scale, only y scale, only z scale, or all at the same time.

And you might even consider having edit mode and normal mode.  In normal mode, no positioning, rotating, or scaling can be done at all.  You might need some kind of indicator, like some canvas2D text at the bottom of the screen, indicating which mode the scene is in.  *shrug*  Perhaps middle mouse button click... toggles edit mode / normal mode. 

All the best to you, too.

[GameMonetize]

(Thanks Wingnut!)