Projet

Description du Projet

Voici mon projet réalisé en WebGL au cours du semestre 4. Ci-dessous, vous trouverez la liste des attentes de ce projet, et comment j'ai répondu à ces attentes :

• Géométrie: Utilisation de diverses géométries comme BoxGeometry, SphereGeometry, CylinderGeometry et PlaneGeometry pour créer les objets dans la scène.
• Couleur: Application de couleurs aux matériaux, par exemple, new THREE.MeshLambertMaterial({ color: 0x00ff00 }) pour le sol.
• Transparence: Utilisation de la transparence dans la maison (la porte d'entrée est composée de vitres).
• Éclairage: Utilisation de différents types de lumières comme THREE.DirectionalLight et THREE.AmbientLight.
• Ombres portées: Activation des ombres avec castShadow et receiveShadow pour les objets et les lumières.
• Position de la caméra: Positionnement de la caméra avec camera.position.set(-60, 10, 50) et mise à jour de sa cible avec cameraControls.target.set(-55, 0, -10).
• Brouillard: Ajout du brouillard à la scène avec scene.fog = new THREE.Fog(0xD3D3D3, 30, 300).
• Effet miroir: Création d'un miroir avec Reflector de Three.js.
• Texture classique: Utilisation de textures pour les matériaux, par exemple, la texture du train.
• Texture avec transparence: Utilisation de textures transparentes pour les particules de fumée.
• Sprites:Le code a été implémenté, mais n'est pas fonctionnel (rectangles blancs au lieu de sprites).
• Environment map: Utilisation de l'environnement map pour l'illumination globale, par exemple, scene.environment = cubeTexture. (Voir la sphère métalique au centre)
• Skybox: Création d'une skybox avec scene.background = cubeTexture.
• Specular maps: Utilisée pour les réflexions des trains.
• Normal maps: Application de normal maps, par exemple, new THREE.MeshLambertMaterial({ color: 0xA94B17, normalMap: normalMap }). Cela ajoute une texture de bois à ma maison
• Interaction par GUI: Utilisation de dat.GUI pour permettre l'interaction utilisateur avec des contrôles pour la vitesse du train, l'angle du soleil, etc.