Projet tableau WebGL avec THREE JS

Tableau de base

Checklist webgl

Légèreté du dossier (moins de 2Mo) -- Dossier de 1.72 Mo

Géométrie -- Sol, Eau, Objets (cheval, arbres, montagne), etc...

Couleur -- Eau bleue, montagne marron, etc...

Transparence -- Eau transparente

Eclairage -- Lumière ambiante et lumière directionnelle

Ombres portées -- Ombre sur les différents objets

Position de la caméra -- Caméra movible et bouton dans le GUI pour replacer la caméra en vue "tableau"

Brouillard -- Brouillard en fond de scene, densité modulable dans le GUI ainsi que la couleur du brouillard

Effet miroir -- Miroir derrière la scène lors de l'apparition

Texture classique -- MeshPhongMaterial avec textures classiques pour le cheval par exemple

Texture avec transparence -- Transparence avec alpha sur la fourrure du cheval

Sprites -- Nuages

Environment map -- Eau avec la skybox en environment map

Skybox -- background ciel

Specular maps -- Texture de la montagne

Normal maps -- Texture des arbres

Interaction par GUI -- GUI accessible en haut à droite de la page avec plusieurs interactions

Paragraphe d'explications techniques

Ce projet de visualisation 3D utilise la bibliothèque Three.js pour créer un environnement interactif et esthétique. Voici une vue d'ensemble des techniques et des fonctionnalités implémentées :

Modèles 3D et Chargement des Textures

Les modèles 3D, tels que le cheval, les arbres morts et la montagne, sont chargés à l'aide de l'OBJLoader de Three.js, permettant leur intégration dans la scène avec des matériaux personnalisés. Des textures spécifiques comme 'eyes.jpg' pour les yeux du cheval et 'brown_fur.jpg' pour sa fourrure sont chargées pour enrichir les détails visuels.

Gestion de la Lumière et des Ombres

Une lumière directionnelle est utilisée pour simuler l'éclairage du soleil, tandis qu'une lumière ambiante complète l'illumination globale de la scène. La lumière directionnelle est configurée pour projeter des ombres douces, améliorant ainsi le réalisme des objets ombragés sur le sol et l'eau.

Effets Visuels et Atmosphériques

Pour renforcer l'ambiance visuelle, un effet de brouillard exponentiel est appliqué, contribuant à la profondeur de la scène et à la perception de la distance. La skybox, constituée de six textures, crée un arrière-plan réaliste.

De plus, un miroir a été ajouté à l'aide de Reflector à l'arrière de la scène.

Interaction Utilisateur via GUI

Une interface utilisateur graphique (GUI) est intégrée grâce à la bibliothèque dat.GUI. Cela permet de contrôler dynamiquement des paramètres tels que l'intensité de la lumière directionnelle, la couleur et la densité du brouillard, ainsi que les paramètres des vagues sur l'eau. Chaque contrôle est lié à des éléments spécifiques de la scène, offrant ainsi une personnalisation en temps réel de l'environnement virtuel.

Optimisation et Performances

Pour garantir des performances optimales, les textures sont chargées de manière efficace et les géométries sont optimisées selon les besoins. L'ajustement dynamique de la taille de la fenêtre de rendu en fonction des dimensions du conteneur maintient une expérience utilisateur fluide et réactive.

En conclusion, ce projet démontre l'utilisation avancée de Three.js pour créer un environnement 3D interactif avec des effets visuels réalistes, une gestion efficace des ressources et une personnalisation via une interface utilisateur intuitive.

Tableau en webGL

@TendoYuki