DEV Community

es404020
es404020

Posted on

1

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 .

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay