# Rotating an object around another object in all axis

**URL:** <https://discourse.threejs.org/t/rotating-an-object-around-another-object-in-all-axis/42090>\
**Category:** Questions\
**Tags:** animation\
**Created:** [September 1, 2022, 3:33am UTC](https://discourse.threejs.org/t/rotating-an-object-around-another-object-in-all-axis/42090 "2022-09-01T03:33:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![cebugdev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cebugdev/32/20619_2.png) [@cebugdev](https://discourse.threejs.org/u/cebugdev)\
**Post date:** [September 1, 2022, 3:33am UTC](https://discourse.threejs.org/t/rotating-an-object-around-another-object-in-all-axis/42090/1 "2022-09-01T03:33:40Z")

</div>

say if I have an object at a certain position and i want to go to a certain position in another object by going around the object instead, how do i do that?

i mean situation like this is simple  
i can just rotate the point around the pivot object center position (blue) and uses (0, 1, 0) as my axis as it only rotates around the Y axis.

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/f/ef4e6ce4da466f1ea874ca98703e3d5487aa7dc0.png)

my problem is say the original position is somewhere with x, y and z values, that means i need to rotate it in all axis. such as this drawing

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/a/fa36a082cb3b1a459bd71110a67acc6008098781.png)  
Now i need to figure out the axis to rotate to, and i am confuse on how to compute this rotate axis to get the new position.

one idea i have is to get the difference between each axis, and use it as an angle and rotate them individualy using each axis.

angleX = targetX - origX  
angleY = targetY - origY  
angleZ = targetZ - origZ

new X position = rotate in axis (1,0,0) with angleX  
new Y position = rotate in axis (0,1,0) with angleY  
new Z position = rotate in axis (0,0,1) with angleZ

Anyone got better idea or something to help?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [September 1, 2022, 3:59am UTC](https://discourse.threejs.org/t/rotating-an-object-around-another-object-in-all-axis/42090/2 "2022-09-01T03:59:39Z")

</div>

You can also orbit things around other things using quaternions. To just make the orbiting object jump to a target position:

1. Create the “planet” to orbit around.
2. Create a group and place it at the same position as the “planet”.
3. Create the “moon” object and add it to the group - then move the “moon” within the group away from the origin point to create the orbit radius.
4. Use [Object3D.lookAt](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D.lookAt) to point the group from point 2 towards the target position - effectively placing the “moon” at the target position.

Alternatively, for a smooth movement:

1. Create the “planet”.
2. Create a group and place it at the same position as the “planet”.
3. Create and add the “moon” object to the group - then move the “moon” within the group away from the origin point to create the orbit radius.
4. Create a second group / empty Object3D - an invisible mock - and place it at the same location as the “planet”.
5. Use [Object3D.lookAt](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D.lookAt) to point the mock towards the target point / position you want the “moon” to be at next. That will set the quaternion of the mock to point at the target position.
6. Use [Quaternion.slerp](https://threejs.org/docs/index.html?q=quater#api/en/math/Quaternion.slerp) to smoothly transition quaternion of the group from point 2 to the target position.

[Example](https://codepen.io/mjurczyk/pen/bGMbvdj?editors=0010)