From 8760562bcf67c11891a22d79edf7e72412da38a3 Mon Sep 17 00:00:00 2001
From: flo0s <none@none.com>
Date: Sun, 16 Mar 2025 23:41:15 +0100
Subject: [PATCH] add florentin martin and tom
---
NIRRENGARTEN/index.html | 121 ++++++++++++++++--
NIRRENGARTEN/style.css | 18 ++-
PHILIPPON-CHAMPROUX/index.html | 121 ++++++++++++++++--
PHILIPPON-CHAMPROUX/style.css | 18 ++-
RATTI/index.html | 121 ++++++++++++++++--
RATTI/style.css | 18 ++-
.../index.html | 121 ++++++++++++++++--
.../style.css | 18 ++-
8 files changed, 484 insertions(+), 72 deletions(-)
diff --git a/NIRRENGARTEN/index.html b/NIRRENGARTEN/index.html
index f5c42e9..d855355 100644
--- a/NIRRENGARTEN/index.html
+++ b/NIRRENGARTEN/index.html
@@ -22,22 +22,119 @@
<!-- JQuery pour afficher les erreurs -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Un titre centre -->
- <h1 class="centre">Champs de blé aux corbeau (WIP)</h1>
-<div class="render">
- <img class="background" src="img/Champs2BleOcorbeaux.jpg">
- <div id="webGL" class="centre"></div>
- <!-- Mon script avec un chemin relatif -->
- <script type="module" src="paint.js"></script>
+ <h1 class="centre">Champs de blé aux corbeau</h1>
+ <div class="render">
+ <div id="webGL" class="centre">
+ <!-- Mon script avec un chemin relatif -->
+ <script type="module" src="paint.js"></script>
+ </div>
+
</div>
<div class="divider"></div>
- <div class="tableau">
- <img class="tableau-img" src="img/Champs2BleOcorbeaux.jpg" alt="tableau du champs">
- <div class="tableau-presentation">
- <p>Super stylé le tableau</p>
- </div>
- </div>
+ <table>
+ <tr>
+ <td>
+ <img class="tableau-img" src="img.jpg" alt="tableau du champs">
+ </td>
+ <td class="titre_tableau">
+ <H2 class="centre">Le tableau choisit :</H2>
+ <H1 class="centre">Champs de Blé de corbeaux</H1>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Geométrie
+ </td>
+ <td>
+ La géométrie à était utilisé, pour les corbeaux <br>
+ (les petits trucs noir qui volent dans le ciel).
+ <br><br>
+ Les corbeaux peuvent être dupliqué pour ajouter plusieurs entités à la scène.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ L'utilisation des couleurs à était simple. Grâce au MeshMaterial basic.
+ <br>
+ Nous l'avons utilisé pour le rouge de la sphère transparente, et le noir des corbeaux.
+
+
+ </td>
+ <td>
+ Couleur
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Transparence
+ </td>
+ <td>
+ La transparence à était utilisé pour la sphère rouge qui vole.<br>
+ Nous avons choisit une transparence lambda, pour que l'on puisse voir le décor derrière cette dernière.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ L'éclairage est fait pour une spotlight <br>afin de pouvoir avoir de l'ombre sur le sol et sur le blé.
+ </td>
+ <td>
+ Éclairage & Ombres
+ </td>
+ </tr>
+ <tr>
+ <td>
+Position de la caméra
+ </td>
+ <td>
+ La caméra est placé afin que l'on puisse voir <br>tout les assets que l'on a intégré.
+ De plus, elle permet d'être dans la skybox afin de faire l'illusion.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Nous avons utilisé un Reflector disponible dans THREE js.<br>C'est une asset disponible qui va faire un mirroir de la scène.
+ <br>
+ Aussi nous avons utilisé une EnvMap pour la sphére onirique qui flotte dans le ciel; elle permet de faire une reflection de tout le ciel.
+ </td>
+ <td>
+ Effet miroir
+ </td>
+ </tr>
+ <tr>
+ <td>
+Texture classique & transparence
+ </td>
+ <td>
+ Les texture classique du blé et du pot qui flotte ont été load simplement grâce aux méthodes associés. <Br>
+ <br>
+ Pour les textures avec transparence nous n'avons pas trouvé comment les implémenté avec notre scene.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Nous avons décidé que le rivière serait un sprites afin de simplifié sont design. <br>
+ C'est donc une image bleu qui jonche le sol. ^^
+ </td>
+ <td>
+ Sprites
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Animations
+ </td>
+ <td>
+ Le blé est animé pour donner l'impression que le vent souffle dans le champs.
+ </td>
+ </tr>
+ </table>
+
+ <h3>Les auteurs :</h3>
+ <h4>Florentin Philippon Champroux</h4>
+ <h4>Tom Nirrengarten</h4>
+ <h4>Martin Ratti</h4>
</body>
diff --git a/NIRRENGARTEN/style.css b/NIRRENGARTEN/style.css
index 45ae8c7..ca9d02f 100644
--- a/NIRRENGARTEN/style.css
+++ b/NIRRENGARTEN/style.css
@@ -9,10 +9,6 @@ canvas {
border-radius: 20px;
}
-.render{
- display: flex;
-
-}
.centre {
text-align: center;
@@ -32,6 +28,16 @@ canvas {
}
.tableau-img{
display: flex;
- width: 380px;
- height: 242px;
+ width: 760px;
+ height: 484px;
+}
+
+.titre_tableau{
+padding-left: 5%;
+}
+
+td{
+ padding: 2%;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ text-align: justify;
}
\ No newline at end of file
diff --git a/PHILIPPON-CHAMPROUX/index.html b/PHILIPPON-CHAMPROUX/index.html
index f5c42e9..d855355 100644
--- a/PHILIPPON-CHAMPROUX/index.html
+++ b/PHILIPPON-CHAMPROUX/index.html
@@ -22,22 +22,119 @@
<!-- JQuery pour afficher les erreurs -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Un titre centre -->
- <h1 class="centre">Champs de blé aux corbeau (WIP)</h1>
-<div class="render">
- <img class="background" src="img/Champs2BleOcorbeaux.jpg">
- <div id="webGL" class="centre"></div>
- <!-- Mon script avec un chemin relatif -->
- <script type="module" src="paint.js"></script>
+ <h1 class="centre">Champs de blé aux corbeau</h1>
+ <div class="render">
+ <div id="webGL" class="centre">
+ <!-- Mon script avec un chemin relatif -->
+ <script type="module" src="paint.js"></script>
+ </div>
+
</div>
<div class="divider"></div>
- <div class="tableau">
- <img class="tableau-img" src="img/Champs2BleOcorbeaux.jpg" alt="tableau du champs">
- <div class="tableau-presentation">
- <p>Super stylé le tableau</p>
- </div>
- </div>
+ <table>
+ <tr>
+ <td>
+ <img class="tableau-img" src="img.jpg" alt="tableau du champs">
+ </td>
+ <td class="titre_tableau">
+ <H2 class="centre">Le tableau choisit :</H2>
+ <H1 class="centre">Champs de Blé de corbeaux</H1>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Geométrie
+ </td>
+ <td>
+ La géométrie à était utilisé, pour les corbeaux <br>
+ (les petits trucs noir qui volent dans le ciel).
+ <br><br>
+ Les corbeaux peuvent être dupliqué pour ajouter plusieurs entités à la scène.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ L'utilisation des couleurs à était simple. Grâce au MeshMaterial basic.
+ <br>
+ Nous l'avons utilisé pour le rouge de la sphère transparente, et le noir des corbeaux.
+
+
+ </td>
+ <td>
+ Couleur
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Transparence
+ </td>
+ <td>
+ La transparence à était utilisé pour la sphère rouge qui vole.<br>
+ Nous avons choisit une transparence lambda, pour que l'on puisse voir le décor derrière cette dernière.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ L'éclairage est fait pour une spotlight <br>afin de pouvoir avoir de l'ombre sur le sol et sur le blé.
+ </td>
+ <td>
+ Éclairage & Ombres
+ </td>
+ </tr>
+ <tr>
+ <td>
+Position de la caméra
+ </td>
+ <td>
+ La caméra est placé afin que l'on puisse voir <br>tout les assets que l'on a intégré.
+ De plus, elle permet d'être dans la skybox afin de faire l'illusion.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Nous avons utilisé un Reflector disponible dans THREE js.<br>C'est une asset disponible qui va faire un mirroir de la scène.
+ <br>
+ Aussi nous avons utilisé une EnvMap pour la sphére onirique qui flotte dans le ciel; elle permet de faire une reflection de tout le ciel.
+ </td>
+ <td>
+ Effet miroir
+ </td>
+ </tr>
+ <tr>
+ <td>
+Texture classique & transparence
+ </td>
+ <td>
+ Les texture classique du blé et du pot qui flotte ont été load simplement grâce aux méthodes associés. <Br>
+ <br>
+ Pour les textures avec transparence nous n'avons pas trouvé comment les implémenté avec notre scene.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Nous avons décidé que le rivière serait un sprites afin de simplifié sont design. <br>
+ C'est donc une image bleu qui jonche le sol. ^^
+ </td>
+ <td>
+ Sprites
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Animations
+ </td>
+ <td>
+ Le blé est animé pour donner l'impression que le vent souffle dans le champs.
+ </td>
+ </tr>
+ </table>
+
+ <h3>Les auteurs :</h3>
+ <h4>Florentin Philippon Champroux</h4>
+ <h4>Tom Nirrengarten</h4>
+ <h4>Martin Ratti</h4>
</body>
diff --git a/PHILIPPON-CHAMPROUX/style.css b/PHILIPPON-CHAMPROUX/style.css
index 45ae8c7..ca9d02f 100644
--- a/PHILIPPON-CHAMPROUX/style.css
+++ b/PHILIPPON-CHAMPROUX/style.css
@@ -9,10 +9,6 @@ canvas {
border-radius: 20px;
}
-.render{
- display: flex;
-
-}
.centre {
text-align: center;
@@ -32,6 +28,16 @@ canvas {
}
.tableau-img{
display: flex;
- width: 380px;
- height: 242px;
+ width: 760px;
+ height: 484px;
+}
+
+.titre_tableau{
+padding-left: 5%;
+}
+
+td{
+ padding: 2%;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ text-align: justify;
}
\ No newline at end of file
diff --git a/RATTI/index.html b/RATTI/index.html
index f5c42e9..d855355 100644
--- a/RATTI/index.html
+++ b/RATTI/index.html
@@ -22,22 +22,119 @@
<!-- JQuery pour afficher les erreurs -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Un titre centre -->
- <h1 class="centre">Champs de blé aux corbeau (WIP)</h1>
-<div class="render">
- <img class="background" src="img/Champs2BleOcorbeaux.jpg">
- <div id="webGL" class="centre"></div>
- <!-- Mon script avec un chemin relatif -->
- <script type="module" src="paint.js"></script>
+ <h1 class="centre">Champs de blé aux corbeau</h1>
+ <div class="render">
+ <div id="webGL" class="centre">
+ <!-- Mon script avec un chemin relatif -->
+ <script type="module" src="paint.js"></script>
+ </div>
+
</div>
<div class="divider"></div>
- <div class="tableau">
- <img class="tableau-img" src="img/Champs2BleOcorbeaux.jpg" alt="tableau du champs">
- <div class="tableau-presentation">
- <p>Super stylé le tableau</p>
- </div>
- </div>
+ <table>
+ <tr>
+ <td>
+ <img class="tableau-img" src="img.jpg" alt="tableau du champs">
+ </td>
+ <td class="titre_tableau">
+ <H2 class="centre">Le tableau choisit :</H2>
+ <H1 class="centre">Champs de Blé de corbeaux</H1>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Geométrie
+ </td>
+ <td>
+ La géométrie à était utilisé, pour les corbeaux <br>
+ (les petits trucs noir qui volent dans le ciel).
+ <br><br>
+ Les corbeaux peuvent être dupliqué pour ajouter plusieurs entités à la scène.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ L'utilisation des couleurs à était simple. Grâce au MeshMaterial basic.
+ <br>
+ Nous l'avons utilisé pour le rouge de la sphère transparente, et le noir des corbeaux.
+
+
+ </td>
+ <td>
+ Couleur
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Transparence
+ </td>
+ <td>
+ La transparence à était utilisé pour la sphère rouge qui vole.<br>
+ Nous avons choisit une transparence lambda, pour que l'on puisse voir le décor derrière cette dernière.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ L'éclairage est fait pour une spotlight <br>afin de pouvoir avoir de l'ombre sur le sol et sur le blé.
+ </td>
+ <td>
+ Éclairage & Ombres
+ </td>
+ </tr>
+ <tr>
+ <td>
+Position de la caméra
+ </td>
+ <td>
+ La caméra est placé afin que l'on puisse voir <br>tout les assets que l'on a intégré.
+ De plus, elle permet d'être dans la skybox afin de faire l'illusion.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Nous avons utilisé un Reflector disponible dans THREE js.<br>C'est une asset disponible qui va faire un mirroir de la scène.
+ <br>
+ Aussi nous avons utilisé une EnvMap pour la sphére onirique qui flotte dans le ciel; elle permet de faire une reflection de tout le ciel.
+ </td>
+ <td>
+ Effet miroir
+ </td>
+ </tr>
+ <tr>
+ <td>
+Texture classique & transparence
+ </td>
+ <td>
+ Les texture classique du blé et du pot qui flotte ont été load simplement grâce aux méthodes associés. <Br>
+ <br>
+ Pour les textures avec transparence nous n'avons pas trouvé comment les implémenté avec notre scene.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Nous avons décidé que le rivière serait un sprites afin de simplifié sont design. <br>
+ C'est donc une image bleu qui jonche le sol. ^^
+ </td>
+ <td>
+ Sprites
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Animations
+ </td>
+ <td>
+ Le blé est animé pour donner l'impression que le vent souffle dans le champs.
+ </td>
+ </tr>
+ </table>
+
+ <h3>Les auteurs :</h3>
+ <h4>Florentin Philippon Champroux</h4>
+ <h4>Tom Nirrengarten</h4>
+ <h4>Martin Ratti</h4>
</body>
diff --git a/RATTI/style.css b/RATTI/style.css
index 45ae8c7..ca9d02f 100644
--- a/RATTI/style.css
+++ b/RATTI/style.css
@@ -9,10 +9,6 @@ canvas {
border-radius: 20px;
}
-.render{
- display: flex;
-
-}
.centre {
text-align: center;
@@ -32,6 +28,16 @@ canvas {
}
.tableau-img{
display: flex;
- width: 380px;
- height: 242px;
+ width: 760px;
+ height: 484px;
+}
+
+.titre_tableau{
+padding-left: 5%;
+}
+
+td{
+ padding: 2%;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ text-align: justify;
}
\ No newline at end of file
diff --git a/nirrengarten ratti phillipon-champroux/index.html b/nirrengarten ratti phillipon-champroux/index.html
index f5c42e9..d855355 100644
--- a/nirrengarten ratti phillipon-champroux/index.html
+++ b/nirrengarten ratti phillipon-champroux/index.html
@@ -22,22 +22,119 @@
<!-- JQuery pour afficher les erreurs -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Un titre centre -->
- <h1 class="centre">Champs de blé aux corbeau (WIP)</h1>
-<div class="render">
- <img class="background" src="img/Champs2BleOcorbeaux.jpg">
- <div id="webGL" class="centre"></div>
- <!-- Mon script avec un chemin relatif -->
- <script type="module" src="paint.js"></script>
+ <h1 class="centre">Champs de blé aux corbeau</h1>
+ <div class="render">
+ <div id="webGL" class="centre">
+ <!-- Mon script avec un chemin relatif -->
+ <script type="module" src="paint.js"></script>
+ </div>
+
</div>
<div class="divider"></div>
- <div class="tableau">
- <img class="tableau-img" src="img/Champs2BleOcorbeaux.jpg" alt="tableau du champs">
- <div class="tableau-presentation">
- <p>Super stylé le tableau</p>
- </div>
- </div>
+ <table>
+ <tr>
+ <td>
+ <img class="tableau-img" src="img.jpg" alt="tableau du champs">
+ </td>
+ <td class="titre_tableau">
+ <H2 class="centre">Le tableau choisit :</H2>
+ <H1 class="centre">Champs de Blé de corbeaux</H1>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Geométrie
+ </td>
+ <td>
+ La géométrie à était utilisé, pour les corbeaux <br>
+ (les petits trucs noir qui volent dans le ciel).
+ <br><br>
+ Les corbeaux peuvent être dupliqué pour ajouter plusieurs entités à la scène.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ L'utilisation des couleurs à était simple. Grâce au MeshMaterial basic.
+ <br>
+ Nous l'avons utilisé pour le rouge de la sphère transparente, et le noir des corbeaux.
+
+
+ </td>
+ <td>
+ Couleur
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Transparence
+ </td>
+ <td>
+ La transparence à était utilisé pour la sphère rouge qui vole.<br>
+ Nous avons choisit une transparence lambda, pour que l'on puisse voir le décor derrière cette dernière.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ L'éclairage est fait pour une spotlight <br>afin de pouvoir avoir de l'ombre sur le sol et sur le blé.
+ </td>
+ <td>
+ Éclairage & Ombres
+ </td>
+ </tr>
+ <tr>
+ <td>
+Position de la caméra
+ </td>
+ <td>
+ La caméra est placé afin que l'on puisse voir <br>tout les assets que l'on a intégré.
+ De plus, elle permet d'être dans la skybox afin de faire l'illusion.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Nous avons utilisé un Reflector disponible dans THREE js.<br>C'est une asset disponible qui va faire un mirroir de la scène.
+ <br>
+ Aussi nous avons utilisé une EnvMap pour la sphére onirique qui flotte dans le ciel; elle permet de faire une reflection de tout le ciel.
+ </td>
+ <td>
+ Effet miroir
+ </td>
+ </tr>
+ <tr>
+ <td>
+Texture classique & transparence
+ </td>
+ <td>
+ Les texture classique du blé et du pot qui flotte ont été load simplement grâce aux méthodes associés. <Br>
+ <br>
+ Pour les textures avec transparence nous n'avons pas trouvé comment les implémenté avec notre scene.
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Nous avons décidé que le rivière serait un sprites afin de simplifié sont design. <br>
+ C'est donc une image bleu qui jonche le sol. ^^
+ </td>
+ <td>
+ Sprites
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Animations
+ </td>
+ <td>
+ Le blé est animé pour donner l'impression que le vent souffle dans le champs.
+ </td>
+ </tr>
+ </table>
+
+ <h3>Les auteurs :</h3>
+ <h4>Florentin Philippon Champroux</h4>
+ <h4>Tom Nirrengarten</h4>
+ <h4>Martin Ratti</h4>
</body>
diff --git a/nirrengarten ratti phillipon-champroux/style.css b/nirrengarten ratti phillipon-champroux/style.css
index 45ae8c7..ca9d02f 100644
--- a/nirrengarten ratti phillipon-champroux/style.css
+++ b/nirrengarten ratti phillipon-champroux/style.css
@@ -9,10 +9,6 @@ canvas {
border-radius: 20px;
}
-.render{
- display: flex;
-
-}
.centre {
text-align: center;
@@ -32,6 +28,16 @@ canvas {
}
.tableau-img{
display: flex;
- width: 380px;
- height: 242px;
+ width: 760px;
+ height: 484px;
+}
+
+.titre_tableau{
+padding-left: 5%;
+}
+
+td{
+ padding: 2%;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ text-align: justify;
}
\ No newline at end of file
--
GitLab