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
but whenever i merged all the object in a single geometry and then add to a scene, it becomes like this. see the image
dont 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…