Skip to content
Snippets Groups Projects
Commit 84dca05d authored by Nguyen Quang-Liem's avatar Nguyen Quang-Liem :icecream:
Browse files

Replace index.html

parent d817e066
No related branches found
No related tags found
No related merge requests found
Le travail n'a pas encore commencé!!! <!DOCTYPE html>
\ No newline at end of file <html>
<head>
<meta charset="UTF-8">
<title>R4.13 - Projet</title>
<style>
body {
margin: 50px;
background-image: url('textures/background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
}
.mainbox {
padding: 20px;
width: 95%;
margin: auto;
border: 2px solid #ccc;
border-radius: 10px;
overflow: hidden;
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.24);
}
canvas {
width: 100%;
height: 100%
}
.centre {
text-align: center;
}
.maintext {
font-size: 25px;
text-align: justify;
}
p {
font-size: 20px;
}
.container {
display: flex;
margin: auto;
overflow: hidden;
}
.left {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.right {
flex: 1;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.center {
display: flex;
justify-content: center;
}
#gui-container {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
}
#webGL {
position: relative;
border: 5px solid #ddd;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
padding: 8px;
}
#stats {
position: absolute !important;
top: 20% !important;
right: 170px !important;
left: auto !important;
transform: translateY(-50%) !important;
}
img {
border: 5px solid #ddd;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
padding: 8px;
background-color: white;
}
</style>
</head>
<body>
<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/"
}
}
</script>
<script type="module" src="lib/Coordinates.js"></script>
<script type="module" src="lib/jquery-1.8.3.min.js"></script>
<script type="module" src="lib/dat.gui.min.js"></script>
<!-- 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">R4.13 - Interaction graphique et animation</h1>
<h2 class="centre">Projet: L'Île des morts (Böcklin)</h2>
<p class="centre">NGUYEN Quang-Liêm - RALLI Clément - VINCENT Téo</p>
<div class="mainbox">
<h2>Introduction</h2>
<p class=maintext>Dans le cadre de la ressource R4.13 - Intéraction graphique et animation, l'objectif du projet final est d'exploiter les méthodes mises en pratique lors des TP afin de recréer un tableau au choix, en utilisant un environnement en 3 dimensions. La reproduction doit inclure un certain nombre de propriété définie par un cahier des charges publié par l'enseignant, même si cela rend la reproduction différente du modèle de référence.</p>
<div class="container">
<div class="left">
<img src="img.jpg">
</div>
<div class="right">
<p>
L’Île des Morts (Die Toteninsel) est une série de cinq tableaux peints entre 1880 et 1886 par Arnold Böcklin.<br>
Elle représente une île au coucher du soleil, vers laquelle se dirige une embarcation conduite par un passeur. À ses côtés dans le bateau, un défunt debout dans son linceul, regarde vers la crique dans laquelle va entrer la barque. Sur l’île, une cour dans l’ombre, des rochers escarpés et de hauts cyprès dégagent une atmosphère de solitude et d’oppression.
<br>
<br>
<i>Source: Wikipedia</i>
</p>
</div>
</div>
<div id="webGL" class="center">
<!-- Mon script avec un chemin relatif -->
<script type="module" src="source.js"></script>
<div id="gui-container"></div>
</div>
<br>
<div id="webGL">
<h1>Documentation Technique</h1>
<h2>Méthodes d'initialisation et de configuration</h2>
<h3>init()</h3>
Configure le rendu WebGL, la caméra et les contrôles. Initialise le renderer avec des paramètres spécifiques (anti-aliasing, correction gamma), configure la caméra avec un angle de vue et une position initiale, et met en place les contrôles de caméra OrbitControls ainsi que le module de statistiques.
<h3>fillScene()</h3>
Remplit la scène avec tous les éléments 3D. Crée la skybox, le brouillard, l'île, les falaises, la forêt, le sol, l'eau, les reflets, le bateau et la porte, puis les organise dans des groupes hiérarchiques. Configure également les sources de lumière (ambiante et directionnelle) et les aides visuelles (axes et helper de lumière).
<h3>setupGui()</h3>
Configure l'interface utilisateur avec dat.GUI. Crée un panneau de contrôle permettant d'ajuster le champ de vision (FOV) de la caméra, d'afficher/masquer les aides visuelles (direction de lumière, axes), d'activer/désactiver le brouillard et les lumières, et de modifier l'intensité de la lumière ambiante.
<h3>addToDOM()</h3>
Ajoute le canvas de rendu et les statistiques au DOM. Vérifie si un canvas existe déjà et le supprime, puis ajoute le canvas du renderer et les statistiques au conteneur avec l'ID 'webGL'.
</div>
<br>
<div id="webGL">
<h2>Méthodes d'animation et de rendu</h2>
<h3>animate()</h3>
Boucle d'animation principale. Met à jour les cartes de déplacement (displacement maps) pour le sol et l'eau, anime le bateau avec un mouvement d'oscillation vertical et de tangage, met à jour la luminosité de l'eau et de la skybox, puis appelle les fonctions de rendu.
<h3>render()</h3>
Effectue le rendu de la scène. Met à jour les contrôles de caméra, applique les changements de FOV, met à jour les statistiques et effectue le rendu final de la scène avec le renderer.
<h3>updateCamera()</h3>
Gère les déplacements de la caméra en fonction des touches pressées. Calcule un vecteur de déplacement basé sur les touches WASD et l'orientation de la caméra, puis déplace la caméra et son point cible en conséquence. La touche R réinitialise la position de la caméra.
<h3>updateWaterBrightness()</h3>
Ajuste les propriétés du matériau de l'eau en fonction de l'intensité lumineuse globale. Modifie le caractère métallique, la rugosité et l'opacité de l'eau pour simuler différentes apparences selon les conditions d'éclairage.
<h3>updateSkyboxBrightness()</h3>
Ajuste la luminosité de la skybox en fonction de l'intensité lumineuse globale. Modifie le facteur de luminosité des matériaux de la skybox pour simuler différentes conditions atmosphériques.
</div>
<div id="webGL">
<h2>Méthodes de création d'objets</h2>
<h3>createTrunk(scale)</h3>
Crée un tronc d'arbre cylindrique avec une texture de bois et une carte de normales. Retourne un maillage cylindrique avec un matériau standard, configuré pour projeter et recevoir des ombres.
<h3>createLeaves(scale)</h3>
Crée la partie feuillage d'un arbre avec une texture de feuilles et une carte de normales. Retourne un maillage cylindrique légèrement transparent avec un matériau standard, configuré pour projeter et recevoir des ombres.
<h3>createTree(scale)</h3>
Assemble un arbre complet en combinant un tronc et un feuillage. Crée un groupe qui contient les deux éléments et l'ajoute à la scène.
<h3>createCliff()</h3>
Charge et positionne des modèles 3D de falaises. Crée un groupe contenant deux instances du même modèle de falaise, positionnées différemment et à des échelles différentes, configurées pour projeter et recevoir des ombres.
<h3>createSingleDoor()</h3>
Crée une porte individuelle avec ses encadrements. Génère un groupe contenant un fond de porte noir et quatre bordures en briques (gauche, droite, haut, bas), positionnées pour former un encadrement.
<h3>createDoor()</h3>
Crée un ensemble de portes. Assemble plusieurs portes individuelles en un groupe, les positionne et les oriente pour former une structure complète.
<h3>createBoat()</h3>
Crée un bateau avec ses occupants et accessoires. Charge un modèle 3D de bateau, y ajoute un personnage assis, un coffre et une texture de statue en sprite, puis positionne l'ensemble.
<h3>createForest(scale)</h3>
Crée une forêt en disposant plusieurs arbres. Génère un groupe contenant sept arbres à différentes échelles et positions pour créer un effet naturel.
<h3>createGround()</h3>
Crée le sol avec une texture et une carte de déplacement. Génère un plan large avec un matériau standard utilisant une texture de sol et une carte de déplacement pour simuler un relief, configuré pour recevoir des ombres.
<h3>createBrick(width, height, depth, materialBrick)</h3>
Crée une brique personnalisée. Génère un pavé avec les dimensions spécifiées et une texture de brique définie par le paramètre materialBrick, avec une carte de normales pour un effet de relief.
<h3>createGrass(scale)</h3>
Crée un sprite d'herbe. Génère un sprite avec une texture d'herbe transparente et le dimensionne selon l'échelle fournie.
<h3>createIsland()</h3>
Crée une île avec de l'herbe et des bordures en briques. Génère un groupe contenant un sol herbeux avec carte de déplacement, des bordures en briques et des sprites d'herbe placés aléatoirement pour donner un effet naturel.
<h3>createReflection(island)</h3>
Crée un reflet de l'île dans l'eau. Clone l'île, inverse sa position sur l'axe Y, ajuste ses matériaux pour les rendre semi-transparents et leur applique une carte de déplacement pour simuler un effet de reflet dans l'eau.
<h3>createWater()</h3>
Crée la surface d'eau avec effets de réflexion. Génère un plan large avec un matériau standard semi-transparent, utilisant une texture d'eau, une carte de déplacement et une carte d'environnement pour simuler l'aspect et le mouvement de l'eau.
</div>
</div>
</body>
</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