Skip to content
Snippets Groups Projects
Commit c6e87d84 authored by PHILIPPON Florentin's avatar PHILIPPON Florentin
Browse files

Merge branch 'nrpc' into 'main' 

add florentin martin and tom

See merge request !3
parents 104073b5 8760562b
Branches
No related tags found
1 merge request!3add florentin martin and tom
Hide whitespace changes
Inline Side-by-side
Showing
with 484 additions and 72 deletions
NIRRENGARTEN/index.html
+ 109
− 12
View file @ c6e87d84
...@@ -22,22 +22,119 @@ ...@@ -22,22 +22,119 @@
<!-- JQuery pour afficher les erreurs --> <!-- 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 --> <!-- Un titre centre -->
<h1 class="centre">Champs de blé aux corbeau (WIP)</h1> <h1 class="centre">Champs de blé aux corbeau</h1>
<div class="render"> <div class="render">
<img class="background" src="img/Champs2BleOcorbeaux.jpg"> <div id="webGL" class="centre">
<div id="webGL" class="centre"></div> <!-- Mon script avec un chemin relatif -->
<!-- Mon script avec un chemin relatif --> <script type="module" src="paint.js"></script>
<script type="module" src="paint.js"></script> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="tableau"> <table>
<img class="tableau-img" src="img/Champs2BleOcorbeaux.jpg" alt="tableau du champs"> <tr>
<div class="tableau-presentation"> <td>
<p>Super stylé le tableau</p> <img class="tableau-img" src="img.jpg" alt="tableau du champs">
</div> </td>
</div> <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> </body>
......
NIRRENGARTEN/style.css
+ 12
− 6
View file @ c6e87d84
...@@ -9,10 +9,6 @@ canvas { ...@@ -9,10 +9,6 @@ canvas {
border-radius: 20px; border-radius: 20px;
} }
.render{
display: flex;
}
.centre { .centre {
text-align: center; text-align: center;
...@@ -32,6 +28,16 @@ canvas { ...@@ -32,6 +28,16 @@ canvas {
} }
.tableau-img{ .tableau-img{
display: flex; display: flex;
width: 380px; width: 760px;
height: 242px; 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
PHILIPPON-CHAMPROUX/index.html
+ 109
− 12
View file @ c6e87d84
...@@ -22,22 +22,119 @@ ...@@ -22,22 +22,119 @@
<!-- JQuery pour afficher les erreurs --> <!-- 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 --> <!-- Un titre centre -->
<h1 class="centre">Champs de blé aux corbeau (WIP)</h1> <h1 class="centre">Champs de blé aux corbeau</h1>
<div class="render"> <div class="render">
<img class="background" src="img/Champs2BleOcorbeaux.jpg"> <div id="webGL" class="centre">
<div id="webGL" class="centre"></div> <!-- Mon script avec un chemin relatif -->
<!-- Mon script avec un chemin relatif --> <script type="module" src="paint.js"></script>
<script type="module" src="paint.js"></script> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="tableau"> <table>
<img class="tableau-img" src="img/Champs2BleOcorbeaux.jpg" alt="tableau du champs"> <tr>
<div class="tableau-presentation"> <td>
<p>Super stylé le tableau</p> <img class="tableau-img" src="img.jpg" alt="tableau du champs">
</div> </td>
</div> <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> </body>
......
PHILIPPON-CHAMPROUX/style.css
+ 12
− 6
View file @ c6e87d84
...@@ -9,10 +9,6 @@ canvas { ...@@ -9,10 +9,6 @@ canvas {
border-radius: 20px; border-radius: 20px;
} }
.render{
display: flex;
}
.centre { .centre {
text-align: center; text-align: center;
...@@ -32,6 +28,16 @@ canvas { ...@@ -32,6 +28,16 @@ canvas {
} }
.tableau-img{ .tableau-img{
display: flex; display: flex;
width: 380px; width: 760px;
height: 242px; 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
RATTI/index.html
+ 109
− 12
View file @ c6e87d84
...@@ -22,22 +22,119 @@ ...@@ -22,22 +22,119 @@
<!-- JQuery pour afficher les erreurs --> <!-- 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 --> <!-- Un titre centre -->
<h1 class="centre">Champs de blé aux corbeau (WIP)</h1> <h1 class="centre">Champs de blé aux corbeau</h1>
<div class="render"> <div class="render">
<img class="background" src="img/Champs2BleOcorbeaux.jpg"> <div id="webGL" class="centre">
<div id="webGL" class="centre"></div> <!-- Mon script avec un chemin relatif -->
<!-- Mon script avec un chemin relatif --> <script type="module" src="paint.js"></script>
<script type="module" src="paint.js"></script> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="tableau"> <table>
<img class="tableau-img" src="img/Champs2BleOcorbeaux.jpg" alt="tableau du champs"> <tr>
<div class="tableau-presentation"> <td>
<p>Super stylé le tableau</p> <img class="tableau-img" src="img.jpg" alt="tableau du champs">
</div> </td>
</div> <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> </body>
......
RATTI/style.css
+ 12
− 6
View file @ c6e87d84
...@@ -9,10 +9,6 @@ canvas { ...@@ -9,10 +9,6 @@ canvas {
border-radius: 20px; border-radius: 20px;
} }
.render{
display: flex;
}
.centre { .centre {
text-align: center; text-align: center;
...@@ -32,6 +28,16 @@ canvas { ...@@ -32,6 +28,16 @@ canvas {
} }
.tableau-img{ .tableau-img{
display: flex; display: flex;
width: 380px; width: 760px;
height: 242px; 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
nirrengarten ratti phillipon-champroux/index.html
+ 109
− 12
View file @ c6e87d84
...@@ -22,22 +22,119 @@ ...@@ -22,22 +22,119 @@
<!-- JQuery pour afficher les erreurs --> <!-- 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 --> <!-- Un titre centre -->
<h1 class="centre">Champs de blé aux corbeau (WIP)</h1> <h1 class="centre">Champs de blé aux corbeau</h1>
<div class="render"> <div class="render">
<img class="background" src="img/Champs2BleOcorbeaux.jpg"> <div id="webGL" class="centre">
<div id="webGL" class="centre"></div> <!-- Mon script avec un chemin relatif -->
<!-- Mon script avec un chemin relatif --> <script type="module" src="paint.js"></script>
<script type="module" src="paint.js"></script> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="tableau"> <table>
<img class="tableau-img" src="img/Champs2BleOcorbeaux.jpg" alt="tableau du champs"> <tr>
<div class="tableau-presentation"> <td>
<p>Super stylé le tableau</p> <img class="tableau-img" src="img.jpg" alt="tableau du champs">
</div> </td>
</div> <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> </body>
......
nirrengarten ratti phillipon-champroux/style.css
+ 12
− 6
View file @ c6e87d84
...@@ -9,10 +9,6 @@ canvas { ...@@ -9,10 +9,6 @@ canvas {
border-radius: 20px; border-radius: 20px;
} }
.render{
display: flex;
}
.centre { .centre {
text-align: center; text-align: center;
...@@ -32,6 +28,16 @@ canvas { ...@@ -32,6 +28,16 @@ canvas {
} }
.tableau-img{ .tableau-img{
display: flex; display: flex;
width: 380px; width: 760px;
height: 242px; 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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment