Rotating an object around a distant pivot object based on the pivot object rotation

Questions
, ,
1

Hi, I need to make a blue object to rotate around a distant red one like in the following example

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:

    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

// 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:

    // 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

2

In looks like all you need in this:

red.rotation.y += .01;
red.rotation.z += .02;
    
blue.quaternion.copy(red.quaternion);
blue.position.set(0,0,0);
blue.translateX(10);
3 Likes
3

Brilliant!