Projet WEBGL DUCHAETEAU Camille

Le Fils de l'Homme

Le Fils de l'Homme

Ce code utilise la bibliothèque Three.js pour créer une scène 3D inspirée de la célèbre peinture "Le Fils de l'Homme" de René Magritte. L'objectif est de recréer une ambiance similaire en utilisant des éléments de la scène, des lumières et des textures. Voici les différentes étapes du code :

  • Création de la scène : Une scène Three.js est créée pour représenter l'environnement 3D.

  • Configuration des lumières : Pour éclairer les objets de la scène, une lumière ambiante et deux lumières directionnelles sont ajoutées. Ces lumières fournissent un éclairage réaliste et mettent en valeur les objets.

  • Ajout du sol : Un sol est créé en utilisant une géométrie de plan, qui s'étend horizontalement dans la scène. Une texture spécifique de sol est chargée et appliquée à cette géométrie de plan. Un matériau est créé pour le sol en spécifiant la texture, la transparence et l'opacité du sol. Le sol est ensuite ajouté à la scène.

  • Chargement d'objets 3D : Des fichiers OBJ contenant des modèles 3D sont chargés à l'aide de l'OBJLoader. Ces modèles représentent différents éléments de la scène, tels que des objets et des personnages. Les modèles sont positionnés dans la scène selon les besoins artistiques. Les ombres sont activées pour les modèles, ce qui contribue à l'effet réaliste de l'éclairage.

  • Autres éléments de la scène : Un mur est créé en utilisant une géométrie de boîte, formant une surface verticale dans la scène. Un matériau avec une texture de brique est appliqué à ce mur, ajoutant une dimension supplémentaire à l'environnement. Un objet sphérique est créé pour représenter l'intérieur d'une pomme. Cette pomme flotte dans l'air et ajoute une touche artistique à la scène. Un effet de brouillard est ajouté à la scène pour créer une atmosphère mystérieuse et évocatrice, en s'inspirant de l'ambiance de la peinture originale. Un sprite (image en 2D) est ajouté à la scène pour afficher une image ou un texte, apportant un élément visuel supplémentaire à la composition globale.

  • Configuration du rendu et des contrôles : Le rendu WebGL est configuré avec les options appropriées pour obtenir des graphismes 3D réalistes. Une caméra perspective est créée et positionnée pour déterminer le point de vue de l'observateur dans la scène. Les contrôles OrbitControls sont configurés pour permettre à l'utilisateur de naviguer facilement dans la scène en déplaçant et en faisant pivoter la caméra.

  • Affichage des aides visuelles : Des aides visuelles, telles que des axes, des grilles et un sol, peuvent être affichées ou masquées en fonction des paramètres de contrôle. Ces éléments aident à la compréhension de la scène et facilitent la manipulation pour l'utilisateur.

  • Animation et rendu : Une boucle d'animation est mise en place pour mettre à jour la scène à chaque image, créant ainsi une animation fluide. Les contrôles de la caméra sont mis à jour pour suivre les interactions de l'utilisateur. Les paramètres de contrôle sont vérifiés pour déterminer si des éléments visuels doivent être affichés ou masqués, permettant ainsi une personnalisation de l'affichage. La scène est rendue avec le rendu WebGL, affichant ainsi les éléments 3D dans le navigateur ou l'application.

  • Configuration de l'interface utilisateur : Une interface utilisateur (GUI) est configurée à l'aide de la bibliothèque "dat.gui" pour permettre la modification des paramètres de contrôle. Cela permet à l'utilisateur d'expérimenter et de personnaliser les aspects visuels de la scène en temps réel.