From 98b12d8eb6723ff1330e555243e759847de32634 Mon Sep 17 00:00:00 2001
From: Romain <81782365+Rom444d@users.noreply.github.com>
Date: Sun, 16 Mar 2025 19:28:06 +0100
Subject: [PATCH] site web, par Thomas
---
ALVARIZA-BILLAR_DESERT_KANY/index.html | 92 ++++++++++++++++++--------
1 file changed, 63 insertions(+), 29 deletions(-)
diff --git a/ALVARIZA-BILLAR_DESERT_KANY/index.html b/ALVARIZA-BILLAR_DESERT_KANY/index.html
index 1a772a2..75ddb82 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
--
GitLab