3D transforms

.position

👍

Is used in:

• MeshComponent
• LightComponent
• CameraComponent

position is a 3D vector (THREE.Vector3) object that defines where mesh is located in space.

JavaScript

ball.position.set(10, 20, 45);

ball.position.x // -> 10
ball.position.y // -> 20
ball.position.z // -> 45

Modifying values and methods

That's several examples of how you can modify positon:

• ball.position.set( x, y, z )
• ball.position.setX( x ), (.setX(), .setY(), .setZ() methods).
• ball.position = new THREE.Vector3( x, y, z )

There are a lot of other methods that .position handles as a THREE.Vector3. You may see the list of methods at Three.js documentation.

📘

.position is automatically applied to physics object if you use a Physics version [Todo: add link].

.rotation

👍

Is used in:

• MeshComponent
• LightComponent
• CameraComponent

Used in: MeshComponent, LightComponent, CameraComponent

rotation is a THREE.Euler with x, y and z values and has almost same methods as a .position. It defines a rotation regarding object position.

JavaScript

ball.rotation.set(10, 20, 45);

ball.rotation.x // -> 10
ball.rotation.y // -> 20
ball.rotation.z // -> 45

Modifying values and methods

Commonly used:

• ball.rotation.set( x, y, z )
• ball.rotation.setX( x ), (.setX(), .setY(), .setZ() methods).
• ball.rotation = new THREE.Euler( x, y, z )

See list of THREE.Euler methods at Three.js documentation.

📘

.rotation will be converted to a quaternion and applied to it's physics object linked to the component. (Only if you use a Physics version [Todo: add link]).

.quaternion

👍

Is used in:

• MeshComponent
• LightComponent
• CameraComponent

quaternion, THREE.Quaternion is another way to rotate 3D object in space. It has x, y, z and w values.

JavaScript

// Convert euler to quaternion.
ball.quaternion.setFromEuler(new THREE.Euler(Math.PI / 2, 0, 0));
// Set values.
ball.quaternion.set(10, 20, 45, 60);

ball.quaternion.x // -> 10
ball.quaternion.y // -> 20
ball.quaternion.z // -> 45
ball.quaternion.w // -> 60

Modifying values and methods

Commonly used:

• ball.quaternion.set( x, y, z, w )
• ball.quaternion.setX( x ), (.setX(), .setY(), .setZ(), .setW() methods).
• ball.quaternion = new THREE.Quaternion( x, y, z, w )
• ball.quaternion.setFromEuler(new THREE.Euler( x, y, z ))

See list of THREE.Quaternion methods at Three.js documentation.

.scale

👍

Is used in:

• MeshComponent

scale, THREE.Vector3 is a vector that defines mesh scale.

JavaScript

ball.scale.set(2, 2, 2)

ball.scale.x // -> 2
ball.scale.y // -> 2
ball.scale.z // -> 2

Modifying values and methods

Commonly used:

• ball.scale.set( x, y, z )
• ball.scale.setX( x ), (.setX(), .setY(), .setZ() methods).
• ball.scale= new THREE.Vector3( x, y, z )

See list of THREE.Vector3 methods at Three.js documentation.