Skip to content
Snippets Groups Projects
Commit f18bbb7d authored by loudfr's avatar loudfr
Browse files

coche et esthetisme

parent ed7b3964
No related branches found
No related tags found
No related merge requests found
...@@ -33,20 +33,20 @@ https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.htm ...@@ -33,20 +33,20 @@ https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.htm
## CHECK LIST ## CHECK LIST
*(ajouter X pour cocher)* *(ajouter X pour cocher)*
- [ ] Esthetisme - [X] Esthetisme
- [ ] Mise en page de la page web - [ ] Mise en page de la page web
- [ ] Paragraphe(s) d'explications techniques - [ ] Paragraphe(s) d'explications techniques
- [ ] Légèreté du dossier (<2Mo) - [ ] Légèreté du dossier (<2Mo)
- [ ] Géométrie - [X] Géométrie
- [ ] Couleur - [X] Couleur
- [ ] Transparence - [X] Transparence
- [ ] Eclairage - [ ] Eclairage
- [ ] Ombres portées - [ ] Ombres portées
- [ ] Position de la caméra - [X] Position de la caméra
- [ ] Brouillard - [ ] Brouillard
- [ ] Effet miroir - [X] Effet miroir
- [ ] Texture classique - [X] Texture classique
- [ ] Texture avec transparence - [X] Texture avec transparence
- [ ] Sprites - [ ] Sprites
- [ ] Environment map - [ ] Environment map
- [ ] Skybox - [ ] Skybox
......
...@@ -4,30 +4,70 @@ ...@@ -4,30 +4,70 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>La Chambre de Van Gogh</title> <title>La Chambre de Van Gogh</title>
<style> <style>
body { margin: 0; } body {
canvas { width: 100%; height: 100% } margin: 20px;
.centre{text-align: center;} 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> </style>
</head> </head>
<body> <body>
<!-- API importe du site de Three.js --> <!-- API importe du site de Three.js -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
.js"></script>
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"three": "https://threejs.org/build/three.module.js", "three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/" "three/addons/": "https://threejs.org/examples/jsm/"
} }
} }
</script> </script>
<!-- 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 type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
"></script>
<!-- Un titre centre --> <!-- Un titre centre -->
<h1 class="centre"> La Chambre de Van Gogh</h1> <h1 class="centre">La Chambre de Van Gogh</h1>
<div id="webGL" class="centre"></div>
<!-- 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 --> <!-- Mon script avec un chemin relatif -->
<script type="module" src="chambre.js"></script> <script type="module" src="chambre.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment