diff --git a/ALVARIZA-BILLAR_DESERT_KANY/index.html b/ALVARIZA-BILLAR_DESERT_KANY/index.html index 1a772a2cdf59737009a3ebb3dde5f6b8c8b24958..75ddb82b66539e43936707c4dc2c041033dea74f 100644 --- a/ALVARIZA-BILLAR_DESERT_KANY/index.html +++ b/ALVARIZA-BILLAR_DESERT_KANY/index.html @@ -1,38 +1,72 @@ <!DOCTYPE html> <html lang="fr"> <head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="style.css"> - <title>Projet Etudiant en WebGL</title> + <meta charset="UTF-8" /> + <title>Projet WebGL</title> + <link rel="stylesheet" href="style.css"> </head> <body> - <!-- Header avec une image de fond --> - <header> - <!-- Image Hopper --> - <a href="https://fr.wikipedia.org/wiki/Edward_Hopper" target="_blank"> - <img src="https://upload.wikimedia.org/wikipedia/commons/0/09/Edward_Hopper_1930.jpg" alt="Edward Hopper" class="hopper-image"> - </a> - <div class="header-content"> - <h1>Projet Etudiant en WebGL</h1> - </div> - </header> - <!-- Section principale --> - <section id="webGL"> - <div class="content-container"> - <div class="image-section"> - <h2>La peinture initiale</h2> - <img src="Hopper-Gas.png" alt="Hopper Gas"> - </div> - <div class="project-section"> - <h2>Notre projet 3D</h2> - <canvas id="threejs-canvas"></canvas> + <header> + <div class="profile"></div> + </header> + + <section class="presentation"> + <h2 class="Titre">Notre tableau choisi est <strong>GAS</strong> de Hopper</h2> + <div class="center-section"> + <img src="Hopper-Gas.png" alt="Image du tableau"> + <section class="checklist"> + <h3>Liste de vérification donné pour le projet</h3> + <ul> + <input type="checkbox" id="item1" checked> <label for="item1">Esthétisme</label> + <input type="checkbox" id="item2" checked> <label for="item2">Mise en page de la page web</label> + <input type="checkbox" id="item3"checked> <label for="item3">Paragraphe(s) d'explications techniques</label> + <input type="checkbox" id="item4"checked> <label for="item4">Légèreté du dossier (<2Mo)</label> + <input type="checkbox" id="item5" checked> <label for="item5">Géométrie</label> + <input type="checkbox" id="item6" checked> <label for="item6">Couleur</label> + <input type="checkbox" id="item7" checked> <label for="item7">Transparence</label> + <input type="checkbox" id="item8" checked> <label for="item8">Éclairage</label> + <input type="checkbox" id="item9" > <label for="item9">Ombres portées</label> + <input type="checkbox" id="item10" checked> <label for="item10">Position de la caméra</label> + <input type="checkbox" id="item11" checked> <label for="item11">Brouillard</label> + <input type="checkbox" id="item12" > <label for="item12">Effet miroir</label> + </ul> + </section> + </div> - - </div> + <h1>Voici Notre Projet :</h1> + <div id="webGL" class="centre"></div> + <h1>Description:</h1> + <p>Pour notre projet, nous avons utilisé de nombreuses technologies, comme : les low-poly pour les arbres et la Formule 1. Nous avons utilisé de la géométrie standard pour créer les dalles de béton sous les pompes à essence et la maison. Cette technique a également été employée pour modéliser les pompes à essence. + Nous avons intégré plusieurs types de textures, notamment des textures transparentes pour les vitres de la maison et des textures miroir pour le haut des pompes. Différentes images ont été utilisées pour divers éléments : nous avons créé des sprites à partir du tableau détouré pour le personnage et le logo des pompes à essence. Une image a été employée pour représenter le logo de la station-service, et bien sûr, nous avons ajouté des textures spécifiques pour le sol, la route et la skybox.</p> + <h1>Les sources :</h1> + <div class="sources"> + <a href="https://www.turbosquid.com/3d-models/3d-low-poly-trees-1431822" class="source-link">🌳 Les arbres low poly</a> + <a href="https://free3d.com/3d-model/formula-1-lowpoly-87257.html" class="source-link">🏎️ La formule 1 low poly</a> + <a href="https://www.pngegg.com/fr/png-ctuzm" class="source-link">⛽ Le logo de la station-service</a> + <a href="https://static.vecteezy.com/system/resources/thumbnails/013/867/993/small/road-highway-with-dotted-line-top-view-background-free-vector.jpg" class="source-link">🛣️ La route</a> + <a href="https://gitlab.univ-lorraine.fr/villard5/webgl25/-/raw/main/ALVARIZA-BILLAR_DESERT_KANY/Hopper-Gas.png?ref_type=heads" class="source-link">🌿 L'herbe</a> + <a href="https://opengameart.org/sites/default/files/cloudy_0.zip" class="source-link">☁️ La skybox</a> </div> - </section> - <script type="module" src="projet.js"></script> + +</section> + + <!-- Chargement du polyfill pour les import maps --> + <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script> + <script type="importmap"> + { + "imports": { + "three": "https://threejs.org/build/three.module.js", + "three/addons/": "https://threejs.org/examples/jsm/" + } + } + </script> + + <!-- Stats pour afficher les FPS --> + <script src="../lib/stats.min.js"></script> + + <!-- Script principal --> + <script type="module" src="projet.js"></script> + </body> -</html> +</html> \ No newline at end of file