diff --git a/HERRY-M--HERRY-E/TABLO.js b/HERRY-M--HERRY-E/TABLO.js
index cfb9842a422aef6588455c3bcbea52cf3d7cfbae..c14ab5739a466d6c133fc83ef4c1f76e9ce99e9a 100644
--- a/HERRY-M--HERRY-E/TABLO.js
+++ b/HERRY-M--HERRY-E/TABLO.js
@@ -1,7 +1,5 @@
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
-// Flower petal improvement: scale and re-orient the petals to look better
-////////////////////////////////////////////////////////////////////////////////
/*global THREE, Coordinates, document, window, dat, $*/
import * as THREE from 'three';
@@ -212,6 +210,8 @@ function CreationNappe() {
function fillScene() {
scene = new THREE.Scene();
+
+ // SKYBOX
function addSkybox() {
const loader = new THREE.CubeTextureLoader();
loader.setPath('textures/');
@@ -225,8 +225,6 @@ function fillScene() {
scene.background = textureCube; // Appliquer la skybox en arrière-plan
}
- // SKYBOX
-
//Brouillard
scene.fog = new THREE.FogExp2(0xAAAAAA, 0.0025);
@@ -240,7 +238,7 @@ function fillScene() {
// Fumée
const folderSmoke = gui.addFolder('Fumée');
- folderSmoke.add(smokeParams, 'spawnRate', 0, 1, 0.01).name('Taux de génération').onChange(function(value) {
+ folderSmoke.add(smokeParams, 'spawnRate', 0, 1, 0.01).name('Nb Particules').onChange(function(value) {
smokeParams.spawnRate = value; // Directement affecter le taux de génération
});
folderSmoke.add(smokeParams, 'size', 0.05, 0.4).name('Taille particules').onChange(function(value) {
@@ -249,7 +247,7 @@ function fillScene() {
particle.scale.set(smokeParams.size, smokeParams.size, 1); // Appliquer la nouvelle taille
});
});
- folderSmoke.add(smokeParams, 'speed', 0.001, 0.02).name('Vitesse de montée').onChange(function(value) {
+ folderSmoke.add(smokeParams, 'speed', 0.001, 0.02).name('Vitesse montée').onChange(function(value) {
smokeParams.speed = value; // Directement affecter la vitesse de montée
smokeParticles.forEach(function(particle) {
particle.velocity = smokeParams.speed; // Appliquer la nouvelle vitesse
@@ -257,16 +255,56 @@ function fillScene() {
});
folderSmoke.open();
+ const lightFolder = gui.addFolder('Sun Light');
+ const lightSettings = {
+ angle: 3,
+ distance: 20,
+ intensity: 0,
+ };
+
+ lightFolder.add(lightSettings, 'angle', 0, Math.PI * 2, 0.01).name('Angle Rotation').onChange(updateLightPosition);
+ lightFolder.add(lightSettings, 'distance', 5, 50, 0.1).name('Distance').onChange(updateLightPosition);
+ lightFolder.add(lightSettings, 'intensity', 0, 10, 0.1).name('Intensité').onChange(updateLightIntensity);
+ lightFolder.open();
+ function updateLightPosition() {
+ // Mettre à jour la position de la lumière en fonction de l'angle et de la distance
+ sunLight.position.set(
+ lightSettings.distance * Math.sin(lightSettings.angle), // Utiliser sin pour l'axe Y
+ lightSettings.distance * Math.cos(lightSettings.angle), // Utiliser cos pour l'axe Z
+ 0
+ );
+
+ // Mettre à jour la position du mesh représentant la lumière
+ lightMesh.position.copy(sunLight.position);
+
+ // Optionnel : mettre à jour la direction de la lumière
+ sunLight.target.position.set(0, 0, 0); // Direction vers l'origine de la scène
+ }
+ function updateLightIntensity() {
+ sunLight.intensity = lightSettings.intensity; // Modifier l'intensité de la lumière
+ }
+
// LIGHT
- var light = new THREE.SpotLight(0xFFFFFF, 500);
+ var light = new THREE.SpotLight(0xFFFFFF, 1000);
light.position.set(-5, 10, -5);
light.castShadow = true;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 50;
light.shadow.bias = -0.0001;
-
scene.add(light);
+ // Light (soleil)
+ const sunLight = new THREE.DirectionalLight(0xffffff, 1);
+ sunLight.castShadow = true;
+ scene.add(sunLight);
+ const lightHelper = new THREE.SphereGeometry(1);
+ const lightMesh = new THREE.Mesh(lightHelper, new THREE.MeshBasicMaterial({ color: 0xffff00 }));
+ scene.add(lightMesh);
+ sunLight.position.set(10, 10, 10);
+ lightMesh.position.copy(sunLight.position);
+ scene.add(sunLight);
+
+
CreationSol()
// Charger l'objet du crâne
var loader = new OBJLoader();
@@ -563,4 +601,4 @@ try {
animate();
} catch (e) {
console.error("Your program encountered an unrecoverable error", e);
-}
+}
\ No newline at end of file
diff --git a/HERRY-M--HERRY-E/index.html b/HERRY-M--HERRY-E/index.html
index 95ad975e0f89d8ed24032484ad4293b0061483fe..264e0bf00cb4c02b4fb64c97f05f3f1bdae4ea69 100644
--- a/HERRY-M--HERRY-E/index.html
+++ b/HERRY-M--HERRY-E/index.html
@@ -1,35 +1,121 @@
<!DOCTYPE html>
-<html>
- <head>
- <meta charset="UTF-8">
- <title>TP 1</title>
- <style>
- body { margin: 0; }
- canvas { width: 100%; height: 100% }
- .centre{text-align: center;}
- </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>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>TP 1 - HERRY Mattéo & Elwyn</title>
+ <style>
+ /* Remettre à zéro les marges et les paddings */
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ /* Fond de la page */
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ }
+
+ /* Titre principal */
+ h1 {
+ color: #333;
+ margin-bottom: 20px;
+ font-size: 2.5em;
+ }
+
+ /* Style de la description sous le titre */
+ p.centre {
+ color: #666;
+ font-size: 1.1em;
+ margin-top: 10px;
+ }
+
+ /* Conteneur pour le rendu Three.js */
+ #webGL {
+ width: 80%;
+ height: 400px;
+ margin-bottom: 20px;
+ border: 2px solid #ddd;
+ background-color: #fff;
+ }
+
+ /* Style pour afficher l'image de la peinture */
+ .image-container {
+ display: flex;
+ justify-content: center;
+ width: 80%;
+ margin-top: 30px;
+ gap: 20px;
+ flex-wrap: wrap;
+ }
+
+ .painting-image {
+ max-width: 400px;
+ height: auto;
+ border: 5px solid #333;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+ }
+
+ /* Style du bouton */
+ .btn {
+ display: inline-block;
+ padding: 10px 20px;
+ margin-top: 20px;
+ background-color: #333;
+ color: white;
+ text-decoration: none;
+ font-size: 1.1em;
+ border-radius: 5px;
+ transition: background-color 0.3s;
+ }
+
+ .btn:hover {
+ background-color: #555;
+ }
+
+ /* Section responsive */
+ @media (max-width: 768px) {
+ .image-container {
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+ </style>
+</head>
+<body>
+ <!-- Titre principal -->
+ <h1 class="centre">HERRY Mattéo - HERRY Elwyn</h1>
+
+ <!-- Affichage de l'image de la peinture -->
+ <div class="image-container">
+ <img src="peinture.jpg" alt="Vanitas Still Life by Pieter Claesz" class="painting-image">
+
+ </div>
+
+ <!-- Description sous la peinture -->
+ <p class="centre">Peinture par Pieter Claesz - Vanitas Still Life</p>
+
+ <!-- Bouton vers paragraphe.html -->
+ <a href="paragraphe.html" class="btn">Voir les explications</a>
+ <!-- Script pour importer Three.js et ton script personnalisé -->
+ <br>
+ <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/"
- }
+ "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>
-
- <!-- Un titre centre -->
- <h1 class="centre"> HERRY Mattéo - HERRY Elwyn</h1>
- <div id="webGL" class="centre"></div>
- <!-- Mon script avec un chemin relatif -->
+
<script type="module" src="TABLO.js"></script>
- <p class="centre"> Pieter Claesz - Vanitas Still Life</p>
- </body>
-</html>
\ No newline at end of file
+</body>
+</html>
diff --git a/HERRY-M--HERRY-E/paragraphe.html b/HERRY-M--HERRY-E/paragraphe.html
new file mode 100644
index 0000000000000000000000000000000000000000..97365941064d8530ef5ffc105504e3129ceaeebd
--- /dev/null
+++ b/HERRY-M--HERRY-E/paragraphe.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Paragraphe Explications - TP 1</title>
+ <style>
+ /* Remettre à zéro les marges et les paddings */
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ /* Fond de la page */
+ body {
+ font-family: 'Arial', sans-serif;
+ background-color: #f4f4f4;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ min-height: 100vh;
+ padding: 20px;
+ }
+
+ /* Titre principal */
+ h1 {
+ color: #333;
+ font-size: 2.5em;
+ margin-bottom: 20px;
+ text-align: center;
+ }
+
+ /* Conteneur des paragraphes */
+ .content {
+ max-width: 800px;
+ width: 100%;
+ margin-top: 20px;
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ border-radius: 10px;
+ line-height: 1.6;
+ }
+
+ /* Style des paragraphes */
+ p {
+ color: #666;
+ font-size: 1.1em;
+ margin-bottom: 15px;
+ }
+
+ /* Titre de chaque paragraphe */
+ h2 {
+ color: #333;
+ font-size: 1.4em;
+ margin-bottom: 10px;
+ text-decoration: underline;
+ }
+
+ /* Ajout d'une petite marge entre les titres et les paragraphes */
+ h2 + p {
+ margin-top: 10px;
+ }
+
+ /* Bouton pour retourner à la page principale */
+ .back-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ background-color: #333;
+ color: white;
+ text-decoration: none;
+ font-size: 1.1em;
+ border-radius: 5px;
+ margin-top: 20px;
+ transition: background-color 0.3s;
+ }
+
+ .back-btn:hover {
+ background-color: #555;
+ }
+
+ </style>
+</head>
+<body>
+
+ <h1>Paragraphe Explications - TP 1</h1>
+
+ <!-- Contenu des paragraphes -->
+ <div class="content">
+ <h2>Esthétisme de la scène</h2>
+ <p>Nous avons choisi des couleurs et des matériaux qui s'harmonisent bien entre eux pour créer une ambiance réaliste et agréable à l'œil. Par exemple, la couleur de la table a été sélectionnée pour s'accorder avec l'éclairage de la scène.</p>
+
+ <h2>Mise en page de la scène 3D</h2>
+ <p>La scène 3D est structurée de manière dynamique avec une caméra qui tourne autour de la table. Nous avons conçu l'interface de manière à la rendre fluide et responsive, garantissant ainsi une bonne expérience visuelle sur tous les appareils.</p>
+
+ <h2>Explications techniques (Lumière et Reflets)</h2>
+ <p>Nous avons intégré des effets de lumière pour imiter l'éclairage naturel et générer des ombres réalistes. Des objets comme le verre et le bougeoir possèdent des reflets dynamiques grâce à l'utilisation de la `CubeCamera` pour simuler les effets miroir.</p>
+
+ <h2>Optimisation de la taille du dossier</h2>
+ <p>Le dossier a été soigneusement optimisé pour être léger, avec une taille inférieure à 2 Mo, afin d'assurer une navigation rapide et un rendu efficace sans perte de qualité.</p>
+
+ <h2>Modélisation de la table</h2>
+ <p>La géométrie de la table a été réalisée pour représenter un meuble réaliste avec des détails soignés. Le matériau de la table est configuré pour interagir avec l'éclairage et produire un effet de brillance subtil, contribuant ainsi à l'ambiance générale de la scène.</p>
+
+ <h2>Effet de transparence sur le verre</h2>
+ <p>Le verre de la scène présente un effet de transparence qui permet de voir à travers lui, ajoutant de la profondeur à l'environnement. Cela a été réalisé en appliquant une texture transparente sur les objets en verre.</p>
+
+ <h2>Éclairage principal</h2>
+ <p>L'éclairage principal est situé en haut à gauche de la scène, imitant ainsi la lumière naturelle d'une fenêtre. Cette position de la lumière génère des ombres réalistes sur les objets et crée une ambiance visuelle agréable.</p>
+
+ <h2>Ombres portées sur les objets</h2>
+ <p>Les ombres portées ont été ajoutées à tous les objets pour donner un effet plus réaliste à la scène. Cela a été réalisé en activant les options `castShadow` et `receiveShadow` pour chaque objet.</p>
+
+ <h2>Caméra dynamique autour de la table</h2>
+ <p>La caméra est placée pour tourner autour de la table, offrant ainsi une vue dynamique et fluide de l'ensemble de la scène. Cette approche permet de mieux explorer l'environnement sous différents angles.</p>
+
+ <h2>Effet de brouillard léger</h2>
+ <p>Un léger effet de brouillard a été ajouté dans la scène pour donner une sensation d'ambiance brumeuse, renforçant ainsi l'immersion dans l'environnement 3D.</p>
+
+ <h2>Effet miroir sur le verre</h2>
+ <p>Le verre possède un effet miroir, créant des reflets des objets autour de lui. Cet effet améliore le réalisme de la scène et donne une illusion de profondeur supplémentaire.</p>
+
+ <h2>Effet miroir sur le bougeoir</h2>
+ <p>Le bougeoir utilise également un effet miroir subtil qui reflète l'environnement autour de lui, contribuant à l'effet visuel global et ajoutant au réalisme de la scène.</p>
+
+ <h2>Texture classique sur le livre</h2>
+ <p>Le livre utilise une texture classique qui imite la couverture d'un véritable livre, avec des détails réalistes qui ajoutent à la crédibilité de la scène.</p>
+
+ <h2>Textures transparentes sur le verre</h2>
+ <p>Les objets en verre sont texturés avec une transparence qui permet de voir à travers eux, créant un effet réaliste qui simule les matériaux transparents.</p>
+
+ <h2>Utilisation de sprites</h2>
+ <p>Des sprites ont été utilisés pour ajouter des éléments dynamiques comme des étincelles ou de la fumée, créant ainsi une ambiance plus vivante dans la scène 3D.</p>
+
+ <h2>Animations de fumée (cigarette)</h2>
+ <p>Une animation de fumée a été ajoutée pour simuler la fumée qui s'échappe de la cigarette, créant un effet dynamique et réaliste dans la scène.</p>
+
+ <h2>Utilisation de normal maps (nappe)</h2>
+ <p>Des normal maps ont été utilisées pour ajouter des détails supplémentaires à la texture de la nappe, simulant des imperfections de surface et donnant un effet de relief.</p>
+
+ <h2>Interface graphique pour ajuster le brouillard</h2>
+ <p>Un GUI (interface graphique) permet à l'utilisateur de personnaliser l'intensité du brouillard dans la scène, offrant ainsi une interaction en temps réel avec les effets visuels. De plus, le GUI permet de simuler un soleil et également de modifier la fumée</p>
+
+ <p><a href="index.html" class="back-btn">Retour à la page principale</a></p>
+ </div>
+
+</body>
+</html>
diff --git a/HERRY-M--HERRY-E/textures/nx.png b/HERRY-M--HERRY-E/textures/nx.png
index 5015d3380431384ba026cafe04882230d0f55d58..1a14c16a689202adbf22a191fc9b05b4ac7f510d 100644
Binary files a/HERRY-M--HERRY-E/textures/nx.png and b/HERRY-M--HERRY-E/textures/nx.png differ
diff --git a/HERRY-M--HERRY-E/textures/ny.png b/HERRY-M--HERRY-E/textures/ny.png
index ea4a58f5c2c7d8c812729ff5dca2736415f91800..d77138e830e5d485af7fa83cf8cfe1360d733c68 100644
Binary files a/HERRY-M--HERRY-E/textures/ny.png and b/HERRY-M--HERRY-E/textures/ny.png differ
diff --git a/HERRY-M--HERRY-E/textures/nz.png b/HERRY-M--HERRY-E/textures/nz.png
index 6c5b9daef930d791dc1ebb9dcf9552bcf58f927e..83d4752c18e0849d5a934199881c3a945aefba72 100644
Binary files a/HERRY-M--HERRY-E/textures/nz.png and b/HERRY-M--HERRY-E/textures/nz.png differ
diff --git a/HERRY-M--HERRY-E/textures/px.png b/HERRY-M--HERRY-E/textures/px.png
index 26fe98c939b117ea4715b8eb0bcd7ae0fc7a188f..4c2b4ce32be4981ef330c8d24569e5fc6817abb8 100644
Binary files a/HERRY-M--HERRY-E/textures/px.png and b/HERRY-M--HERRY-E/textures/px.png differ
diff --git a/HERRY-M--HERRY-E/textures/py.png b/HERRY-M--HERRY-E/textures/py.png
index 8feb13557e5929c3d4360bbecb01b671022d4893..3016164bf0bb12f57a65b5a3faf86d808468a341 100644
Binary files a/HERRY-M--HERRY-E/textures/py.png and b/HERRY-M--HERRY-E/textures/py.png differ
diff --git a/HERRY-M--HERRY-E/textures/pz.png b/HERRY-M--HERRY-E/textures/pz.png
index 6c5b9daef930d791dc1ebb9dcf9552bcf58f927e..a165fbdfd90a6ec902b3df192e8d47e7f2a8eba0 100644
Binary files a/HERRY-M--HERRY-E/textures/pz.png and b/HERRY-M--HERRY-E/textures/pz.png differ