Projet peinture
Détails techniques
Voici le détail technique de ce qui a été réalisé :
Esthétisme
J'ai travaillé sur l'esthétisme de la scène. La combinaison du pont, de l'île, du ciel orangé, et des effets comme le brouillard et le miroir contribue à créer une atmosphère visuellement intéressante inspirée du tableau "Le Cri" d'Edvard Munch.
Géométrie
J'ai utilisé diverses géométries Three.js comme PlaneGeometry, BoxGeometry, ConeGeometry, et d'autres pour créer les éléments de la scène.
Couleur
J'ai utilisé des couleurs variées pour les différents éléments de la scène, notamment des tons orangés pour le ciel et le soleil.
Éclairage
J'ai mis en place un éclairage avec une lumière directionnelle pour le soleil et une lumière ambiante.
Ombres portées
J'ai configuré les ombres portées pour plusieurs objets de la scène. Par exemple, on constate l'ombre du personnage à l'avant de la scène sur le pont.
Position de la caméra
J'ai défini une position initiale pour la caméra et utilisé OrbitControls pour permettre à l'utilisateur de la déplacer. J'ai positionné la caméra de façon à ce qu'elle soit dans la même position que sur le tableau.
Brouillard
J'ai implémenté un effet de brouillard avec une densité variable grâce à une animation.
Effet miroir
J'ai créé un effet miroir en utilisant une technique de rendu personnalisée réalisée sur un miroir au fond de la scène.
Texture classique
J'ai utilisé des textures classiques, notamment pour l'eau (que j'ai d'ailleurs animée avec l'offset).
Sprites
J'ai créé des sprites pour représenter des personnages dans la scène.
Skybox
J'ai implémenté une skybox en utilisant CubeTextureLoader.
Texture avec transparence et Transparence :
J'ai implémenté deux types différents de transparence dans la scène. Pour l'île, j'ai appliqué une texture avec transparence en utilisant un matériau MeshPhongMaterial. La texture de l'île a été chargée et appliquée à la géométrie, puis j'ai activé la propriété 'transparent' du matériau et ajusté l'opacité à 0.8, créant ainsi un effet de translucidité qui permet de voir partiellement à travers l'île. Pour les nuages, j'ai utilisé une approche différente basée sur la transparence pure. J'ai créé des plans géométriques simples. Le matériau des nuages a été configuré avec la propriété 'transparent' activée et une opacité ajustable, permettant aux nuages d'apparaître légers et vaporeux.
Interaction par GUI
J'ai intégré des interactions utilisateur avancées en implémentant une interface graphique (GUI) à l'aide de la bibliothèque dat.GUI. Cette interface permet aux utilisateurs de modifier dynamiquement divers aspects de la scène en temps réel. J'ai créé plusieurs dossiers dans le GUI pour organiser les contrôles : "Île", "Nuages", "Brouillard" et "Lumière". Pour l'île, j'ai ajouté des contrôles permettant d'ajuster son opacité et sa hauteur, offrant ainsi la possibilité de modifier son apparence de façon interactive. Les nuages peuvent être affichés ou masqués à volonté, et leur vitesse de déplacement est réglable, ce qui ajoute un élément dynamique à la scène. J'ai également inclus des contrôles pour le brouillard, permettant de modifier sa couleur et sa densité, ce qui influence grandement l'atmosphère générale.
Effet miroir
J'ai implémenté un effet miroir sophistiqué dans la scène en utilisant une technique de rendu avancée. Le miroir, placé stratégiquement à gauche de la scène, est créé à l'aide d'une géométrie plane et d'un matériau spécial qui reflète l'environnement. Pour obtenir cet effet de réflexion, j'ai utilisé une caméra dédiée et une cible de rendu personnalisée. Pour améliorer son aspect visuel et son intégration dans l'environnement, j'ai ajouté un cadre en bois foncé autour du miroir, qui suit précisément sa position et son orientation. La réflexion est mise à jour en temps réel dans la boucle d'animation, assurant que le miroir reflète toujours fidèlement les changements dynamiques de la scène. Pour voir le miroir, il faut se déplacer vers l'extérieur gauche. J l'ai mis ici afin de ne pas trop dénaturé la scène de base avec une réflexion totale de la scène.
Tableau représenté
I s'agit du célébre tableau d'Edvard Munch nommé "Le cri" ("Skrik en norvégien) :
