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):
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).
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.
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…
Thanks @Lawrence3DPK. If i wanted to explore this solution:
temporarily move the off-center mesh back to the center
rotate the mesh about the center
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.
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.
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::
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?
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:
@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.
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?
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,