diff --git a/MATEJKA_MAURICE_COLIN/checklistProjet.md b/MATEJKA_MAURICE_COLIN/checklistProjet.md index 389fc58879194796db6335fe200bd54d8258852a..bfa25623b90ba42d923c1024adf48e85da7bb2ad 100644 --- a/MATEJKA_MAURICE_COLIN/checklistProjet.md +++ b/MATEJKA_MAURICE_COLIN/checklistProjet.md @@ -1,6 +1,6 @@ - [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 diff --git a/MATEJKA_MAURICE_COLIN/img.jpg b/MATEJKA_MAURICE_COLIN/img.jpg deleted file mode 100644 index 1276e942f160c9e882af6370498a8e2585c73c40..0000000000000000000000000000000000000000 Binary files a/MATEJKA_MAURICE_COLIN/img.jpg and /dev/null differ diff --git a/MATEJKA_MAURICE_COLIN/index.html b/MATEJKA_MAURICE_COLIN/index.html index 68c29fd36e739a4f9cd1e349cb7e416324dedabd..a5531e6f6871dd0c4f604e27ae81df737e8b7452 100644 --- 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 diff --git a/MATEJKA_MAURICE_COLIN/index.js b/MATEJKA_MAURICE_COLIN/index.js index edb8221f4a1bef917af4960afe2069154649f51f..dbff5df72dd46179f6589926071b932ad041e7b7 100644 --- 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() { diff --git a/MATEJKA_MAURICE_COLIN/textures/1.png b/MATEJKA_MAURICE_COLIN/textures/1.png deleted file mode 100644 index 339d4cd82d8b68f28b5f791bcb7efa93e8ebf28c..0000000000000000000000000000000000000000 Binary files a/MATEJKA_MAURICE_COLIN/textures/1.png and /dev/null differ diff --git a/MATEJKA_MAURICE_COLIN/textures/2.png b/MATEJKA_MAURICE_COLIN/textures/2.png deleted file mode 100644 index ea7b4f05b177a8b51b1a95c4ee5807ddf8da1ac7..0000000000000000000000000000000000000000 Binary files a/MATEJKA_MAURICE_COLIN/textures/2.png and /dev/null differ diff --git a/MATEJKA_MAURICE_COLIN/textures/3.png b/MATEJKA_MAURICE_COLIN/textures/3.png deleted file mode 100644 index b705d81b88b09851cfc0102395bf0ed1b69640d9..0000000000000000000000000000000000000000 Binary files a/MATEJKA_MAURICE_COLIN/textures/3.png and /dev/null differ diff --git a/MATEJKA_MAURICE_COLIN/textures/4.png b/MATEJKA_MAURICE_COLIN/textures/4.png deleted file mode 100644 index 666f259ce56c3ee5d635977fc34a3d4e23c8a40b..0000000000000000000000000000000000000000 Binary files a/MATEJKA_MAURICE_COLIN/textures/4.png and /dev/null differ diff --git a/MATEJKA_MAURICE_COLIN/textures/5.png b/MATEJKA_MAURICE_COLIN/textures/5.png deleted file mode 100644 index 319f6993f0f0e243fbb7ec16910155e418cdf455..0000000000000000000000000000000000000000 Binary files a/MATEJKA_MAURICE_COLIN/textures/5.png and /dev/null differ diff --git a/MATEJKA_MAURICE_COLIN/textures/6.png b/MATEJKA_MAURICE_COLIN/textures/6.png deleted file mode 100644 index 34496ff86de86719ab7c7c2b03e86b8a05914e31..0000000000000000000000000000000000000000 Binary files a/MATEJKA_MAURICE_COLIN/textures/6.png and /dev/null differ