In my current project, I am attempting to make the grandchild of a rotated Object3D element face towards the camera using the lookAt() method.
I have experimented with various approaches to achieve this. However, the source code for the Object3D.lookAt() function in Three.js clearly mentions:
// This method does not support objects with rotated and/or translated parent(s)From my understanding, this limitation is related to the hierarchy of objects in the rendering graph within the scene. Despite trying to replicate the logic of the lookAt() function, I have not been successful.
The structure of my objects is as follows: Object3D() [rotated] -> Object3d() -> Object3D() [text mesh that I want to align with the camera in each frame]
lookAt(textObject, artistProps) {
let m1 = textObject.matrixWorld.clone();
textObject.matrixAutoUpdate = false;
m1.lookAt(textObject.localToWorld(textObject.position), Props.camera.position, THREE.Object3D.DefaultUp);
textObject.quaternion.setFromRotationMatrix(m1);
textObject.matrixWorld.makeRotationFromQuaternion(textObject.quaternion);
textObject.matrixWorldNeedsUpdate = true;
textObject.updateMatrixWorld();
}
This code snippet represents one of my attempted solutions. It seems that my approach may be flawed. My current thinking is leaning towards isolating the child objects into their own container at the scene level so they can maintain their relationship with World space independently from the rotating parent.
Unfortunately, despite these efforts, the rotation of the text mesh (grandchild Object3D) remains unchanged. It almost appears as though no updates are taking effect. Even after consulting the documentation, I am unable to pinpoint the issue.
I would greatly appreciate any assistance on this matter. Thank you in advance!