diff --git a/MEHIAOUI/app.css b/MEHIAOUI/app.css
index 2be4054091cdbe2597e3100e8a5803297c7842f7..feb1f650413035667a45e3f55c6abc36e9d6cdba 100644
--- a/MEHIAOUI/app.css
+++ b/MEHIAOUI/app.css
@@ -64,20 +64,22 @@ body{
.scene, .original {
width: 50%;
text-align: center;
+ margin-bottom: 40px;
}
-
- .original img {
- max-width: 100%;
- height: auto;
- border: 2px solid black;
- }
-
- #webGL {
- margin-bottom: 20px;
- font-size: 1.2em;
- font-weight: bold;
+ .projetAndOriginal{
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ gap: 20px;
+ width: 100%;
+ height: 100%;
+ .original{
+ width: 50%;
+ height: 500px;
+ border: 1px solid red;
+ background-image: url(img.jpg);
+ }
}
-
}
}
diff --git a/MEHIAOUI/projet.js b/MEHIAOUI/projet.js
index 17bb50cdf94a518e32bc8f8387d737d33a0a760b..1521110317212ad51a9be94b1f492ffe53f1a295 100644
--- a/MEHIAOUI/projet.js
+++ b/MEHIAOUI/projet.js
@@ -44,7 +44,7 @@ function fillScene() {
spotLight.penumbra = 0.5;
spotLight.decay = 2;
spotLight.distance = 200;
- spotLight.castShadow = true;
+ spotLight.castShadow = false;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 10;
@@ -131,10 +131,16 @@ function fillScene() {
createApple(-4, 4, 7, 0x00FF00,0);
createApple(-7, 3, 6, 0xFFFF00,0);
createApple(-2, 5, 5, 0xFF0000,0);
+ createApple(-6, 4, 3, 0x00FF00, 0); // Nouvelle pomme ajoutée
//pomme devant le bol en ligne de gauche à droite
createApple(-5, 0.5, 13, 0xFF0000,0);
-
+ createApple(-1, 0.5, 13, 0x00FF00, 0);
+ createApple(-9, 0.5, 11, 0xFFFF00, 0);
+ createApple(4, 1, 10, 0x00FF00, 0);
+ createApple(8, 1, 10, 0xFF0000, 0);
+ createApple(-3, 0.5, 17, 0xFFFF00,0);
+
// vase : exemple trouvé sur Internet
// Points of curve
@@ -216,8 +222,8 @@ function fillScene() {
var stem = new THREE.Mesh(stemGeometry, stemMaterial);
//centre de la fleur
- var centerGeometry = new THREE.SphereGeometry(0.3, 32, 32);
- var centerMaterial = new THREE.MeshPhongMaterial({ color: 0xFFFF00 });
+ var centerGeometry = new THREE.SphereGeometry(0.2, 30, 30);
+ var centerMaterial = new THREE.MeshPhongMaterial({ color: 0xFF0000 });
var center = new THREE.Mesh(centerGeometry, centerMaterial);
center.position.set(5, 15, 3);
center.castShadow = true;
@@ -247,6 +253,150 @@ function fillScene() {
// Add the flower to the scene
window.scene.add(flower);
+ // la tige de la deuxième fleur sortant du vase et courbée
+ var curve2 = new THREE.CatmullRomCurve3([
+ new THREE.Vector3(5, 5.25, 1),
+ new THREE.Vector3(5, 7, 1),
+ new THREE.Vector3(5, 9, 1.5),
+ new THREE.Vector3(5, 11, 2),
+ new THREE.Vector3(5, 13, 2.5),
+ new THREE.Vector3(5, 15, 3)
+ ]);
+
+ var stemGeometry2 = new THREE.TubeGeometry(curve2, 64, 0.1, 8, false);
+ var stemMaterial2 = new THREE.MeshPhongMaterial({ color: 0x228B22 });
+ var stem2 = new THREE.Mesh(stemGeometry2, stemMaterial2);
+
+ // centre de la deuxième fleur
+ var centerGeometry2 = new THREE.SphereGeometry(0.2, 32, 32);
+ var centerMaterial2 = new THREE.MeshPhongMaterial({ color: 0xFF0000 });
+ var center2 = new THREE.Mesh(centerGeometry2, centerMaterial2);
+ center2.position.set(5, 15, 3);
+ center2.castShadow = true;
+
+ // Create the flower petals for the second flower
+ var petalTexture2 = new THREE.TextureLoader().load('textures/texture_flower.png'); // Load your petal texture
+ var petalGeometry2 = new THREE.PlaneGeometry(1, 2);
+ var petalMaterial2 = new THREE.MeshPhongMaterial({ map: petalTexture2, side: THREE.DoubleSide, transparent: true });
+
+ var petals2 = [];
+ for (let i = 0; i < 8; i++) {
+ var petal2 = new THREE.Mesh(petalGeometry2, petalMaterial2);
+ petal2.position.set(5, 15, 3);
+ petal2.rotation.set(0, 0, (i * Math.PI) / 4);
+ petal2.translateY(1);
+ petals2.push(petal2);
+ petals2.castShadow = true;
+ }
+
+ // Group the second flower parts
+ var flower2 = new THREE.Group();
+ flower2.add(stem2);
+ flower2.add(center2);
+ petals2.forEach(petal2 => flower2.add(petal2));
+
+ // Adjust the position of the second flower
+ flower2.position.set(1, 0, 0);
+
+ // Add the second flower to the scene
+ window.scene.add(flower2);
+
+ // la tige de la troisième fleur sortant du vase et courbée
+ var curve3 = new THREE.CatmullRomCurve3([
+ new THREE.Vector3(5, 5.25, 1),
+ new THREE.Vector3(5, 7, 1),
+ new THREE.Vector3(5, 9, 1.5),
+ new THREE.Vector3(5, 11, 2),
+ new THREE.Vector3(5, 13, 2.5),
+ new THREE.Vector3(5, 15, 3)
+ ]);
+
+ var stemGeometry3 = new THREE.TubeGeometry(curve3, 64, 0.1, 8, false);
+ var stemMaterial3 = new THREE.MeshPhongMaterial({ color: 0x228B22 });
+ var stem3 = new THREE.Mesh(stemGeometry3, stemMaterial3);
+
+ // centre de la troisième fleur
+ var centerGeometry3 = new THREE.SphereGeometry(0.2, 32, 32);
+ var centerMaterial3 = new THREE.MeshPhongMaterial({ color: 0xFF0000 });
+ var center3 = new THREE.Mesh(centerGeometry3, centerMaterial3);
+ center3.position.set(5, 15, 3);
+ center3.castShadow = true;
+
+ // Create the flower petals for the third flower
+ var petalTexture3 = new THREE.TextureLoader().load('textures/texture_flower.png'); // Load your petal texture
+ var petalGeometry3 = new THREE.PlaneGeometry(1, 2);
+ var petalMaterial3 = new THREE.MeshPhongMaterial({ map: petalTexture3, side: THREE.DoubleSide, transparent: true });
+
+ var petals3 = [];
+ for (let i = 0; i < 8; i++) {
+ var petal3 = new THREE.Mesh(petalGeometry3, petalMaterial3);
+ petal3.position.set(5, 15, 3);
+ petal3.rotation.set(0, 0, (i * Math.PI) / 4);
+ petal3.translateY(1);
+ petals3.push(petal3);
+ petals3.castShadow = true;
+ }
+
+ // Group the third flower parts
+ var flower3 = new THREE.Group();
+ flower3.add(stem3);
+ flower3.add(center3);
+ petals3.forEach(petal3 => flower3.add(petal3));
+
+ // Adjust the position of the third flower
+ flower3.position.set(-1, 0, 0);
+
+ // Add the third flower to the scene
+ window.scene.add(flower3);
+
+ // la tige de la quatrième fleur sortant du vase et courbée vers la gauche
+ var curve4 = new THREE.CatmullRomCurve3([
+ new THREE.Vector3(5, 5.25, 1),
+ new THREE.Vector3(4.5, 7, 1),
+ new THREE.Vector3(4, 9, 1.5),
+ new THREE.Vector3(3.5, 11, 2),
+ new THREE.Vector3(3, 13, 2.5),
+ new THREE.Vector3(2.5, 15, 3)
+ ]);
+
+ var stemGeometry4 = new THREE.TubeGeometry(curve4, 64, 0.1, 8, false);
+ var stemMaterial4 = new THREE.MeshPhongMaterial({ color: 0x228B22 });
+ var stem4 = new THREE.Mesh(stemGeometry4, stemMaterial4);
+
+ // centre de la quatrième fleur
+ var centerGeometry4 = new THREE.SphereGeometry(0.2, 32, 32);
+ var centerMaterial4 = new THREE.MeshPhongMaterial({ color: 0xFF0000 });
+ var center4 = new THREE.Mesh(centerGeometry4, centerMaterial4);
+ center4.position.set(2.5, 15, 3);
+ center4.castShadow = true;
+
+ // Create the flower petals for the fourth flower
+ var petalTexture4 = new THREE.TextureLoader().load('textures/texture_flower.png'); // Load your petal texture
+ var petalGeometry4 = new THREE.PlaneGeometry(1, 2);
+ var petalMaterial4 = new THREE.MeshPhongMaterial({ map: petalTexture4, side: THREE.DoubleSide, transparent: true });
+
+ var petals4 = [];
+ for (let i = 0; i < 8; i++) {
+ var petal4 = new THREE.Mesh(petalGeometry4, petalMaterial4);
+ petal4.position.set(2.5, 15, 3);
+ petal4.rotation.set(0, 0, (i * Math.PI) / 4);
+ petal4.translateY(1);
+ petals4.push(petal4);
+ petals4.castShadow = true;
+ }
+
+ // Group the fourth flower parts
+ var flower4 = new THREE.Group();
+ flower4.add(stem4);
+ flower4.add(center4);
+ petals4.forEach(petal4 => flower4.add(petal4));
+
+ // Adjust the position of the fourth flower
+ flower4.position.set(0, 0, 0);
+
+ // Add the fourth flower to the scene
+ window.scene.add(flower4);
+
//Mur derrière la table
@@ -255,6 +405,7 @@ function fillScene() {
mur.position.set(0, 25, -5.5);
+
// Sol marron foncé
var solMaterial = new THREE.MeshPhongMaterial({
color: 0x4B3621,
diff --git a/MEHIAOUI/textures/texture_feuille.png b/MEHIAOUI/textures/texture_feuille.png
new file mode 100644
index 0000000000000000000000000000000000000000..c79c58e399ad9b87f0bcf357bbc7e40d3a1db58a
Binary files /dev/null and b/MEHIAOUI/textures/texture_feuille.png differ
diff --git a/MEHIAOUI/textures/texture_flower.png b/MEHIAOUI/textures/texture_flower.png
index 3ed0e3b43e2f6c054c33943970cf7698a8cb9919..79a94b92b57dca6080ac17ff89ced8714440683a 100644
Binary files a/MEHIAOUI/textures/texture_flower.png and b/MEHIAOUI/textures/texture_flower.png differ