Rotating a grouped object on its own axis

Hi,

Sorry for repeating this question and I checked out many posts regarding this issue but I still can’t get it to work. I have a checkerboard on the X Y plane with many objects and labels in a group object.

worldNormal

I have an on-click event that will rotate the camera on the Z axis 90 degrees.
I figured out how to rotate the camera but I can’t figure out how to keep the label where it should be and just rotate the label object 90 degrees with the camera.

I started by trying the .rotateZ(Math.PI / 2). Which I believe rotates on the world axis.

world90degree

I saw this function on a different post

 // Rotate an object around an arbitrary axis in object space
 var rotObjectMatrix;
 function rotateAroundObjectAxis(object, axis, radians) {
        rotObjectMatrix = new THREE.Matrix4();
        rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);

        // old code for Three.JS pre r54:
        // object.matrix.multiplySelf(rotObjectMatrix);      // post-multiply
        // new code for Three.JS r55+:
        object.matrix.multiply(rotObjectMatrix);

        // old code for Three.js pre r49:
        // object.rotation.getRotationFromMatrix(object.matrix, object.scale);
        // old code for Three.js r50-r58:
        // object.rotation.setEulerFromRotationMatrix(object.matrix);
        // new code for Three.js r59+:
        object.rotation.setFromRotationMatrix(object.matrix);
    }

so I tried something like

    var zAxis = new THREE.Vector3(  0, 0, 1);
    rotateAroundObjectAxis( groupedLabelObject, zAxis,  Math.PI / 2 );

but results to this:

worldWrongRotation

it looks like the position in terms with X and Y appears to be correct but it’s rotating the wrong direction.

I also tried .rorateOnAxis and .rotateAroundWorldAxis with different variation but I still can’t get it to work.

Any help will be appreciated

How is this structured, are the labels children of those objects?

No, the labels are not children of those objects. However, I am trying to create new Group for each object’s labels. So for example, the bottom right corner cubes label “c”,“d”,“e”, and “f” will be in one group. So each label is a children of a group. When I rotate the camera, I am trying to rotate that group with the camera so the letter stays up right.

I have tried just rotating the labels but it’s not the result I want. When I rotate just the label it will look something like this:
[C][D][E]
[F]
to:
[F][C]
[ ] [D]
[ ] [E]

I want to keep the
[C][D][E]
[F]
position even when I rotate the camera on z-plane.