diff --git a/MEHIAOUI/projet.js b/MEHIAOUI/projet.js
index b2d6fd337ff54420df0c6cf565966fc8a22b4b92..1e96966382184b951dccaf34759e52e44321dfc9 100644
--- a/MEHIAOUI/projet.js
+++ b/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');
diff --git a/MEHIAOUI/textures/bowl_texture.jpg b/MEHIAOUI/textures/bowl_texture.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7edff952ab5c8f447ab545425b775aef9a918e60
Binary files /dev/null and b/MEHIAOUI/textures/bowl_texture.jpg differ
diff --git a/MEHIAOUI/textures/texture_pomme_rouge.jpg b/MEHIAOUI/textures/texture_pomme_rouge.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a73650397415d3c2bee1ac5012bc5eff4ad21ad8
Binary files /dev/null and b/MEHIAOUI/textures/texture_pomme_rouge.jpg differ
diff --git a/MEHIAOUI/textures/texture_vase.jpg b/MEHIAOUI/textures/texture_vase.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..581a9db7e0b6bc47c06729fa4b41af26a235b61c
Binary files /dev/null and b/MEHIAOUI/textures/texture_vase.jpg differ
diff --git a/MEHIAOUI/textures/texture_wall1.jpg b/MEHIAOUI/textures/texture_wall1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..521e506246a79738934595719a9a00fb6a230962
Binary files /dev/null and b/MEHIAOUI/textures/texture_wall1.jpg differ