Skip to content
Snippets Groups Projects
Commit 5252234b authored by RIFI Zaynab's avatar RIFI Zaynab
Browse files

Update file index.html

parent 3d7e4bd2
No related branches found
No related tags found
No related merge requests found
...@@ -26,18 +26,29 @@ ...@@ -26,18 +26,29 @@
h1 { h1 {
font-size: 32px; font-size: 32px;
margin-bottom: 20px; margin-bottom: 20px;
color: #d4af37; /* Couleur or */ color: #d4af37;
}
h2 {
font-size: 24px;
margin: 30px 0 15px;
color: #bf8c2e;
} }
p { p {
margin-bottom: 20px; margin-bottom: 20px;
line-height: 1.6; line-height: 1.6;
} }
#webGL { #webGL {
border: 2px solid #d4af37; border: 4px solid #bf8c2e;
margin: 20px auto; margin: 20px auto;
width: 846px; width: 846px;
height: 494px; height: 494px;
} }
.tech-details {
background-color: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: 5px;
border-left: 3px solid #d4af37;
}
</style> </style>
</head> </head>
<body> <body>
...@@ -53,6 +64,31 @@ ...@@ -53,6 +64,31 @@
<p> <p>
Cette scène est inspirée des peintures vanitas du XVIIe siècle, qui contiennent des objets symboliques rappelant aux spectateurs le passage du temps, la fragilité de la vie et la vanité des ambitions terrestres. Cette scène est inspirée des peintures vanitas du XVIIe siècle, qui contiennent des objets symboliques rappelant aux spectateurs le passage du temps, la fragilité de la vie et la vanité des ambitions terrestres.
</p> </p>
<h2>Aspects techniques</h2>
<div class="tech-details">
<p>
Cette scène 3D exploite plusieurs techniques avancées du Web3D et Three.js :
</p>
<p>
<strong>Modélisation :</strong> Les modèles 3D (crâne, fleur) sont chargés via OBJLoader. La table et la bougie sont créés procéduralement avec des géométries Three.js.
</p>
<p>
<strong>Éclairage :</strong> Système complexe combinant lumières directionnelles, ponctuelles et ambiantes avec ombres portées en temps réel (PCFSoftShadowMap). La bougie émet une lumière dynamique qui affecte l'environnement.
</p>
<p>
<strong>Matériaux PBR :</strong> Les matériaux utilisent le pipeline Physically Based Rendering avec roughness et metalness pour un rendu réaliste. Le crâne et les éléments métalliques ont des propriétés de réflexion avancées.
</p>
<p>
<strong>Effets :</strong> La scène inclut du brouillard volumétrique, une skybox, des sprites pour les particules de poussière, et un effet miroir sur la table. Les normal maps ajoutent du détail à la texture du bois.
</p>
<p>
<strong>Animation :</strong> La flamme de la bougie est animée avec des déformations géométriques et un système de particules. L'intensité lumineuse varie pour simuler le vacillement naturel d'une flamme.
</p>
<p>
<strong>Interaction :</strong> L'interface GUI permet de contrôler divers aspects de la scène, tandis qu'OrbitControls offre une navigation 3D intuitive.
</p>
</div>
</div> </div>
<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>
...@@ -64,6 +100,7 @@ ...@@ -64,6 +100,7 @@
} }
} }
</script> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
<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>
<script type="module" src="script.js"></script> <script type="module" src="script.js"></script>
</body> </body>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment