How can I make sure the mesh is rotating around its center even when we move the mesh away from the center of screen to the right

Questions
,
1

Hi Friends,

I have a problem with rotating around center of my mesh. Originally when it is in the center i can rotate the object in a tight rotation whcih is the normal behavior. But the moment I move it to the right, my rotation is not tight anymore. It takes the entire screen to rotate it now.
Here it is in the center and rotates normally around the center (3 screen shots below):

Screenshot 2025-04-12 215747
Screenshot 2025-04-12 2157471527Ă—750 106 KB

Screenshot 2025-04-12 220248
Screenshot 2025-04-12 2202481410Ă—729 114 KB

Screenshot 2025-04-12 220732
Screenshot 2025-04-12 2207321514Ă—738 107 KB

And here it is when moving it to the right. As you can see to rotate the object it takes the entire screen. And it does not rotate around its center staying on the right side (three screen shots below show the amount of real estate it takes to rotate now).

Screenshot 2025-04-12 220326
Screenshot 2025-04-12 2203261520Ă—728 109 KB

Screenshot 2025-04-12 220344
Screenshot 2025-04-12 2203441518Ă—760 105 KB

image
image1516Ă—754 107 KB

I create the geometry using below lines using volumeX,VolY, and Volx coordinates (using nrrd protocol):

          const geometry = new THREE.BoxGeometry( volx, voly, volz );
          geometry.translate( volx / 2 - 0.5, voly / 2 - 0.5, volz / 2 - 0.5 );
           //geometry.center();

I tried using geometry.center() but it caused the color circles to fall outside the yellow bounding box so i had to switch to translate above.

Any insight to solve this is highly appreciated.

Thanks

2

It involves a three-step process:

  1. temporarily move the off-center mesh back to the center
  2. rotate the mesh about the center
  3. move the mesh back to the off-center location
3

Thanks @vielzutun.ch for the quick reply. I am a bit confused about what you suggested. Is there any threejs example that does that? How do it temporarily move the off center mesh back to the center during a rotation without making the user wondering why is the mesh jumping to the center.
I guess seeing some pseudo code or live example helps me visually understand your suggestion better.

Thanks

4

You would render after the move had been made making it “impercievable” another option would be to put the mesh in a group, move the parent group object to “off center” and proceed to rotate the child mesh…

5

Thanks @Lawrence3DPK. If i wanted to explore this solution:

  1. temporarily move the off-center mesh back to the center
  2. rotate the mesh about the center
  3. move the mesh back to the off-center location

How do i detect the user is rotating the mesh so i can temporarily move it to center and at what point and how do i detect the mouse to determine the rotation is done so i can move it back to the off center position.
A code fragment example would help me a lot understanding this flow better if you or any one else has one.

Thanks

6

I’d just put the box, the cloud and the dots a THREE.Group. Then rotating the group would be independent on its position if the position is changed by modifying the position property. If the movement is done by modifying directly the geometry data (i.e. vertices coordinates), then you have to translate, rotate and translate back as already suggested above.

This proposal is valid if you want to rotate the objects via code. If you rotate them by OrbitControls, then this is not the way.

2 Likes
7

I was away from my computer, so I couldn’t respond more timely. I see that you’ve been given good advice in the meantime.

Like @Lawrence3DPK said: the user doesn’t get to see the intermediate steps. Think of those steps as composing the transformation matrix for the mesh. The mesh only gets rendered once the transformation matrix has been fully specified.

Written as pseudo-code, that would look something like this, assuming, that you have a mesh at position px, py, pz, which you want to rotate about the rx, ry, rz angles::

mesh.position.set( 0, 0, 0 );
mesh.rotation.set ( rx, ry, rz );
mesh.position.set( px, py, pz );
...
...
render();
1 Like
8

Capture the pointer down start position, if intersecting the mesh…

Calculate the pointer move rotational x/y offset while pointer is down…

render()

but it is advised to not make concurrent geometry translations after thier initialization so it really depends on why you can’t use parental groups to make these transformations… Eg is there a reason you need to translate the geometry for this?

9

Thank you so much @vielzutun.ch / @PavelBoytchev / @Lawrence3DPK for your great insights. A couple of clarifications here:

1- I do have a group that contains the yellow binding box, the cloud, and the dots. And this rotation is via the mouse and not automatically. So user has to use the mouse to rotate the object.

2- I am using ArcballControls.

@Lawrence3DPK you mentioned:
“another option would be to put the mesh in a group, move the parent group object to “off center” and proceed to rotate the child mesh…”

Just wanted to reiterate that this is not auto rotation but a user initiated rotation of the group.

the geometry translation helps avoid this picture below:

Screenshot 2025-04-13 235714
Screenshot 2025-04-13 235714574Ă—669 119 KB

Things look totally out of line if we dont use this line:
geometry.translate( volx / 2 - 0.5, voly / 2 - 0.5, volz / 2 - 0.5 );

@Lawrence3DPK: can you please expand a bit more on the parent group solution as well since I do have a group with all these objects inside it.

Thanks again friends

10

Is it possible to setup a minimal reproduction of what you currently have, you can use this boilerplate if you need…

11

Maybe unexpectedly so, my above proposal also works at the group level, too:

group.position.set( 0, 0, 0 );
group.rotation.set ( rx, ry, rz );
group.position.set( px, py, pz );
...
...
render();
1 Like
12

@Lawrence3DPK unfortunately it is a big code base reading a lot of files to construct this image. Very hard to create a simplified example here. Otherwise I would have definitely done it.

13

Why don’t you take a step back and learn the basic concepts on an MVP that you could share? And later transfer your findings back into your big code base?

14

Thanks again guys. Sorry formore questions here.

@vielzutun.ch and @Lawrence3DPK I need a bit more insights on the mouse events associated with these three statements:

group.position.set( 0, 0, 0 );
group.rotation.set ( rx, ry, rz );
group.position.set( px, py, pz );

what pointer or mouse event is associated with the above three lines. my guess is they are: mousedown event, mousemove event and mouseup event. If I am correct about these user generated events, then my next questions is: how can we tell the difference between user just moving the group to the right verses rotating it. In either case the same three events will happen.
So how do you distinguish between the two case above (meaning simply moving the group around the scene using a mouse verses just rotating that group using a mouse). You get my point.
Anyway these are questions in my mind regarding this approach. I wish there was a code example that would do this. That would have been great if it was,

Look forward to your further insights.

Regards

15

I’m afraid you’re mingling two distinct questions:

  1. rotating an off-center group/mesh about its local axes
  2. triggering the above rotation via ArcBallControls

The 2nd question would merit a separate thread, imo. Once you have a solution for the 1st question.

16

right-click&drag vs. left-click&drag for moving/rotating respectively.
See this example.

17

Thanks @vielzutun.ch for your insights. I will give this a try and let you and the rest of friends know how it goes. Much appreciate every ones help.

18

Been there, done that. How to rotate an object around a pivot point? - it is a never ending dicussion since three.js seems to not offer a simple API for this type of operation but leaves users alone with fiddling.

19

could not agree with you more @seppl2019 . I finally found a solution that seems to work in terms of rotation around a pivot point, but it does not let you rotate the object 360 degrees in all directions since it is based on orbitcontrol logic. Here is that solution:
=^.^=

I experimented with transformcontrol but the fact that you need to rotate around three color gizmo access points makes that solution unusable for me, because I dont want any gizmos showing on the screen. I am trying to see if there is anyway to modify the camera-contol code to allow for 360 degrees rotation in all angles. But have not figured that out yet.

20

To me it seems like you are asking for the impossible:

an inherently 2D mouse movement shall be used for

  • classical camera control (via Orbit controls)
  • while sometimes be interpreted for object pan
  • or unlimited off-center object rotation
  • without showing/using gizmos

I expect you’re going to have to compromise somewhere.