# Target Axes Alignment

## Transformations

## Target Axes Alignment

When you want to rotate a mesh (or a camera) so that it lines up with a set of given axes you can use the *RotationFromAxis* method as follows

var orientation = BABYLON.Vector3.RotationFromAxis(axis1, axis2, axis3);mesh.rotation = orientation;

where *axis1*, *axis2* and *axis3* are three left-handed orthogonal vectors and the mesh will be aligned with

*axis1*as the x axis in its local space*axis2*as the y axis in its local space*axis3*as the z axis in its local space

## Align Plane to Curve

At any point along curve in 3D space the tangent, normal and binormal form a set of orthogonal axes, call these the point axes. A plane created in Babylon.js has a normal along the z axis with the x and y axes lying in the plane. We can draw a curve in space using an array of position vectors. By creating a 3D path from this curve we can obtain the normal, tangent and binormal of the curve at each of the positions that define it. Using the *RotationFromAxis* we can align the x, y and z axes of the plane with the point axes of the curve. There are 6 ways to order a group of three axes and so 6 ways to align the plane axes to the curve point axes.

All six ways are used in the playground below. The top one [0] has the plane tangential to the curve and the fourth one down [3] is perpendicular to the curve. Others can twist the plane at certain points.

Aligning a Plane To a Curve## Align Camera

Given two spheres draw a plane between them that always faces the camera. We are going to set up red and green spheres, world axes, show as red, green and blue lines, and a purple plane in the xz plane. Joining the red and green spheres is a plane with a blue arrow on it pointing from the green to the red sphere.

The requirement is for the arrow plane to rotate such that

- one of its orthogonal axes that lies on the arrow is along the line joining the two spheres;
- the other axis lying on the arrow plane is perpendicular to the camera lens;
- the axis normal to the plane is along the line joining the middle of the arrow to the camera.

In this way the camera always faces the arrow plane as can be seen in the this playground.

Aligning Camera AxesThis is achieved by forming axis 1 to join the spheres

axis1 = (sphere1.position).subtract(sphere2.position);axis3 = BABYLON.Vector3.Cross(camera.position, axis1);axis2 = BABYLON.Vector3.Cross(axis3, axis1);

axis 3 to be perpendicular axis 1 and to the axis through the camera position and axis 2 from the camera to the arrow plane.

The mesh is rotated to face the camera using

mesh.rotation = BABYLON.Vector3.RotationFromAxis(axis1, axis2, axis3);

## Using Quaternions

If you prefer using quaternions instead of Euler angles, then *RotationQuaternionFromAxis()* computes the required rotation quaternion to assign to the mesh property *rotationQuaternion*.