Rotating a grouped object on its own axis

Questions
, ,
1

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

2

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

3

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.