Salut à tous,
sur le site https://baseballsavant.mlb.com/savant-player/aaron-nola-605400?stats=statcast-r-pitching-mlb#statcast-pitch-arsenal on peut voir les balles de baseball tourner en live.
Oui ça ressemble à des gifs dégueulasses des années 2000 mais en réalité il s’agit de canvas avec du Javascript, et certainement du WebGL (vu que l’axe et la vitesse de rotation sont censés changer d’un joueur à l’autre).
N’étant pas très spécialiste de WebGL (je sais faire bouger des objets de droite à gauche, super ) je me suis posé la question de savoir comment ce code était généré.
Plus j’y réfléchis plus ça m’a l’air compliqué car outre la balle (ok, un sphère), le halo lumineux dessus, il faut deux trois axes de rotation (x, y, z), la vitesse de rotation, etc.
Le HTML généré (DOM) est plus que basique :
<div class="spin-axis" id="spin_FF"><canvas style="display: block; width: 50px; height: 50px;" width="50" height="50"></canvas></div>
Et la fonction qui doit générer la ou les rotations est présente dans : https://baseballsavant.mlb.com/sections/player-update/builds/1ab21cead176ae03fba5856fb44c52ba2fcd0dc6/scripts/build/index.bundle.js
Ce que je n’ai pas trouvé c’est où les valeurs (x, y, z) sont stockées, ce qui fait que je n’arrive pas à modifier le mouvement de la balle via Web Developper.
J’aimerai bien créer un truc similaire, peut-être plus simple pour commencer, mais mes notions en 3D sont assez limitées : du Unreal Engine niveau très débutant, un peu d’OpenGL et c’est tout. Rien pour le web.
Qu’en pensent les experts ?
Je téléchargerais bien le fichier Javascript mais j’imagine qu’ils ont offusqué le code - ce qui est logique, au demeurant. Merci de votre aide