Vous pouvez voir différents éléments sur ce tableau:
Le vase
Le vase est fait avec deux cylindres différents collés, ayant deux diamètres différents en haut et en bas (le diamètre haut du premier est égal au diamètre bas du deuxième et inversement). Le matériel du haut est un MeshPhongMaterial pour avoir le reflet de la lumière comme sur le tableau original tandis que le matériel du bas du vase est un MeshLambertMaterial pour avoir un effet plus terne.
Les tournesols
Les tournesols sont fait à partir d'un objet 3D trouvé sur internet. L'objet est constitué d'un fichier .obj et d'un fichier .jpg. J'ai donc utilisé deux loader (OBJLoader et TextureLoader) dans le code, un loader d'objet et un loader de texture pour ensuite créer un seul objet avec sa géométrie et ses textures. Je le charge une première fois puis le clone pour avoir tous les tournesols. (le clonage est beaucoup plus efficace que de charger plusieurs fois l'objet)
Au moment du chargement de l'objet et au clonage, je spécifie castShadow = true pour pouvoir afficher l'ombre de chaque tournesol sur le sol.
Les murs
Les murs des cotés sont créés à partir d'une texture que j'ai créé sur GIMP (Il faut d'abord charger la texture avec TextureLoader puis l'appliquer à un Material). Il m'a suffit de prendre une image, mettre un fond uni et rajouter du bruit sur l'image pour faire la texture attendue. Cela donne un effet granulé pour donner l'impression de murs.
Il y a 6 géométries de murs, une pour le fond, une pour le coté gauche et 4 pour faire le tour de la fenêtre.
Le sol
Le sol n'est qu'une BoxGeometry classique avec une texture MeshLambertMaterial orange pour pouvoir recevoir des ombres (le MeshBasicMaterial ne les gérant pas). Le receiveShadow est donc activé pour recevoir les ombres.
Le miroir
Le miroir est aussi une BoxGeometrie sur lequel on applique la vue d'une caméra. J'ai donc créée une nouvelle caméra (mirrorCamera) regardant depuis derrière le vase. Elle est mise à jour à chaque boucle de rendu dans la fonction render() pour que le mirroir soit toujours correct par rapport à notre position. On applique ensuite la vue de la caméra à une texture (MeshBasicMaterial) grace à l'argument envMap.
La fenêtre
La fenêtre est une BoxGéometrie avec un MeshBasicMaterial sur lequel la transparence est activée (transparent = true et 0<=opacity<=1). Il y a ensuite deux autres BoxGéometrie avec un MeshLambertMaterial brun pour faire les contours de la fenêtre.
Le papillon
Le papillon est un sprite, élément 2D faisant toujours face à la caméra. J'ai choisi une image sur internet, libre de droit et l'ai transformée, détourée et exportée en PNG pour que les bords soient transparents et que l'on ne voit pas une image carrée.
Il est animé, il varie entre -20 et 20 en sur l'axe z, et les axes x et y sont calculés avec les fonctions sinus et cosinus par rapport à la position en z. Le cosinus de l'axe z permet de faire un cercle autour de l'axe y. Le cosinus sert donc à déterminer la position en x. Le sinus sert, quant à lui, à créer le mouvement de bas en haut pour donner l'impression du batement d'ailes. Il sert donc à déterminer la position en y.
Le papillon possède deux images, et le changement d'image s'effectue dès lors qu'il arrive à -20 ou 20 en z. Le déplacement est effectué en fonction du temps et non en fonction de la cadence du processeur.
La position du papillon est mise à jour dans la boucle de rendu dans la fonction render() qui appelle la fonction moveButterfly()
La skybox
La SkyBox est créée à partir de 6 images trouvées sur internet. Il suffit de rajouter une skybox à la scène avec les 6 images pour la créer.