Gros cours concernant les textures. Il existe différentes couches pour une texture. La couleur, l'abient occlusion, les normals, metalness, roughness. De la même manière qu Blender, THREE utilise les concepts du PBR (Physically Based Rendering) utilisant des concepts d'ombrage et de lumière dans le but de se rapprocher de ce qu'on observe en réalité. Pour appliquer ces textures à nos geometry, il faut initialiser notre image, avec un new Image() pour ensuite utiliser une méthode propre à THREE, la Textures() contenue dans l'objet THREE dans laquelle on insère notre image. Suite à ça, on ferait un image.onload() ou on utiliserait un eventlistener relatif à l'écoute du chargement pour ensuite texture.needUpdate = true. Ici on dit, lorsque ton ime a été download sur ton site, dis à ton GPU que la texture est prête à être envoyé. En quelque sorte, c'est une double vérification, d'abord le chargement de ton image dans le site, puis ensuite la notification à THREE pour lui dire que la texture peut être update. C'est un poil chiant et THREE peut handle tout ce process de Texture. Il existe une méthode appelée TextureLoader() qu'on peut simplement initialiser et qui remplace la création d'un new Image() et la définition la source de celle-ci et le système de onload. après avoir init le Textureloader, on utilise une méthode load() en spécifiant le chemin de notre image et paf. On a simplement à map: texture dans notre Geometry en remplaçant la couleur (on peut combiner les deux mais je n'ai pas encore appris). L'avantage, c'est qu'on peut utiliser le même texture loader pour instancier toutes les textures qu'on veut, pas besoin d'en créer d'autres.Une fois cela fait, il faut définir le colorspace de THREE. Par défaut dans les anciennes versions, c'était du sRGB mais ce n'est plus le cas, il fonctionne en linear. Donc texture.colorSpace = THREE.sRGBColorSpace. Mentionnons le new THREE.LoadingManager(). On définit ce dernier et ensuite, on utilise des méthodes, onLoad,onProgress,onFinish,onError dans une fonction pour afficher ce qu'on veut en fonction de l'état du chargement d'un élément. En l'ocurrence, on l'utilise ici pour notre texture. Maintenant UV Unwrapping. C'est un sujet que je connais déjà sur Blender mais qui demande ici beaucoup de techniques. On peut observer ces uv en accédant aux attribrutes de notre geometry.attributes.uv. Ces derniers sont générés automatiquement lorsqu'on utilise une géométrie existante. Les coordonnées UV on été définie au préalable. Si l'on créer notre propre géométrie, il faudra les définir. Le concept, c'est dire ou est-ce que ce pixel de la texture va se positionner sur ma géométrie et surtout comment faire pour qu'elle se positionne comme je le souhaite. On peut transformer une texture mais l'explication et les utilités qu'on m'a données jusqu'ici ne sont pas si utiles. Il y existe des méthodes comme repeat.y ou x (vector2), texture.wrapS / T = THREE.RepeatWrapping ou MirrorRepeatWrapping. Le seul truc que j'ai trouvé intéréssant, c'est la possibilité de bouger le point de rotation au centre de notre géométrie en utilisant center.x et y en donnant une value de 0.5 et 0.5. MipMapping. De ce que j'ai compris, c'est une méthode qui parmet d'alléger le rendu d'une texture en créant à partir de la texture fournie, une multitude d'autres textures de plus en plus petites jusqu'à avoir une texture de 1x1. Ces dernières seront utilisés en fonction la position de la caméra dans l'environnement 3D. Si on est proche, une hight resolution texture sera utilisée et inversement plus on s'éloigne Ce mimmaping est une optimisation du filtre de minification. Minification arrive lorsque vous voyez une texture de loin, le moteur de rendu doit faire en sorte de faire une moyenne des pixels. La magnification, c'est l'inverse. Quand vous êtes proches, ces pixels doivent être net à tout pris et non pas compris dans une moyenne sinon on aurait des rendu flou. On peut changer le comportement aux deux types d'algo avec une multitude de méthodes. Déjà on utilise soit minFilter soit magFilter à notre texture et on lui attribut (ceux que j'ai vu) : NearestFilter ou LinearFilter qui vont avoir l'effet inverse sur mag et sur min. On peut aussi désactiver la création d'un mimap avec generateMipmaps = false