Qu'est-ce que j'ai appris ?

Je ne l'avais pas mentionné hier mais il est possible de grouper des Mesh entre eux pour pouvoir ensuite modifier leur position. Par exemple admettons que j'ai 3 Mesh avec leur geometry et leur material, on peut simplement group.add(mesh1) group.add(mesh2) juste après l'avoir instancié avec un new THREE.Group(). Pour ce qui est de la leçon du jour, c'est sur requestAnimationFrame(). Il est souvent explicité que cette fonction permet de faire des animation mais en réalité ce n'est pas le cas, c'est un abus. Elle dit qu'on souhaite faire une animation, elle prend une fonction en argument qui va s'éxécuter à chaque tick. C'est pour cela que dans une fonction s'appelant elle même exemple : const tick () => { mesh.position.y += .01 renderer.render(scene, camera) window.requestAnimationFrame(tick) } tick() Il est possible qu'avec un plus gros framerate d'écran, l'animation soit plus lente ou plus rapide. Pour remédier à cela, il existe plusieurs solutions, la première et celle que je trouve moins pratique (surement parce que je n'ai pas été confronté à un projet ou c'est nécessaire de faire comme cela), c'est de créer une let avec un timestamp Date.now(). Ensuite dans la boucle infinie de la requestAnimationFrame de créer un Delta qui compare l'ancien timestamp et le nouveau pour ensuite attribuer la valeur à notre animation. La deuxième qui est propre à THREE.js et qui n'est pas du js natif, c'est d'instancier une clock new THREE.Clock(). Cette dernière comporte des méthodes comme getElapsedTime(). C'est un peu différent du timestamp parce que c'est des secondes et ça commence à 0 à partir du moment ou la page charge et ça continue à l'infini. Donc si on l'initialise en dehors de notre boucle et qu'ensuite on le get à chaque fois dans la boucle, on peut l'utilise pour créer notre animation. Si l'on souhaite créer des mouvements simples, pas besoin d'utilise GSAP, des fonctions mathématiques peuvent nous être utile : Math.PI pour nos circonvolution étant donné que le système fonctionne en gradient, Math.sin() avec notre elapsedTime en paramètre. En combinant un cos et un sin on peut faire des cercles. J'avais oublié mais la fonction lookAt() existe et peut être utile pour dire à notre caméra par exemple de regarder notre mesh camera.lookAt(mesh.position). Ensuite, si on veut faire des animations un peu plus poussées, on peut utiliser GSAP. Pas besoin de tout ce blabla de boucle et de requestAnimationFrame() avec GSAP, la library s'en occupe elle même en arrière plan. Réfléchir à son projet et voir si l'on a vraiment besoin d'une library qui pèse un certain poid.