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

coche et esthetisme

parent ed7b3964
Branches
Tags 6.1
No related merge requests found
......@@ -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
......
......@@ -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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment