Aujourd'hui, c'était animation de caméra. En utilisant un event.clientX ou Y en fonction de l'axe qu'on veut récupérer et qu'on le stocke dans un tableau quelconque (js natif, pas three), on récupère une value en fonction de ou se situe notre curseur sur l'écran. Le problème, cette value n'est pas vraiment exploitable facilement pour nos mouvements de caméra. On aimerait avoir une value en 0 et 1, 0 étant le bord gauche de notre canva et 1 le bord droite donc ce qu'on fait, on divise la valeur de notre clientX par la width de notre canvas qu'on a initialisé précédemment. Admettons que notre canva fasse 500 en largeur et que notre clientX nous renvoit 200px, on fait 200/500 et on obtient 0.4, ce qui est cool car on a notre valeur comprise en 0 et 1. Ensuite ce qu'on peut faire, c'est attribuer notre valeur et x et en y à notre caméra respectivement sur le bon axe camera.position.x = (admettons qu'on ait un objet comportant nos deux valeurs actualisées ) positionValue.x . Cela nous permet de faire tourner notre caméra. Le problème, c'est que le y de THREE.js et celui de js natif ne fonctionne pas de la même manière. Celui de js part de 0 en haut de l'écran et augmente en descendant, c'est l'inverse dans THREE, on a déjà vu que l'axe Y était positif lorsqu'on le fait aller vers le haut. Il faut donc rendre la value négative pour qu'il n'y ait pas d'effet étrange lorsque l'on bouge la caméra avec notre souris. On se dit qu'on veut pouvoir tourner autour de notre cube. Pour ça on peut utiliser sin et cos et faire des opérations avec des Math.PI * 2 et bidouiller un peu. C'est cool mais en fait il existe des built-in dans THREE avec divers types de caméras en fonction des besoins. En l'ocurrence aujourd'hui, j'ai utilisé OrbitControls. C'est une classe qui n'est pas un Object3D et n'est pas contenu dans le géant objet qu'est THREE donc il faut l'importer et ensuite l'initialise en faisant par exemple un const controls = new OrbitControls(camera, canvas). Le premier argument et l'élément qui doit être utilisé pour bouger (très souvent une caméra) et le deuxième, c'est l'élément html qui doit être seléctionné pour avoir un cadre. On peut ensuite régler pleins d'options comme du Damping avec un controls.enableDamping = true (false par défaut) et ensuite update la caméra à chaque tick en faisant un controls.update() dans notre function qu'il boucle sur elle même avec notre window.requestAnimationFrame() qui j'ai l'impression va nous suivre longtemps.