Using gizmo to stretch mesh in one direction

Questions
#1

Hi All-

I have a homemade control that uses drag behaviors to stretch the cube so the top surface is sloped. The code is so nasty I’m ashamed to show it here.

I did a simple experiment to do this with a bounding box gizmo. If you scale it the top slopes up:

https://playground.babylonjs.com/#6E4LSB#55

But I want this behavior to reflect the direction of the drag and which of the scale controls has been grabbed. In other words, I want to be able to slope and un-slope top and to be able to have the behavior occur only when the scale controls in the upper right and upper left corners of the bounding box are grabbed.

I am pretty familiar with the drag events but I don’t see any examples that show how to get the event when onScaleBoxDragObservable fires.

I also don’t see any examples that show how to determine which of the scale controls has been grabbed.

Thanks in advance for any help.

Cheers!

-Flex

#2

pinging @Cedric

#3

I just tried the approach of using gizmo manager, as it appears as if I can get the drag events via
gizmoManager.boundingBoxDragBehavior.onDragObservable.add

But adding the event handler prevents the gizmo from working. No bounding box appears when I click on the mesh. The console complains:

[Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as ‘passive’ to make the page more responsive. See

https://playground.babylonjs.com/#P7PYXG#1

#4

It might be difficult to limit the boundingBoxGizmo to tailor your needs.
Did you consider creating 2 axisDragGizmo, one for each side?
I don’t know if you want to do something else than stretch up on left and right but it might be an easier solution.

#5

Thanks Cedric.

I kinda understand what you’re saying. I tried making submeshes for each face and attaching the gizmo to one face which does not seem to work.

https://playground.babylonjs.com/#6E4LSB#58

Even if it did work, this approach would make a mess of the mesh, as the other facets that use the transformed vertices would not be update as far as I can tell.

I am curious: Does babylon allow me to build a mesh that has compressed vertex data? When I make a box using the meshbuilder I get 24 vertices 8 of which are unique. Can I make a mesh for a box that has 8 indices and indices that overlap, if that makes sense? This might make my problem easier to solve. Or not! :sweat_smile:

#6

Nop. A vertex is not just a position. It’s also a UV, normal. If you have 2 different normals for a position, then you have 3 vertices.
At the box corners, you have 3 different normals (1 for each side of the box it touches). 8 positions but 3 differente vertex per position is 24 vertices total.
Gizmo cannot be attached to a submesh. But you can create transient transforms (1 per side). Attach 1 axisDragGizmo for each transform. When the transform is dragged, you update the mesh according to the value of each transform position.

#7

Here’s a solution with one or more axis drag gizmos attached to an invisible mesh located on several faces. Definitely buggy and in need of some serious tidying up. Thanks, Cedric, for the inspiration!

https://playground.babylonjs.com/#DDS0KG#1

-Flex

1 Like
#8

It’s taking shape! Keep up the good work :slight_smile:

#9

Cedric-

But you can create transient transforms

Do you mean create a transform node for each side? Do you know of any examples in the playground? I searched unsuccessfully.

I am currently making a mesh for each side, then setting the origin to the center so the controls show up in the right place. The boxes also rotate, which adds another layer of complexity.

Thanks-

Flex

#10

yes, 1 transform for each side like:

var leftTransform = new BABYLON.TransformNode("left, scene");
var leftGizmo = new BABYLON.AxisDragGizmo(new BABYLON.Vector3(0,1,0));
leftGizmo.attachedNode = leftTransform;

Then, get the position of the transform and update your mesh accordingly. Only 1 mesh is needed then.

#12

I’m making some progress and learning a lot about babylonjs in the process. Great fun! Here’s my latest:

https://playground.babylonjs.com/#NMED9Y#8

I am now using transform nodes. I wanted to be able to move the “walls” and have the gizmos follow so now when the mesh is moved I update the locations of the gizmos using the world coordinates of the faces. So far so good.

I put some cheesy keyboard controls to move (w,s,z,a) and rotate ® the mesh to verify that my relocating the gizmos works.

There are 2 things that I could use some help with.

  1. Stretcher.refreshAll(), which refreshes the the gizmo locations lags when it’s called from the keyboard events. It does not lag when called from the onDragEndObservable event. It’s almost as if the mesh does not update after the rotation and location are changed.

edit: computeWorldMatrix fixes this problem.

  1. The axis drag gizmos don’t update their normals after a rotate. I tried several approaches, such as rotating the transform node and then updateGizmoRotationToMatchAttachedMesh as well as chaning the drag behavior normals.

I also have a feeling that I am making things more complicated than they need to be. New to the framework and still getting up to speed!

Thanks all!