What's the right way to rotate an object around a point in three.js?

This answer might help: Three JS Pivot point

There are several ways to approach this problem. As you mentioned, you CAN swap the pivot point in the parenting approach, but it's a lot of work, converting the object position to/from the different coordinate systems.

Instead, you can always look at it this way (pseudo-code):

1. Move the object to the pivot point

   1.1. SUBTRACT the the pivot point from your object's original position

2. Apply your rotation

3. Move the object BACK by the same position vector

   1.1. ADD the the pivot point to your object's new position

Note: Everything is in world coordinates, so you may need to convert appropriately.

Simple solution: move to the anchor point, rotate, and move back.

Let's assume you want to rotate a camera around an anchorPoint ( camera is an instance of THREE.Camera and anchorPoint is an instance of THREE.Vector3 here ):

/// step 1: calculate move direction and move distance:
let moveDir = new THREE.Vector3(
    anchorPoint.x - camera.position.x,
    anchorPoint.y - camera.position.y,
    anchorPoint.z - camera.position.z
);
moveDir.normalize();
let moveDist = camera.position.distanceTo(anchorPoint);
/// step 2: move camera to anchor point
camera.translateOnAxis(moveDir, moveDist);
/// step 3: rotate camera
camera.rotateX(valX);
camera.rotateY(valY);
camera.rotateZ(valZ);
/// step4: move camera along the opposite direction
moveDir.multiplyScalar(-1);
camera.translateOnAxis(moveDir, moveDist);