Rotate using pivot point

Questions
1

Hi All,
I’m trying to implement an intuitive way of rotating and translating a set of objects using a transform node:

  • rotation works using the left mouse button (smooth transition between x/y rotation near the center of the screen; z rotation near the edges)
  • translation works using the middle mouse button (translation axes should always be screen x and y)
  • mouse wheel is for zooming

Here’s the PG.

The problem

The center of rotation should always be the center of the screen (shown by the red sphere) even after translation. Therefore, I messed with the pivot point, but something is always off. :confused:

Any input is highly appreciated. :pray:

2

Hello! You could use a middle node in the hierarchy to set the translation Custom Rotate | Babylon.js Playground (babylonjs.com)

1 Like
3

Hi @carolhmj, that’s a great solution! Thanks a lot! :+1:

I considered it, but always thought that I’m just one setPivotPoint() call away from a “simpler” solution.

4

This is more of a matter of preference but I like having transform nodes because it makes very explicit what is happening with the hierarchy :stuck_out_tongue: (otherwise you have to look at the code to see there is a pivot matrix and I think this is more prone to errors)