Rotate Label to fit on sphere with quaternion


I have a sphere and want to put labels with planes on it.

Because I use babylon-react with declarative syntax:

<plane rotationQuaternion={quaternion} ... />

I need to rotate the label to the right direction with one rotationQuaternion.

So far I have managed to rotate the label to face towards the sphere. It must be rotated another 180° to face away from the sphere.

It looks like in this playground:

The rotation is done like this:

const norm = new BABYLON.Vector3(-pos.x, -pos.y, -pos.z).normalize();
const axis = BABYLON.Vector3.Cross(BABYLON.Axis.Z, norm);
const angle = Math.acos(BABYLON.Vector3.Dot(norm,BABYLON.Axis.Z));

mesh.rotationQuaternion = BABYLON.Quaternion.RotationAxis(axis, angle);

I hope someone knows how to do this with a single rotationQuaternion.


Hello and welcome,

so you need to add a new rotation to your quaternion is that correct?

If yes, you can simply multiply it like:

myQuaternion = myQuaternion.multiply(BABYLON.Quaternion.FromEulerAngles(0, Math.PI, 0))
1 Like