ajout d'un vase , d'un papier peint pour le mur, d'une spotlight et d'un peu de brouillard

MEHIAOUI/projet.js

@@ -18,33 +18,66 @@ var cameraControls;
 
 var clock = new THREE.Clock();
 
+var lathe;
+var torus1, torus2, cylinder;
+
 function fillScene() {
-    window.scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
+    window.scene.fog = new THREE.Fog( 0x808080, 50, 200 );
 
     // LIGHTS
     var ambientLight = new THREE.AmbientLight( 0x222222 );
-    var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
-    light.position.set( 200, 400, 500 );
+    var light = new THREE.DirectionalLight( 0xFFFFFF, 0);
+    light.position.set(200, 400, 500 );
 
-    var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
+    var light2 = new THREE.DirectionalLight( 0xFFFFFF, 0 );
     light2.position.set( -500, 250, -200 );
 
     window.scene.add(ambientLight);
     window.scene.add(light);
     window.scene.add(light2);
 
+    // SpotLight pour éclairer la table, le bol et le vase
+    var spotLight = new THREE.SpotLight(0xFFFFFF, 8000);
+    spotLight.position.set(0, 50, 50);
+    spotLight.angle = Math.PI / 6;
+    spotLight.penumbra = 0.5;
+    spotLight.decay = 2;
+    spotLight.distance = 200;
+    spotLight.castShadow = true;
+    spotLight.shadow.mapSize.width = 1024;
+    spotLight.shadow.mapSize.height = 1024;
+    spotLight.shadow.camera.near = 10;
+    spotLight.shadow.camera.far = 200;
+    spotLight.shadow.camera.fov = 30;
+    spotLight.lookAt(new THREE.Vector3(0, 25, -5.5)); // Orienter le projecteur vers la table, le bol et le vase
+    window.scene.add(spotLight);
+
     //Chargement textures
     var texture_bowl = new THREE.TextureLoader().load('textures/bowl_texture.jpg');
+    var texture_wall = new THREE.TextureLoader().load('textures/texture_wall1.jpg');
+    var texture_vase = new THREE.TextureLoader().load('textures/texture_vase.jpg');
+    texture_vase.wrapS = THREE.MirroredRepeatWrapping;
+	texture_vase.wrapT = THREE.MirroredRepeatWrapping;
+	texture_vase.repeat.set(2, 2.6);
 
     // table
-    var table = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 1, 32), new THREE.MeshPhongMaterial({color: 0xE3963E}));
-    table.position.set(-10, 0, 5); 
+
+    var tableMaterial = new THREE.MeshPhongMaterial({
+        color: 0x8B4513,
+        shininess: 100,
+        specular: 0x555555,
+        transparent: true,
+        opacity: 0.9
+    });
+
+    var table = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 1, 32), tableMaterial);
+    table.position.set(0, 0, 5); 
 
     // bol de fruits
     var bolGeometry = new THREE.SphereGeometry(5, 32, 32, 0, Math.PI * 2, 0, Math.PI / 2);
     var bolMaterial = new THREE.MeshPhongMaterial({side: THREE.DoubleSide, map: texture_bowl });
     var bol = new THREE.Mesh(bolGeometry, bolMaterial);
-    bol.position.set(-15, 5, 5);
+    bol.position.set(-5, 5, 5);
     bol.rotation.x = Math.PI;
 
     //fonction pour creer une pomme
@@ -58,69 +91,114 @@ function fillScene() {
         window.scene.add(apple);
     }
     //Remplir le bol de pommes à des positions différentes
-    createApple(-15, 2, 5, 0xFF0000);
-    createApple(-14, 4, 7, 0x00FF00);
-    createApple(-17, 3, 6, 0xFFFF00);
-    createApple(-16, 5, 5, 0xFF0000);
-    createApple(-17, 3, 3, 0x00FF00);
-    createApple(-13, 3, 3, 0xFFFF00);
-    createApple(-14, 5, 3, 0xFF0000);
-    
-    
+    createApple(-5, 2, 5, 0xFF0000);
+    createApple(-4, 4, 7, 0x00FF00);
+    createApple(-7, 3, 6, 0xFFFF00);
+    createApple(-6, 5, 5, 0xFF0000);
+    createApple(-7, 3, 3, 0x00FF00);
+    createApple(-3, 3, 3, 0xFFFF00);
+    createApple(-4, 5, 3, 0xFF0000);
     
-    // Créer un vase de fleurs à côté du bol sur l'autre côté de la table
-    var vase = new THREE.Group();
+    // vase : exemple trouvé sur Internet
 
-    //Materiaux transparant rouge pour le vase
-    var glassMaterial = new THREE.MeshPhongMaterial({
-        color: 0xFF0000,
-        transparent: true,
-        opacity: 0.6,
-        shininess: 100,
-        side: THREE.DoubleSide
-    });
+    // Points of curve
+    var points = [];
+    points.push( new THREE.Vector2( 7.75, -15.88) );
+    points.push( new THREE.Vector2( 7.8, -13.95 ) );
+    points.push( new THREE.Vector2( 8.3, -12.02) );
+    points.push( new THREE.Vector2( 8.97, -10.01 ) );
+    points.push( new THREE.Vector2( 9.7, -8.01 ) );
+    points.push( new THREE.Vector2( 10.55, -5.94 ) );
+    points.push( new THREE.Vector2( 11.45, -3.99 ) );
+    points.push( new THREE.Vector2( 12.3, -1.9 ) );
+    points.push( new THREE.Vector2( 13.09, 0.83 ) );
+    points.push( new THREE.Vector2( 13.36, 3.21 ) );
+    points.push( new THREE.Vector2( 13.21, 6.01 ) );
+    points.push( new THREE.Vector2( 12.63, 8.04) );
+    points.push( new THREE.Vector2( 11.73, 9.93 ) );
+    points.push( new THREE.Vector2( 10.43, 11.46 ) );
+    points.push( new THREE.Vector2( 9.25, 12.41) );
+    points.push( new THREE.Vector2( 7.91, 13.35) );
+    points.push( new THREE.Vector2( 7, 14.28) );
+    points.push( new THREE.Vector2( 6.53, 15.86) );
 
-    //corps du vase : rectangle
-    var corpsGeometry = new THREE.BoxGeometry(3, 13, 3);
-    var corps = new THREE.Mesh(corpsGeometry, glassMaterial);
-    corps.position.set(-9, 1, -1);
-    vase.add(corps);
+    // Add objects
+    var geometry = new THREE.LatheGeometry(points, 30, 0, 2 * Math.PI);
+    var outer_material = new THREE.MeshPhongMaterial({ map: texture_vase, side: THREE.FrontSide, specular: 0x121212, shininess: 26 });
+    var inner_material = new THREE.MeshPhongMaterial({ color: "black", side: THREE.BackSide });
+    var materials = [inner_material, outer_material];
 
-    // Partie supérieure du vase : trapèze
-    var hautGeometry = new THREE.CylinderGeometry(2, 3.2, 3, 4);
-    var haut = new THREE.Mesh(hautGeometry, glassMaterial);
-    haut.position.set(-9, 9, -1);
-    vase.add(haut);
+    // Create multi-material object
+    var lathe = new THREE.Group();
+    var outerMesh = new THREE.Mesh(geometry, outer_material);
+    var innerMesh = new THREE.Mesh(geometry, inner_material);
+    lathe.castShadow = true;
+    lathe.add(outerMesh);
+    lathe.add(innerMesh);
 
-    // retourner le trapeze pour sa base soit en bas
-    haut.rotation.x = Math.PI;
-    haut.rotation.y = Math.PI / 4;
+    var geometry2 = new THREE.TorusGeometry(7, 0.45, 30, 100);
+    var material2 = new THREE.MeshPhongMaterial({ color: "black" });
+    var torus1 = new THREE.Mesh(geometry2, material2);
+    torus1.position.y = 15.8;
+    torus1.rotation.x += 1.57;
+    torus1.castShadow = true;
 
-    
+    var geometry3 = new THREE.TorusGeometry( 8, 0.3, 30, 100 );
+    var material3 = new THREE.MeshPhongMaterial( { color: "black" } );
+    torus2 = new THREE.Mesh( geometry3, material3 );
+    torus2.position.y = -15.7;
+    torus2.rotation.x += 1.57;
+    torus2.castShadow = true;
+
+    var geometry4 = new THREE.CylinderGeometry( 8, 8, 0.8, 32 );
+    var material4 = new THREE.MeshPhongMaterial( {color: "black" } );
+    cylinder = new THREE.Mesh( geometry4, material4 );
+    cylinder.position.y = -15.7;
+    cylinder.castShadow = true;
 
+    lathe.add(torus1)
+    lathe.add(torus2);
+    lathe.add(cylinder);
+    
+    // Redimensionner le vase pour qu'il tienne sur la table
+    lathe.scale.set(0.3, 0.3, 0.3);
+    lathe.position.set(5, 5.25, 1);
     
 
-    // mur derrière la table
-    var mur = new THREE.Mesh(new THREE.BoxGeometry(50, 50, 1), new THREE.MeshPhongMaterial({color: 0x8B413}));
-    mur.position.set(0, 25, -5.5); 
+    //Mur derrière la table
+
+    var mur = new THREE.Mesh(new THREE.BoxGeometry(50, 50, 1), new THREE.MeshPhongMaterial({side: THREE.DoubleSide, map: texture_wall }));
+    mur.receiveShadow = true;
+    mur.position.set(0, 25, -5.5);
+
+
+    // Sol marron foncé
+    var solMaterial = new THREE.MeshPhongMaterial({
+        color: 0x4B3621,
+        shininess: 50,
+        specular: 0x333333
+    });
+
+    var sol = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), solMaterial);
+    sol.rotation.x = -Math.PI / 2;
+    sol.position.y = 0;
 
     // ajout des objets à la scène
-    //window.scene.add(tige);
     //window.scene.add(apple);
     window.scene.add(table);
     window.scene.add(mur);
     window.scene.add(bol);
-    window.scene.add(vase);
+    window.scene.add(lathe);
+    window.scene.add(sol);
     
 
     Coordinates.drawGround({size:10000}); // width and height of ground plane
-    //Coordinates.drawGrid({size:10000,scale:0.01});
-    //Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
+
+    const cameraHelper = new THREE.CameraHelper(light.shadow.camera);
+    window.scene.add(cameraHelper);
 }
 
 function init() {
-	//var canvasWidth = 846;
-	//var canvasHeight = 494;
 	// For grading the window is fixed in size; here's general code:
 	var canvasWidth = window.innerWidth;
 	var canvasHeight = window.innerHeight;
@@ -133,17 +211,21 @@ function init() {
 	renderer.gammaOutput = true;
 	renderer.setSize(canvasWidth, canvasHeight);
 	renderer.setClearColor( 0xAAAAAA, 1.0 );
+    renderer.shadowMap.enabled = true; 
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
 
 	// CAMERA
 	camera = new THREE.PerspectiveCamera( 35, canvasRatio, 2, 8000 );
-	camera.position.set(0, 5, 50 );
-    camera.lookAt(new THREE.Vector3(0,5,50));
+	camera.position.set(0, 10, 30 );
+    camera.lookAt(new THREE.Vector3(0,5,0));
 	// CONTROLS
 	cameraControls = new OrbitControls(camera, renderer.domElement);
 	cameraControls.target.set(0,5,0);
 
 }
 
+
+
 function addToDOM() {
 	var container = document.getElementById('webGL');
 	var canvas = container.getElementsByTagName('canvas');