Skip to content
Snippets Groups Projects
Commit 98b12d8e authored by Romain's avatar Romain
Browse files

site web, par Thomas

parent de8eb364
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
ALVARIZA-BILLAR_DESERT_KANY/index.html
+ 63
− 29
View file @ 98b12d8e
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Projet WebGL</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>Projet Etudiant en WebGL</title>
</head> </head>
<body> <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 --> <header>
<section id="webGL"> <div class="profile"></div>
<div class="content-container"> </header>
<div class="image-section">
<h2>La peinture initiale</h2> <section class="presentation">
<img src="Hopper-Gas.png" alt="Hopper Gas"> <h2 class="Titre">Notre tableau choisi est <strong>GAS</strong> de Hopper</h2>
</div> <div class="center-section">
<div class="project-section"> <img src="Hopper-Gas.png" alt="Image du tableau">
<h2>Notre projet 3D</h2> <section class="checklist">
<canvas id="threejs-canvas"></canvas> <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>
<h1>Voici Notre Projet :</h1>
</div> <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> </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> </body>
</html> </html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment