Skip to content
Snippets Groups Projects
Commit 3e9a5f5d authored by MEHIAOUI Mohamed's avatar MEHIAOUI Mohamed
Browse files

Merge branch 'main' of... 

Merge branch 'main' of https://gitlab.univ-lorraine.fr/villard5/webgl25/MEHIAOUI  Modification du fichier.js
parents dfbbe671 ff222bb2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 47 additions and 18 deletions
MATEJKA_MAURICE_COLIN/checklistProjet.md
+ 2
− 2
View file @ 3e9a5f5d
- [X] Esthetisme - [X] Esthetisme
- [ ] Mise en page de la page web - [X] Mise en page de la page web
- [ ] Paragraphe(s) d'explications techniques - [X] Paragraphe(s) d'explications techniques
- [X] Légèreté du dossier (<2Mo) - [X] Légèreté du dossier (<2Mo)
- [X] Géométrie - [X] Géométrie
- [X] Couleur - [X] Couleur
......
MATEJKA_MAURICE_COLIN/img.jpg deleted 100644 → 0
+ 0
− 0
View file @ dfbbe671
MATEJKA_MAURICE_COLIN/img.jpg

553 KiB

MATEJKA_MAURICE_COLIN/index.html
+ 35
− 12
View file @ 3e9a5f5d
...@@ -7,37 +7,60 @@ ...@@ -7,37 +7,60 @@
<style> <style>
body { body {
margin: 0; margin: 0;
} overflow-x : hidden;
canvas {
width: 100%;
height: 100%
} }
.centre { .centre {
text-align: center; text-align: center;
} }
.texte {
margin: 0 auto;
width: 50%;
}
</style> </style>
</head> </head>
<body> <body>
<!-- API importe du site de Three.js --> <!-- API importe du site de Three.js -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
.js"></script>
<script type="importmap"> <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> </script>
<!-- JQuery pour afficher les erreurs --> <!-- JQuery pour afficher les erreurs -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
"></script>
<!-- Un titre centre --> <!-- Un titre centre -->
<h1 class="centre"> Projet - La Nuit étoilée</h1> <h1 class="centre">Projet - La Nuit étoilée</h1>
<p class="centre"> </p> <p class="centre"></p>
<div id="webGL" class="centre"></div> <div id="webGL" class="centre"></div>
<!-- Mon script avec un chemin relatif --> <!-- Mon script avec un chemin relatif -->
<script type="module" src="index.js"></script> <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> </body>
</html> </html>
\ No newline at end of file
MATEJKA_MAURICE_COLIN/index.js
+ 10
− 4
View file @ 3e9a5f5d
...@@ -10,6 +10,7 @@ const gui = new GUI(); ...@@ -10,6 +10,7 @@ const gui = new GUI();
function init() { function init() {
//Création de la scène //Création de la scène
scene = new THREE.Scene(); scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x999999, 0.05);
//Création du renderer WebGL //Création du renderer WebGL
renderer = new THREE.WebGLRenderer(); renderer = new THREE.WebGLRenderer();
...@@ -212,7 +213,8 @@ function init() { ...@@ -212,7 +213,8 @@ function init() {
const geometry = new THREE.PlaneGeometry(75, 50); const geometry = new THREE.PlaneGeometry(75, 50);
const material = new THREE.MeshBasicMaterial({ const material = new THREE.MeshBasicMaterial({
map: texture, map: texture,
color: 0x777777 color: 0x777777,
fog: false
}); });
const plane = new THREE.Mesh(geometry, material); const plane = new THREE.Mesh(geometry, material);
plane.position.set(0, 18, -150); plane.position.set(0, 18, -150);
...@@ -222,7 +224,8 @@ function init() { ...@@ -222,7 +224,8 @@ function init() {
} }
addVillageImage(); addVillageImage();
//Chargement du modèle Bougie //Chargement du modèle Bougie
loader.load( loader.load(
...@@ -284,12 +287,15 @@ function init() { ...@@ -284,12 +287,15 @@ function init() {
} }
const guiParams = { const guiParams = {
intensity: 1.5 intensity: 1.5,
fogDensity: 0.05
}; };
function setupGUI() { function setupGUI() {
gui.add(guiParams, 'intensity', 0.01, 5, 0.1).name('Intensité Bougie'); 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() { function onWindowResize() {
......
MATEJKA_MAURICE_COLIN/textures/1.png deleted 100644 → 0
+ 0
− 0
View file @ dfbbe671
MATEJKA_MAURICE_COLIN/textures/1.png

249 KiB

MATEJKA_MAURICE_COLIN/textures/2.png deleted 100644 → 0
+ 0
− 0
View file @ dfbbe671
MATEJKA_MAURICE_COLIN/textures/2.png

238 KiB

MATEJKA_MAURICE_COLIN/textures/3.png deleted 100644 → 0
+ 0
− 0
View file @ dfbbe671
MATEJKA_MAURICE_COLIN/textures/3.png

267 KiB

MATEJKA_MAURICE_COLIN/textures/4.png deleted 100644 → 0
+ 0
− 0
View file @ dfbbe671
MATEJKA_MAURICE_COLIN/textures/4.png

271 KiB

MATEJKA_MAURICE_COLIN/textures/5.png deleted 100644 → 0
+ 0
− 0
View file @ dfbbe671
MATEJKA_MAURICE_COLIN/textures/5.png

291 KiB

MATEJKA_MAURICE_COLIN/textures/6.png deleted 100644 → 0
+ 0
− 0
View file @ dfbbe671
MATEJKA_MAURICE_COLIN/textures/6.png

224 KiB

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment