brouillard + map

000e0bac · COLIN Gabin · baa7c738 · 000e0bac · baa7c738 · 000e0bac
Commit 000e0bac authored 3 months ago by COLIN Gabin
--- a/MATEJKA_MAURICE_COLIN/checklistProjet.md
+++ b/MATEJKA_MAURICE_COLIN/checklistProjet.md
 - [X] Esthetisme
- [ ] Mise en page de la page web
- [ ] Paragraphe(s) d'explications techniques
+- [X] Mise en page de la page web
+- [X] Paragraphe(s) d'explications techniques
 - [X] Légèreté du dossier (<2Mo)
 - [X] Géométrie
 - [X] Couleur

--- a/MATEJKA_MAURICE_COLIN/img.jpg
+++ b/MATEJKA_MAURICE_COLIN/img.jpg
--- a/MATEJKA_MAURICE_COLIN/index.html
+++ b/MATEJKA_MAURICE_COLIN/index.html
@@ -7,37 +7,60 @@
    <style>
        body {
            margin: 0;
-        }
-        
-        canvas {
-            width: 100%;
-            height: 100%
+            overflow-x : hidden;
        }
        
        .centre {
            text-align: center;
        }
+
+        .texte {
+            margin: 0 auto;
+            width: 50%;
+        }
    </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/" } }
    </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"> Projet - La Nuit étoilée</h1>
-    <p class="centre">  </p>
+    <h1 class="centre">Projet - La Nuit étoilée</h1>
+    <p class="centre"></p>
    <div id="webGL" class="centre"></div>
    <!-- Mon script avec un chemin relatif -->
    <script type="module" src="index.js"></script>
+
+    <!-- Ajout des paragraphes Lorem Ipsum -->
+    <div class="texte">
+        <h2>Présentation de l'ouvre</h2>
+        <p>Cette œuvre met en scène Vincent van Gogh contemplant une ville depuis un point de vue en hauteur, perdu dans ses pensées 
+            et inspiré par le paysage nocturne qui s’offre à lui. Ce moment figé dans l’image représente l’instant où le peintre 
+            puise dans son imagination et son ressenti pour donner naissance à l’un de ses chefs-d’œuvre les plus emblématiques : 
+            La Nuit étoilée.
+            À travers cette représentation, on perçoit la transformation de la réalité en une vision artistique unique, 
+            où les formes et les couleurs deviennent l’expression de son monde intérieur. Ainsi, cette scène illustre non
+             seulement la genèse de son tableau mythique, mais aussi le processus artistique qui l’anime, mêlant observation, 
+             émotion et interprétation personnelle</p>
+        <h2>Détails techniques</h2>
+        <p>Pour le reflet, aucun de nos éléments de permetait d'intégrer un reflet naturel, donc nous avons décider d'ajouter une sphere près <>
+            la bougie afin de simuler un reflet.
+        </p>
+        <p>L'éclairage, nous avons décider de mettre en avant la bougie car étant une source de lumirèe naturelle qui capte l'attention, il était
+            important de la mettre en avant, le GUI permet aussi d'amplifier sa puissance.
+            L'ombre portée s'appuie aussi sur la bougie, elle est reflerter sur le socle sur lequel se trouve la bougie ainsi que sur le peintre.
+        </p>
+        <img src="https://scontent-cdg4-3.xx.fbcdn.net/v/t1.6435-9/131424346_3949776681720323_4178295612337288087_n.jpg?_nc_cat=106&ccb=1-7&_nc_sid=127cfc&_nc_ohc=b7IhEoWANSQQ7kNvgELC2C-&_nc_oc=AdiQb66mhxE7lkPbBgB1Guy9D_pIJGhD8vDg1YTDjLctTORiMKmo4zMtKz66XXAC0_pZwHVRW4OFeWDAjXhTcJPQ&_nc_zt=23&_nc_ht=scontent-cdg4-3.xx&_nc_gid=70LttgjE3fpJKXlchCkoKg&oh=00_AYEUJWa7gpjXa7GsO2GZORcdeS0eA4xxhklSbOW8cr7V3w&oe=67FFDC79" alt="Oeuvre" width="100%">
+
+
+        <h1>Représentation 3D de l'oeuvre : </h1>
+    </div>
 </body>

 </html>
\ No newline at end of file
--- a/MATEJKA_MAURICE_COLIN/index.js
+++ b/MATEJKA_MAURICE_COLIN/index.js
@@ -10,6 +10,7 @@ const gui = new GUI();
 function init() {
    //Création de la scène
    scene = new THREE.Scene();
+    scene.fog = new THREE.FogExp2(0x999999, 0.05);

    //Création du renderer WebGL
    renderer = new THREE.WebGLRenderer();
@@ -212,7 +213,8 @@ function init() {
            const geometry = new THREE.PlaneGeometry(75, 50);
            const material = new THREE.MeshBasicMaterial({
                map: texture,
-                color: 0x777777
+                color: 0x777777,
+                fog: false
            });
            const plane = new THREE.Mesh(geometry, material);
            plane.position.set(0, 18, -150);
@@ -222,7 +224,8 @@ function init() {
    }


-    addVillageImage();
+    addVillageImage();  
+

    //Chargement du modèle Bougie
    loader.load(
@@ -284,12 +287,15 @@ function init() {
 }

 const guiParams = {
-    intensity: 1.5
+    intensity: 1.5,
+    fogDensity: 0.05
 };

 function setupGUI() {
    gui.add(guiParams, 'intensity', 0.01, 5, 0.1).name('Intensité Bougie');
-
+    gui.add(guiParams, 'fogDensity', 0.01, 0.2, 0.01).name('Densité Brouillard').onChange((value) => {
+        scene.fog = new THREE.FogExp2(0x999999, value);
+    });
 }

 function onWindowResize() {

--- a/MATEJKA_MAURICE_COLIN/textures/1.png
+++ b/MATEJKA_MAURICE_COLIN/textures/1.png
--- a/MATEJKA_MAURICE_COLIN/textures/2.png
+++ b/MATEJKA_MAURICE_COLIN/textures/2.png
--- a/MATEJKA_MAURICE_COLIN/textures/3.png
+++ b/MATEJKA_MAURICE_COLIN/textures/3.png
--- a/MATEJKA_MAURICE_COLIN/textures/4.png
+++ b/MATEJKA_MAURICE_COLIN/textures/4.png
--- a/MATEJKA_MAURICE_COLIN/textures/5.png
+++ b/MATEJKA_MAURICE_COLIN/textures/5.png
--- a/MATEJKA_MAURICE_COLIN/textures/6.png
+++ b/MATEJKA_MAURICE_COLIN/textures/6.png
--- a/MATEJKA_MAURICE_COLIN/textures/rock.mtl
+++ b/MATEJKA_MAURICE_COLIN/textures/rock.mtl
+# Created with Anim8or 1.00
+# Object "CavePlatform1":
+
+newmtl CavePlatform_Base
+Ka 0.18 0.18 0.18
+Kd 0.424 0.424 0.424
+Ks 0.545 0.545 0.545
+Ns 738.6
+map_Kd CavePlatform1_Base_Diffuse.png
+map_Ks CavePlatform1_Base_Specular.png
+
--- a/MATEJKA_MAURICE_COLIN/textures/rock.obj
+++ b/MATEJKA_MAURICE_COLIN/textures/rock.obj