trevordev

Gizmo's and mesh dragging behaviors

Recommended Posts

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!

Share this post


Link to post
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.

Share this post


Link to post
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) => {
			console.log(gizmoX._attachedMesh.position.x);
		})

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

Thank you

Share this post


Link to post
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.

 

Share this post


Link to post
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

 

Share this post


Link to post
Share on other sites

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

Capture.PNG.72111dace25c734cf4b2c534f2ad70c3.PNG

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.