Coordonnées

Les objets 3d sont situés dans un espace en trois dimensions. Nous avons donc 3 axes pour les définir : x, y et z.

Axes

• x : Gauche (-) / Droite (+)
• y : Bas (-) / Haut (+)
• z : Devant (-) / Derrière (+)

Ces axes peuvent changer mais retenons ça pour l'instant.

Modifier les coordonnées

• https://threejs.org/docs/#api/en/objects/Mesh (opens in a new tab)

Nous allons modifier les coordonnées d'un objet 3d, c'est à dire le mesh.

mesh.position.x = 1.5

Nous avons accès aux coordonnées car Mesh hérite de l'objet Object3D.

• https://threejs.org/docs/#api/en/core/Object3D (opens in a new tab)

Lorsque je déplace le mesh de 2 unités sur l'axe x, je vois la face droite de l'objet.

mesh.position.y = 2
mesh.position.z = -2

Lorsque vous déplacez l'objet, soyez attentif aux axex.

Exercice : axes

mesh.position

Regardons ce que contient mesh.position :

console.log(mesh.position)

Il s'agit d'un objet de type Vector3 qui contient les propriétés x, y et z. Le prototype de Vector3 contient des méthodes et propriétés, dont length.

console.log(mesh.position.length())

mesh.position.length est une méthode qui permet de calculer la distance entre le point d'origine du repère (0, 0, 0) et le point (x, y, z) de l'objet.

Méthodes et propriétés de Object3D

Helpers

Nous pouvons ajouter des axes pour nous aider à visualiser les coordonnées.

const axesHelper = new THREE.AxesHelper(2)
scene.add(axesHelper)

• https://threejs.org/docs/#api/en/helpers/AxesHelper (opens in a new tab)

Nous avons accès à d'autres propriétés, comme scale, rotation et quaternion.

Scale

mesh.scale.x = 2
mesh.scale.y = 0.5
mesh.scale.z = 0.5

Rotate

Les autres propriétés sont des Vector3, alors que rotation est un Euler.

• https://threejs.org/docs/index.html#api/en/math/Euler (opens in a new tab)

Les angles sont en radians.

Pour rappel :

• 0° = 0 rad
• 90° = π/2 rad
• 180° = π rad
• 270° = 3π/2 rad
• 360° = 2π rad

mesh.rotation.x = Math.PI * 0.5
mesh.rotation.y = Math.PI * 0.5

⚠️ Attention à l'ordre des opérations

Ordre

Rotation et translation ne sont pas commutatives.

C'est à dire qu'une rotation suivie d'une translation n'est pas équivalente à une translation suivie d'une rotation.

Faire une rotation de 90° puis une translation de 2 unités sur l'axe x n'est pas équivalent à faire une translation de 2 unités sur l'axe x puis une rotation de 90°.

En mathématiques cela signigie que :

$a \cdot b \neq b \cdot a.$

Changement d'axe

Effecuter une rotation sur un axe modifie les autres axes.

Quaternion

Les quaternions sont une autre façon de représenter les rotations.

• https://threejs.org/docs/#api/en/math/Quaternion (opens in a new tab)

Look At

Si vous voulez que la caméra regarde un objet, vous pouvez utiliser la méthode lookAt.

camera.lookAt(new THREE.Vector3(0, 0, 0)) // Pour un point fixe, ici l'origine
camera.lookAt(mesh.position) // Pour regarder un objet

Group

const group = new THREE.Group()
group.add(mesh)
 
const mesh2 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: "orange" })
)
mesh2.position.x = - 1.5
group.add(mesh2)
 
const mesh3 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: "blue" })
)
group.add(mes3)
 
group.rotation.z = Math.PI * 2
 
scene.add(group)

• https://threejs.org/docs/#api/en/objects/Group (opens in a new tab)

Les groupes sont des objets Object3D qui peuvent contenir d'autres objets Object3D. Ils ont donc les propriétés position, scale, rotation et quaternion.