Three js: Merge multiple objects into one

Question

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.

but whenever i merged all the object in a single geometry and then add to a scene, it becomes like this. see the image

don't know why it is getting darker but the bottom and back part seems to be fine.

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

Answer 1

When you draw the object separately, the you create a THREE.Mesh for each object, each with a THREE.MeshBasicMaterial. The behaviour of a THREE.MeshBasicMaterial that the object appears with the brightness on each side, independent on the light of the scene.

But when you merge the object the you use a THREE.MeshLambertMaterial for the THREE.Geometry. This causes that the brightness of the object depends on the light of the scene. The parts of the object which face the light appear bright. Areas away from the light are dark.

If you would use THREE.MeshBasicMaterial for the merged geometry too, then the appearance would be the same as when you draw all the objects separately.