diff --git a/NIRRENGARTEN/index.html b/NIRRENGARTEN/index.html index f5c42e9024ed583059106759e8d3b94a1b708885..d8553550f5bd763033b8d5ce7b28eafb2c464176 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 45ae8c78d6f0eeb2c7722cf6ddb85590a1134d48..ca9d02f38e7a3fd8eaf8056ce620fce669cc0a2e 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 f5c42e9024ed583059106759e8d3b94a1b708885..d8553550f5bd763033b8d5ce7b28eafb2c464176 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 45ae8c78d6f0eeb2c7722cf6ddb85590a1134d48..ca9d02f38e7a3fd8eaf8056ce620fce669cc0a2e 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 f5c42e9024ed583059106759e8d3b94a1b708885..d8553550f5bd763033b8d5ce7b28eafb2c464176 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 45ae8c78d6f0eeb2c7722cf6ddb85590a1134d48..ca9d02f38e7a3fd8eaf8056ce620fce669cc0a2e 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 f5c42e9024ed583059106759e8d3b94a1b708885..d8553550f5bd763033b8d5ce7b28eafb2c464176 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 45ae8c78d6f0eeb2c7722cf6ddb85590a1134d48..ca9d02f38e7a3fd8eaf8056ce620fce669cc0a2e 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