Replace tableau.js

chiari/tableau.js

@@ -9,7 +9,10 @@ var gridX = false;
 var gridY = false;
 var gridZ = false;
 var axes = false;
-var ground = true;
+var textureCube;
+
+var a, direction, position;
+
 
 
 function init() {
@@ -35,6 +38,7 @@ function init() {
 	camera.position.set( -125, 70, 150);
 	cameraControls.target.set(0,0,0);
 
+
 	fillScene();
 }
 
@@ -43,22 +47,18 @@ function creerAssiette(){
 	var assiette = new THREE.Object3D();
 
 	//
-	var cylinderMaterial = new THREE.MeshPhongMaterial( { color: 0xBBBBBB} );
+	var cylinderMaterial = new THREE.MeshPhongMaterial( { color: 0xBBBBBB, shininess: 100 } );
 	var cylinder = new THREE.Mesh(
-		new THREE.CylinderGeometry( 40, 40, 4,20), cylinderMaterial );
-	cylinder.position.x = 0;	
-	cylinder.position.y = 20 + 4/2;	
-	cylinder.position.z = 0;	
+		new THREE.CylinderGeometry( 40, 40, 4,20), cylinderMaterial );	
+	cylinder.position.y = 20 + 4/2;		
 
 	assiette.add( cylinder ); 
 
 	//
 	cylinderMaterial.side = THREE.DoubleSide;
 	var cylinder = new THREE.Mesh(
-		new THREE.CylinderGeometry( 72, 40, 16, 20, 4, true ), cylinderMaterial );
-	cylinder.position.x = 0;	
+		new THREE.CylinderGeometry( 72, 40, 16, 20, 4, true ), cylinderMaterial );	
 	cylinder.position.y = 20+4 +16/2;	
-	cylinder.position.z = 0;	
 
 	assiette.add( cylinder ); 
 
@@ -77,8 +77,12 @@ function creerPeche(){
 
 	var peche = new THREE.Object3D();
 
+	var normal = new THREE.TextureLoader().load('normal_peach.jpg');
+	var myTexture = new THREE.TextureLoader().load('peach5.png');
+	var sphereMaterial = new THREE.MeshPhongMaterial( { map:myTexture, normalMap:normal } );
+		
+	
 	//
-	var sphereMaterial = new THREE.MeshPhongMaterial( { color: 0xFF7E20 } );
 	var sphere = new THREE.Mesh(
 		new THREE.SphereGeometry( 20, 32, 16 ), sphereMaterial );
 	sphere.scale.x = 0.7;
@@ -124,10 +128,11 @@ function creerPeche(){
 
 
 function creerGrain(x, y, z){
-	var sphereMaterial = new THREE.MeshPhongMaterial( { color: 0x224422} );
+	
+	var sphereMaterial = new THREE.MeshPhongMaterial( { color: 0xAAAA11, transparent: true, opacity: 0.9} );
 	
     var sphere = new THREE.Mesh(
-		new THREE.SphereGeometry( 5, 32, 16 ), sphereMaterial );
+		new THREE.SphereGeometry( 5, 16, 16 ), sphereMaterial );
     sphere.position.x = x;	
 	sphere.position.y = y;	
 	sphere.position.z = z;	
@@ -270,21 +275,61 @@ function creerRaisin(){
 
 function creerTable(){
 	
-	var cubeMaterial = new THREE.MeshPhongMaterial( { color: 0x0D0301 } );
+	var table= new THREE.Object3D();
+
+	var myTexture = new THREE.TextureLoader().load('wood4.png');
+	var tableMaterial = new THREE.MeshPhongMaterial( { color: 0x0D0301, map:myTexture } );
+	
+	// plateau
+	var plateau = new THREE.Mesh(
+		new THREE.BoxGeometry( 720, 20, 400 ), tableMaterial );
+	table.add( plateau ); 
+
+	// pied 1
 	var cube = new THREE.Mesh(
-		new THREE.BoxGeometry( 450, 20, 250 ), cubeMaterial );
-	cube.position.x = 150;	
-	cube.position.y = 10;	
-	cube.position.z = -50;	
+		new THREE.BoxGeometry( 20, 200, 20 ), tableMaterial );
+	cube.position.x = 720/2 - 30;	
+	cube.position.y = -200/2 - 20/2;	
+	cube.position.z = 400/2 - 30;	
+	table.add( cube ); 
+
+	// pied 2
+	var cube2 = new THREE.Mesh(
+		new THREE.BoxGeometry( 20, 200, 20 ), tableMaterial );
+	cube2.position.x = 720/2 - 30;	
+	cube2.position.y = -200/2 - 20/2;	
+	cube2.position.z = -400/2 + 30;	
+	table.add( cube2 ); 
+
+	// pied 3
+	var cube3 = new THREE.Mesh(
+		new THREE.BoxGeometry( 20, 200, 20 ), tableMaterial );
+	cube3.position.x = -720/2 + 30;	
+	cube3.position.y = -200/2 - 20/2;	
+	cube3.position.z = 400/2 - 30;	
+	table.add( cube3 ); 
+
+	// pied 4
+	var cube4 = new THREE.Mesh(
+		new THREE.BoxGeometry( 20, 200, 20 ), tableMaterial );
+	cube4.position.x = -720/2 + 30;	
+	cube4.position.y = -200/2 - 20/2;	
+	cube4.position.z = -400/2 + 30;	
+	table.add( cube4 ); 
+
+	
+	table.position.x = 720/2 - 75;	
+	table.position.y = 10;	
+	table.position.z = -400/2 + 75;	
 
-	cube.traverse( function ( object ) {
+	table.traverse( function ( object ) {
 		if ( object instanceof THREE.Mesh ) {
 			object.castShadow = true;
 			object.receiveShadow = true;
 		}
 	} );
 
-	scene.add( cube );     
+	scene.add( table );     
 
 }
 
@@ -324,7 +369,7 @@ function creerCouteau(){
 	couteau.add( cylinder );
 	
 	// lame
-	var lameMaterial = new THREE.MeshPhongMaterial( { color: 0x333333, side: THREE.DoubleSide} );
+	var lameMaterial = new THREE.MeshPhongMaterial( { color: 0x333333, side: THREE.DoubleSide, specular:0xFFFFFF, envMap:textureCube} );
 	var plane = new THREE.Mesh(
 		new THREE.PlaneGeometry( 35, 6, 20), lameMaterial );
 	plane.position.x = 40/2 + 4 + 35/2;
@@ -354,6 +399,78 @@ function creerCouteau(){
 	scene.add( couteau );
 }
 
+function creerTeapot(){
+
+	var teapotMaterial = new THREE.MeshPhongMaterial(
+		{ color: 0x666666, specular:0xFFFFFF, envMap:textureCube, reflectivity:1} );
+	
+	var teapot = new THREE.Mesh(
+		new TeapotGeometry( 50, 8, true, true, true, true, true ),
+		teapotMaterial );
+	teapot.position.x = 300;
+	teapot.position.y = 20 + 48;
+	teapot.position.z = -200;
+	teapot.rotation.y = -135 *Math.PI/180;
+
+	teapot.traverse( function ( object ) {
+		if ( object instanceof THREE.Mesh ) {
+			object.castShadow = true;
+			object.receiveShadow = true;
+		}
+	} );
+
+	a = new THREE.Object3D();
+	a.animated = teapot;
+	a.add(teapot);
+	direction = 1;
+	position = 1;
+
+	scene.add( teapot );
+}
+
+function creerVerre(){
+
+	var verre = new THREE.Object3D();
+
+	//
+	var cylinderMaterial = new THREE.MeshPhongMaterial(
+		{ color: 0xFFFFFF,specular: 0xFFFFFF, shininess: 100, transparent: true, opacity: 0.2} );
+	var cylinder = new THREE.Mesh(
+		new THREE.CylinderGeometry( 15, 15, 4, 20), cylinderMaterial );	
+	cylinder.position.y = 20 + 4/2;		
+	verre.add( cylinder );
+
+	//
+	cylinderMaterial.side = THREE.DoubleSide;
+	var cylinder2 = new THREE.Mesh(
+		new THREE.CylinderGeometry( 15, 15, 30, 20, 4, true ), cylinderMaterial );	
+	cylinder2.position.y = 20 + 4 + 30/2;		
+	verre.add( cylinder2 );
+	
+	// eau
+	var eauMaterial = new THREE.MeshPhongMaterial(
+		{ color: 0x00FFFF, transparent: true, opacity: 0.3} );
+	var eau = new THREE.Mesh(
+		new THREE.CylinderGeometry( 15, 15, 15, 20), eauMaterial );	
+	eau.scale.set(0.9, 1, 0.9);
+	eau.position.y = 20 + 4 + 15/2;	
+	verre.add( eau );
+	
+
+	verre.position.x = 210;
+	verre.position.z = -110;
+
+	verre.traverse( function ( object ) {
+		if ( object instanceof THREE.Mesh ) {
+			object.castShadow = true;
+			object.receiveShadow = true;
+		}
+	} );
+
+	scene.add( verre );
+}
+
+
 
 
 function fillScene() {
@@ -366,11 +483,12 @@ function fillScene() {
 	var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
 	light.position.set( 200, 400, 500 );
 
-	var spotlight = new THREE.SpotLight( 0xFFFFFF, 1.0 );
-	spotlight.position.set( -200, 200, 0);
-	spotlight.angle = 20 * Math.PI / 180;
+	var spotlight = new THREE.SpotLight( 0xFFFFFF, 0.5 );
+	spotlight.position.set( -300, 300, 100);
+	spotlight.penumbra = 1;
+	spotlight.angle = 40 * Math.PI / 180;
 	spotlight.exponent = 1;
-	spotlight.target.position.set( 0, 0, 0 );
+	spotlight.target.position.set( 720/2, 0, -400/2 );
 	
 	scene.add(ambientLight);
 	scene.add(light);
@@ -384,9 +502,17 @@ function fillScene() {
     spotlight.shadow.camera.far = 5000 // dimension far du Z-buffer
 
 		
-	if (ground) {
-		Coordinates.drawGround({size:1000,color:0xAAAAAA});
-	}
+
+	
+	// BACKGROUND
+	textureCube = new THREE.CubeTextureLoader()
+	.setPath('skybox/')
+	.load( ['px.png', 'nx.png',
+			'py.png', 'ny.png',
+			'pz.png', 'nz.png' ]);
+
+	scene.background = textureCube;
+		
 	if (gridX) {
 		Coordinates.drawGrid({size:1000,scale:0.01});
 	}
@@ -405,6 +531,8 @@ function fillScene() {
 	creerPeche();
 	creerRaisin()
 	creerCouteau();
+	creerTeapot();
+	creerVerre();
 }
 
 function addToDOM() {
@@ -424,16 +552,29 @@ function animate() {
 function render() {
 	var delta = clock.getDelta();
 	cameraControls.update(delta);
-	if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
+	if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ ||  effectController.newAxes !== axes)
 	{
 		gridX = effectController.newGridX;
 		gridY = effectController.newGridY;
 		gridZ = effectController.newGridZ;
-		ground = effectController.newGround;
 		axes = effectController.newAxes;
 
 		fillScene();
 	}
+
+	a.animated.rotation.z += direction * 0.3 * Math.PI / 180;
+	a.animated.position.y += position;
+	if (a.animated.rotation.z > 0 * Math.PI / 180) {
+		direction = -1;
+		position = +1;
+		a.animated.rotation.z = 2 * (0 * Math.PI / 180) - a.animated.rotation.z;
+	} else if (a.animated.rotation.z < -45 * Math.PI
+		/ 180) {
+		direction = 1;
+		position = -1;
+		a.animated.rotation.z = 2 * (-45 * Math.PI / 180) - a.animated.rotation.z;
+	}
+
 	renderer.render(scene, camera);
 }
 
@@ -446,7 +587,6 @@ function setupGui() {
 		newGridX: gridX,
 		newGridY: gridY,
 		newGridZ: gridZ,
-		newGround: ground,
 		newAxes: axes
 	};
 
@@ -454,7 +594,6 @@ function setupGui() {
 	gui.add(effectController, "newGridX").name("Show XZ grid");
 	gui.add( effectController, "newGridY" ).name("Show YZ grid");
 	gui.add( effectController, "newGridZ" ).name("Show XY grid");
-	gui.add( effectController, "newGround" ).name("Show ground");
 	gui.add( effectController, "newAxes" ).name("Show axes");
 }