Web GL : cours 4

Transformations

PF Villard d'après le cours de Eric Haines (Autodesk Inc.) disponible sur Udacity

Introduction

Coordonnées

Points et vecteurs dans THREE.JS

Exemples :


var a = new THREE.Vector3( 1., 0., 0. ) ;
var b = new THREE.Vector3( 0., 1., 0. ) ;

var c = new THREE.Vector3() ;
c=crossVectors (a, b);

Construire un vecteur :


Vector3( x, y, z) ;

Propriétés :


.x
.y
.z

Méthode :


.set(x, y , z)

Translation


cube.position.x = xPosition;
cube.position.y = yPosition;
cube.position.z = zPosition;

Rotation


cube.rotation.x = xRotationInRadians; // e.g. -70 * Math.PI/180
cube.rotation.y = yRotationInRadians;
cube.rotation.z = zRotationInRadians;

Axes de rotation

Démo sur les angles d'Euler

Scaling


cube.scale.x = xSize;
cube.scale.y = ySize;
cube.scale.z = zSize;

Ordre des transformations dans THREE.JS

L'ordres des transformations dans Three.js est toujours scale, rotate, translate
→ L'ordre d'écriture n'a pas d'importance !


box.position.x = 3.0;
box.rotation.y = 5.7;

est équivalent à :


box.rotation.y = 5.7;
box.position.x = 3.0;

qui est aussi équivalent à :


box.rotation.y = 122113.01;
box.rotation.y = 5.7;
box.position.x = 78893.02;
box.position.x = 3.0;

Composition de transformations

Rotation puis scale

Objet 3D (Object3D)


var block = new THREE.Mesh(
  new THREE.CubeGeometry(100,4,4), clockHandMaterial);
block.position.x = 40;

// Faire l’objet parent
var clockHand = new THREE.Object3D();
clockHand.add( block );

clockHand.rotation.y = -70 * Math.PI/180;
scene.add( clockHand );

Editeur de scène

Démo : bras robotique

Suite : Matrices

Le cours sur les matrices