# Rotating an object around a distant pivot object based on the pivot object rotation
**URL:** https://discourse.threejs.org/t/rotating-an-object-around-a-distant-pivot-object-based-on-the-pivot-object-rotation/39987
**Category:** Questions
**Tags:** rotation, pivot-point, math
**Created:** [July 4, 2022, 4:35pm UTC](https://discourse.threejs.org/t/rotating-an-object-around-a-distant-pivot-object-based-on-the-pivot-object-rotation/39987 "2022-07-04T16:35:27Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@aDeveloperCase](https://discourse.threejs.org/u/aDeveloperCase)
#### Post date: [July 4, 2022, 4:35pm UTC](https://discourse.threejs.org/t/rotating-an-object-around-a-distant-pivot-object-based-on-the-pivot-object-rotation/39987/1 "2022-07-04T16:35:27Z")
Hi, I need to make a blue object to rotate around a distant red one like [in the following example](https://jsfiddle.net/aDeveloperCase/u13tpn8h/59/)
As you can see the red object rotates around the y axis and, based on this rotation, the blue object rotates and translates around the first one.
Everything works fine until I make the red object rotate both around the y and the z axis.
That means that as soon as I uncomment the following:
```nohighlight
red.rotation.y += 0.01;
red.rotation.z += 0.01;
```
The blue object goes crazy.
All I have at the moment are the `rotateAboutPoint` function from this [StackOverflow answer](https://stackoverflow.com/questions/42812861/three-js-pivot-point/42866733#42866733)
```nohighlight
// obj - your object (THREE.Object3D or derived)
// point - the point of rotation (THREE.Vector3)
// axis - the axis of rotation (normalized THREE.Vector3)
// theta - radian value of rotation
// pointIsWorld - boolean indicating the point is in world coordinates (default = false)
function rotateAboutPoint(obj, point, axis, theta, pointIsWorld){
pointIsWorld = (pointIsWorld === undefined)? false : pointIsWorld;
if(pointIsWorld){
obj.parent.localToWorld(obj.position); // compensate for world coordinate
}
obj.position.sub(point); // remove the offset
obj.position.applyAxisAngle(axis, theta); // rotate the POSITION
obj.position.add(point); // re-add the offset
if(pointIsWorld){
obj.parent.worldToLocal(obj.position); // undo world coordinates compensation
}
obj.rotateOnAxis(axis, theta); // rotate the OBJECT
}
```
and the following 3 lines to retrieve the rotation axis and angle of rotation:
```nohighlight
// Extracting the rotation axis and the angle from quaternion and storing it into a Vector4...
axisAngle.setAxisAngleFromQuaternion(red.quaternion);
// Setting the axis values to a Vector3
rotAxis.set(axisAngle.x, axisAngle.y, axisAngle.z);
var theta = axisAngle.w - oldAxisAngle.w;
```
I’m clearly missing something but I can’t figure out what yet.
I need to accomplish such rotation without translating the geometry of the blue object beforehand, just the position and rotation.
I would really appreciate some help on this issue.
Thanks
---
### Author:  [@tfoller](https://discourse.threejs.org/u/tfoller)
#### Post date: [July 4, 2022, 5:05pm UTC](https://discourse.threejs.org/t/rotating-an-object-around-a-distant-pivot-object-based-on-the-pivot-object-rotation/39987/2 "2022-07-04T17:05:39Z")
In looks like all you need in this:
```javascript
red.rotation.y += .01;
red.rotation.z += .02;
blue.quaternion.copy(red.quaternion);
blue.position.set(0,0,0);
blue.translateX(10);
```
> **[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/tfoller/pyawcqxk/15/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
---
### Author:  [@aDeveloperCase](https://discourse.threejs.org/u/aDeveloperCase)
#### Post date: [July 5, 2022, 4:17am UTC](https://discourse.threejs.org/t/rotating-an-object-around-a-distant-pivot-object-based-on-the-pivot-object-rotation/39987/3 "2022-07-05T04:17:26Z")
Brilliant!