Jump to content

Gizmo's and mesh dragging behaviors


Recommended Posts


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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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) => {

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

Thank you

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

@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


Link to comment
Share on other sites

@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. :)

Link to comment
Share on other sites

  • 1 month later...

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?

Link to comment
Share on other sites

  • 2 months later...

@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

Link to comment
Share on other sites

  • 2 weeks later...

@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.

Link to comment
Share on other sites

  • 1 month later...

@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.


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 ?


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...