A-Z Three.js (Understanding Object Transformation)

Object transformation in three.js includes

1. position
2. scale
3. Rotation

This three property can be accessed from both a MESH and a camera.They all inherit from the Object3D class.

Let create a simple 3d box and show how the following property can be used.

Our scene
const scene= new THREE.Scene();

our red box

const box= new THREE.Mesh(
new THREE.BoxGeometry(1,1,1),
new THREE.MeshBasicMaterial({color:'red'})
)

Note: remember to add box to scene.

scene.add(box);

We could alter or change the position , scale and rotation on the X,Y,Z axis.

• Position ` box.position.x=1; box.position.y=3 box.position.z=3

or
box.position.set(1,3,3);

`

• Scale

`
box.scale.x=1;
box.scale.y=3
box.scale.z=3

or
box.scale.set(1,3,3);

`
You can probably guess for rotate.Remember you are working with degree (0- 360 degree) .Pie in Math.PI which is 3.14.... can help.

box.rotate.set(Math.PI*0.5,0.2,0.5);

Other property are

`
box.position.length()

camera.lookAt(cube1.position);

`
camera.lookAt(cube1.position) allows you to always position the camera on the object .So that the camera allows adjust itself to look at the camera.

This are the building block for creating animation in three.js .Which we shall explore in the next topic .