Gizmo's and mesh dragging behaviors

[trevordev]

Hey,

Gizmo's (position, rotation, scale, bounding box) and Mesh behaviors (pointerDrag, sixDofDrag) have been added to the latest Babylon preview. 

Gizmo docs

Mesh behaviors docs

GizmoManager playground

GLTF bounding box playground

Please let me know if you have any feedback. Thanks!

[inteja]

Looks awesome! Does this work with children & groups e.g. TransformNode, or just Mesh?

[trevordev]

Thanks, it should work with children/groups as well.

Attaching to just individual child: https://www.babylonjs-playground.com/#4TBMBR#1

Attaching to parent containing children: https://www.babylonjs-playground.com/#4TBMBR#2

If you have a specific scenario in mind that doesn't work let me know and I can see if theres something I can do to support it.

[Arte]

@trevordev Absolute perfect! Thank you

Can you add option:

rotationGizmo change to scaling? 

It really would be great.

[satguru]

Nice!

Very flexible architecture.

The new UtilityLayerRenderer will be very useful.

 

[MarianG]

 ? Forzza BabylonJS!!! ?
Thank you for this. It's exactly what I need for my current project, it helps me alot.

[babbleon]

Hi @trevordev,

Excellent work.

Do we have some means of easily getting the current rotation or scale of the mesh being manipulated?

Currently, I have this:

var utilLayer = new BABYLON.UtilityLayerRenderer(scene);
		gizmoX = new BABYLON.AxisDragGizmo(new BABYLON.Vector3(1, 0, 0), new BABYLON.Color3(1, 0, 0), utilLayer);
		gizmoX.attachedMesh = mesh;
		gizmoX.updateGizmoRotationToMatchAttachedMesh = false;
		gizmoX.updateGizmoPositionToMatchAttachedMesh = true;
		gizmoX.snapDistance = .001;
		gizmoX.onSnapObservable.add((event) => {
			console.log(gizmoX._attachedMesh.position.x);
		})

Also, if we use GizmoManager , we can't use onSnapObservable, as far as I'm aware,

Thank you

[trevordev]

Thanks for the feedback

@Arte can you explain what you mean by "rotationGizmo  change to scaling"? You want the spheres to scale the model as well? Or do you just want to hide them to only have scaling at the corners (this is possible right now with gizmo.setEnabledRotationAxis("");)?

@babbleon You can listen to the gizmo.dragBehavior.onDragObservable instead of onSnapObservable. You are correct that the gizmo event's are not public on the gizmo manager, I could look into making the underlying gizmos of the manager public if this is desired.

 

[Arte]

I meant to scale separate axis like in pic.

Does that make sense?

 

[babbleon]

Hi @trevordev,

gizmo.dragBehavior.onDragObservable work perfectly, thank you.

Yes please to making the gizmoManager's events public.

 

[trevordev]

@Arte I think this could be done by creating a new class that extends the bounding box gizmo that adds the new scale controls to the _anchorMesh of the gizmo. I am not sure how the scaling you mentioned would work though, if the new scaling cubes were added where the rotation sphere were on the right would they scale along the x axis or the z axis, or would it be different depending on where you are looking at it from?

@babbleon Sure is this ok? https://github.com/BabylonJS/Babylon.js/pull/4725 Once merged it should work in this PG: http://playground.babylonjs.com#7KX2R8#123

 

[Arte]

@trevordev "I am not sure how the scaling you mentioned would work though"

"new scaling cubes were added where the rotation sphere" That could be optional.

Also scaling by face could be as option "the same principle as in picture", just scaling one direction (one axis).

I hope it is more clear now. 

[trevordev]

@Arte Thanks I understand now. I'll see if I can do something to support this.

Sorry I still havn't gotten to this, as I have bunch of other work on my plate. If you still need this you can try to extend the gizmo class and add support for this manually.

[Azariel]

So positionGizmos have simple hooks into the dragBehavior, with onDragStartObservable and onDragEndObservable methods. BoundingBoxGizmos don't seem to have any equivalents when it comes to basic repositioning; how can I monitor whether the boundingBoxGizmo is being dragged?

[trevordev]

Do you have a playground you are referring to? Are the events in this PG not what you are looking for https://playground.babylonjs.com/#6E4LSB#15 . Or are you using the gizmoManager I dont believe the dragging events are exposed there but I can make this public if its required.

[keiz]

@Arte Hi Arte, did you create a gizmo like you explained in your pictures? If so, could you share it with me. Thanks!

[Arte]

Hi @keiz ,

No 

We need to ask @trevordev

[trevordev]

@keiz , @Arte Are you okay with no rotation when this is enabled? Is the main reason this is needed is to achieve non-uniform scale with the bounding box gizmo and why not use the rotation/scale/position gizmos instead of bounding box for this.

You can see how to try and extend the boudinding box in this playground: https://playground.babylonjs.com/ts.html#IF8723#2 . I started it a bit to position and place the cubes, you can try to add drag events similar to how its done here: https://github.com/BabylonJS/Babylon.js/blob/85e4517202fed3893a0c0a2bbd430e454208afae/src/Gizmos/babylon.boundingBoxGizmo.ts

[Arte]

"Are you okay with no rotation when this is enabled?" - BIG Yes from me 

Thank you @trevordev

[JonathanRev]

@Arte did you got that ? i also think it should be needed to have scale instead of rotation.....

Does anyone got the solution?

[Dad72]

@Trevordev, I also think that the bounding box should have position, rotation and scale. The points make me think of a rescaling as on other software.
It would take something in the middle of the bounding box (rotation arrow) that makes the rotation and the points for a resetting to the scale.

[Guest]

Do you guys mind continuing this thread on the new forum?

[DrEight]

@trevordev I'm trying to control the children of loaded .glb but the position of the axes is not inside the bounding box as expected, but outside.

https://playground.babylonjs.com/#EYEPRI#140

With this model the 3 axis are just outside the bounding box, but I have models where the 3 axis are far, far away from the selected mesh.

Is there any way to correctly position the 3 axis inside the bounding box ?

 

[trevordev]

@DrEight fyi the forum moved to https://forum.babylonjs.com/ . I believe this is due to how the model was authored, each meshes origin is the center which causes this issue. To workaround this you could iterate over all the child meshes find their bounding box center, offset them so it is their 0,0,0 and then bake their transforms.