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.