From f18bbb7d5cdadc7840f3fe40afae2f26f066c6fa Mon Sep 17 00:00:00 2001
From: loudfr <louli.dufour@gmail.com>
Date: Sun, 16 Mar 2025 13:03:44 +0100
Subject: [PATCH] coche et esthetisme
---
DUFOUR/INFOS.md | 16 +++++------
DUFOUR/index.html | 68 +++++++++++++++++++++++++++++++++++++----------
2 files changed, 62 insertions(+), 22 deletions(-)
diff --git a/DUFOUR/INFOS.md b/DUFOUR/INFOS.md
index f26e8e3..2a6cc8e 100644
--- a/DUFOUR/INFOS.md
+++ b/DUFOUR/INFOS.md
@@ -33,20 +33,20 @@ https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.htm
## CHECK LIST
*(ajouter X pour cocher)*
-- [ ] Esthetisme
+- [X] Esthetisme
- [ ] Mise en page de la page web
- [ ] Paragraphe(s) d'explications techniques
- [ ] Légèreté du dossier (<2Mo)
-- [ ] Géométrie
-- [ ] Couleur
-- [ ] Transparence
+- [X] Géométrie
+- [X] Couleur
+- [X] Transparence
- [ ] Eclairage
- [ ] Ombres portées
-- [ ] Position de la caméra
+- [X] Position de la caméra
- [ ] Brouillard
-- [ ] Effet miroir
-- [ ] Texture classique
-- [ ] Texture avec transparence
+- [X] Effet miroir
+- [X] Texture classique
+- [X] Texture avec transparence
- [ ] Sprites
- [ ] Environment map
- [ ] Skybox
diff --git a/DUFOUR/index.html b/DUFOUR/index.html
index eaa5e11..6785335 100644
--- a/DUFOUR/index.html
+++ b/DUFOUR/index.html
@@ -4,30 +4,70 @@
<meta charset="UTF-8">
<title>La Chambre de Van Gogh</title>
<style>
- body { margin: 0; }
- canvas { width: 100%; height: 100% }
- .centre{text-align: center;}
+ body {
+ margin: 20px;
+ font-family: Arial, sans-serif;
+ }
+ .container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ gap: 20px;
+ }
+ h2 {
+ font-style: italic;
+ font-weight: lighter;
+ font-size: 20px
+ }
+ .centre {
+ text-align: center;
+ }
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ border: 1px solid #ddd;
+ }
+ h1 {
+ margin: 20px 0;
+ color: #333;
+ }
</style>
</head>
<body>
<!-- API importe du site de Three.js -->
- <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims
- .js"></script>
+ <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/"
- }
+ "imports": {
+ "three": "https://threejs.org/build/three.module.js",
+ "three/addons/": "https://threejs.org/examples/jsm/"
+ }
}
</script>
<!-- JQuery pour afficher les erreurs -->
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js
- "></script>
+ <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+
<!-- Un titre centre -->
- <h1 class="centre"> La Chambre de Van Gogh</h1>
- <div id="webGL" class="centre"></div>
+ <h1 class="centre">La Chambre de Van Gogh</h1>
+
+ <!-- Container pour l'image et la scène WebGL -->
+ <div class="container">
+ <!-- Image à gauche -->
+ <div class="image-container">
+ <h2>La Chambre de Van Gogh à Arles</h2>
+ <p>Vincent Van Gogh <br>
+ 1889<br>
+ Huile sur toile</p>
+ <img src="img.jpg" alt="La Chambre de Van Gogh - Peinture originale">
+ <p>DE RYCKE Leanne <br>DUFOUR Louise <br><br>Reproduction 3D WEBGL <br>BUT1 INFO 2025</p>
+ </div>
+
+ <!-- Scène WebGL à droite -->
+ <div class="webgl-container" id="webGL"></div>
+ </div>
+
<!-- Mon script avec un chemin relatif -->
<script type="module" src="chambre.js"></script>
</body>
-</html>
+</html>
\ No newline at end of file
--
GitLab