Problem in merging multiple objects into one

hello everybody, i’m new to three js and i was creating a custom shape using multiple objects. But the problem i’m facing is that when i add all the objects to the scene its working fine.
see the image
image
but whenever i merged all the object in a single geometry and then add to a scene, it becomes like this. see the image
image

dont know why it is getting darker but the bottom and back part seems to be fine.
image

The code i’ve used is shown below

            var loader = new THREE.TextureLoader();
			 if(globalTextureImage != null)
			{
				var texture = loader.load( globalTextureImage );
			}
			else
			{						
				var texture = loader.load( 'my_texture/1.jpg' );
			}  

			var topGeometry = new THREE.CubeGeometry( 175, 0, 40, 0, 0, 0 );
			var top = new THREE.Mesh( topGeometry, new THREE.MeshBasicMaterial({map:texture}) );
			top.position.x = -0.01;
			top.position.y = 0.99;
			top.position.z = -0.003;
			top.scale.x = 0.0198;
			top.scale.y = -0.008;
			top.scale.z = 0.0355;
			top.updateMatrix();


			var bottomGeometry = new THREE.CubeGeometry( 175, 0, 40, 1, 1, 1);
			var bottom = new THREE.Mesh( bottomGeometry, new THREE.MeshBasicMaterial({map:texture}) );
			bottom.position.x = -0.01;
			bottom.position.y = -0.01;
			bottom.position.z = -0.003;
			bottom.scale.x = 0.0198;
			bottom.scale.y = -0.008;
			bottom.scale.z = 0.0355;
			bottom.updateMatrix();



			var leftGeometry = new THREE.CubeGeometry( 1, 100, 40, 1, 1, 1 );
			var left = new THREE.Mesh( leftGeometry, new THREE.MeshBasicMaterial({map:texture}) );
			left.position.x = -1.74;
			left.position.y = 0.49;
			left.position.z = -0.003;
			left.scale.x = 0.01;
			left.scale.y = -0.01;
			left.scale.z = 0.035;
			left.updateMatrix();

			var rightGeometry = new THREE.CubeGeometry( 0, 100, 40, 1, 1, 1 );
			var right = new THREE.Mesh( rightGeometry, new THREE.MeshBasicMaterial({map:texture}) );
			right.position.x = 1.719;
			right.position.y = 0.49;
			right.position.z = -0.003;
			right.scale.x = 0.01;
			right.scale.y = -0.01;
			right.scale.z = 0.035;
			right.updateMatrix();


			var middleGeometry = new THREE.CubeGeometry( 346, 100, 0, 1, 1, 1 );
			var middle = new THREE.Mesh( middleGeometry, new THREE.MeshBasicMaterial({map:texture}) );
			middle.position.x = -0.01;
			middle.position.y = 0.49;
			middle.position.z = 0.69;
			middle.scale.x = 0.01;
			middle.scale.y = -0.01;
			middle.scale.z = 0.035;
			middle.updateMatrix();



			var backGeometry = new THREE.CubeGeometry( 345, 100, 0, 1, 1, 1 );
			var back = new THREE.Mesh( backGeometry, new THREE.MeshBasicMaterial({map:texture}) );
			back.position.x = -0.02;
			back.position.y = 0.49;
			back.position.z = -0.69;
			back.scale.x = 0.01;
			back.scale.y = -0.01;
			back.scale.z = 0.035;
			back.updateMatrix();


			var geometry = new THREE.CylinderGeometry( 1, 1, 20, 32 );
			var material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
			var cylinder = new THREE.Mesh( geometry, material );
			cylinder.scale.set(0.02,0.02, 0.02);
			cylinder.position.x = -0;
			cylinder.position.y = 0.45;
			cylinder.position.z = 0.82;

			cylinder.rotation.x = 1.86;
			cylinder.rotation.y = 3.14;
			cylinder.rotation.z = 1.56;

			cylinder.updateMatrix();





			var geometry = new THREE.CylinderGeometry( 1, 1, 8, 32 );
			var material = new THREE.MeshBasicMaterial( {color: 0xffffff} ); 
			var cylinderleft = new THREE.Mesh( geometry, material );
			cylinderleft.scale.set(0.02,0.02, 0.02);
			cylinderleft.position.x = -0.18;
			cylinderleft.position.y = 0.45;
			cylinderleft.position.z = 0.74;
			cylinderleft.rotation.x = 1.6;
			cylinderleft.updateMatrix();



			var geometry = new THREE.CylinderGeometry( 1, 1, 8, 32 );
			var material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
			var cylinderRight = new THREE.Mesh( geometry, material );
			cylinderRight.scale.set(0.02,0.02, 0.02);
			cylinderRight.position.x = 0.18;
			cylinderRight.position.y = 0.45;
			cylinderRight.position.z = 0.74;
			cylinderRight.rotation.x = 1.6;
			cylinderRight.updateMatrix();




			// scene.add( cylinder );
			// scene.add( cylinderleft );
			// scene.add( cylinderRight );
			// scene.add(top);
			// scene.add(bottom);
			// scene.add(left);
			// scene.add(right);
			// scene.add(middle);
			// scene.add(back);

			var singleGeometry = new THREE.Geometry();
			singleGeometry.merge(top.geometry, top.matrix);
			singleGeometry.merge(bottom.geometry, bottom.matrix);
			singleGeometry.merge(left.geometry, left.matrix);
			singleGeometry.merge(right.geometry, right.matrix);
			singleGeometry.merge(middle.geometry, middle.matrix);
			singleGeometry.merge(back.geometry, back.matrix);

			singleGeometry.merge(cylinder.geometry, cylinder.matrix);
			singleGeometry.merge(cylinderleft.geometry, cylinderleft.matrix);
			singleGeometry.merge(cylinderRight.geometry, cylinderRight.matrix);
			

			var material = new THREE.MeshLambertMaterial({map:texture});
		    var mesh = new THREE.Mesh(singleGeometry, material);

		    mesh.scale.set(0.5,0.5,0.5);
		    objects.push(mesh);
		    scene.add(mesh);

any help would be really appreciated…

Just out of curiousity, what revision of the framework do you use?
THREE.CubeGeometry() was renamed to THREE.BoxGeometry() years ago.

@prisoner849 i’m using ‘THREE.WebGLRenderer 93’ from the console

What do you expect, using this type of material?
Before merging all the geometries of meshes, each mesh has THREE.MeshBasicMaterial(). This type of material is not affected by light, that’s why you have the same bright texture all over the drawer.

but if i change it to MeshLambertMaterial, then also the same problem occurs…

what i want is that when i add the object and add it to scene, the drawer shows in the original color like the first image.

but when i merge it to a single object and then add it to scene, the drawer turns dark brown. like the light is off or have moved down as the downside of the drawer and backside is having the true color. see the second image for reference…

Do you see/know the difference between THREE.MeshBasicMaterial() and THREE.MeshLambertMaterial() and how they affected by light? If you don’t, then have a look at this and this.

All the meshes before merging have THREE.MeshBasicMaterial().
After merging you apply THREE.MeshLambertMaterial() to the mesh with the merged geometry.

@prisoner849, I know that MeshBasicMaterial is not affected by light… i’ve changed all the MeshBasicMaterial to MeshLambertMaterial but still the same issue.

In my project i already had a spotlight and before merging into a single object, the lighting is working fine. but after it is merged, it gets darkened. but if we rotate the object, then in the bottom and back of the drawer, light seems to be proper…

I’m curious, why do you apply THREE.MeshLambertMaterial() instead of THREE.MeshBasicMaterial(), if you want to see the same result like without merging?

1 Like

@prisoner849, oh i’m sorry, i used MeshLambertMaterial during merging… i’ve missed that code. i’m extremely sorry for wasting your time…
Thanks for the help. It is working now. sorry for the trouble…

Finally :slight_smile:
You’re welcome :beers:

@prisoner849, i really wanna appreciate you for your time. thank you buddy…

You might like importing models from Blender. Well its another way to get more complex models with texture maps etc. but it’s much more advanced I suppose.