Make Camera follow position Gizmo?

I’ve been playing around with the position gizmo.
I noted that you couldn’t go any further once you reach the canvas boundary. A user would have to move the camera before continuing dragging the object.

Therefore I’ve been trying to introduce a dragBehavior that updates the camera rotation so that the item being moved is always on screen.
I have a playground ready that is a rough example of what I am trying to achieve:

In this playground if you drag the X-axis, the camera will rotate to follow the item.
While working on this I realized that my approach was completely wrong and that I sucked at math.

I don’t want to re-invent the wheel and was therefore wondering if there was a way to have the camera rotate so that the position gizmo and its object are always within the view.

Also worth noting, I don’t want to force the object and the gizmos to be in the center of the screen.

Cheers team


Does it make any sense to rotate the camera while moving the gizmo? It will cause the gizmos to rotate as well. This could be solved as well though (two cameras? didn’t think about it deeper) but maybe you can do this, so the camera will follow the sphere wherever you are dragging it with the gizmo:

camera.parent = sphere

This can be solved by offseting the camera.

EDIT: I’ll try to make a working PG with rotation involved though.

This can be solved by setting the customRotationQuaternion of the gizmo in the render loop.

I still didn’t have time to fully ellaborate on the problem but it’s interesting so I’ll definitelly get back to it a bit later :slight_smile: Not the implementation is the problem here but to fully describe the behavior you want to achieve. My first thoughts are just to set the camera position so it is always looking from a given distance through the gizmo targeting a given position.

1 Like

heya @roland,
Thanks for this!

The full behavior described:

  • As you move the object (and the gizmo), the camera would pan/rotate to attempt and keep the object within the camera view.
  • As the object gets really far on the z axis (the object gets further and further) the camera almost doesn’t rotate.
  • If the object is already at the edge of the canvas when we start dragging, the behavior should be exactly the same (no sudden jump to center the camera on the object).
  • The camera shouldn’t change position.

Is this helpful?

It will cause the gizmos to rotate as well.

Rotating the camera rotates the gizmo? I thought that as long as the dragPlane of the dragBehavior wasn’t updating, the gizmo wouldn’t rotate or change behavior as you drag it.

In the actual project I am developing, I have a circumstance where I can’t really do camera.parent = sphere because the camera’s parent is a WorldOffset (a transform node) to solve some z-fighting issues. Below is the same playground where I’ve added a transform node that is the parent of camera and the sphere.

Anyway, I think it is a fun and challenging feature to implement

Cheers for the help Roland

1 Like

Hey @Benjythebee !
Sorry for the late response! I was very very busy for the last two weeks. What’s the current status? Any progress on this or waiting for me to try to do something with it? :stuck_out_tongue:

1 Like

Hey there! If you are only parenting the camera because of the z-fighting, there are some other ways you could work around that, like zOffset Material | Babylon.js Documentation ( :slight_smile:

Hey there just checking in, was your question answered? @Benjythebee