I am new to the world of three.js and recently I tried my hand at creating a custom shape using multiple objects. However, I encountered an issue where everything seemed fine when I added each object individually to the scene.
https://i.sstatic.net/MWLYS.png
Strangely, when I attempted to merge all the objects into a single geometry and then add them to the scene, the result was rather unexpected. You can see the outcome in the image below:
https://i.sstatic.net/BenIe.png
I'm puzzled as to why the merged geometry appears darker, especially considering that the bottom and back parts seem perfectly normal.
https://i.sstatic.net/MEfMe.png
Below is the code snippet that I used:
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();
// Similar setup for other geometries...
// Merging all the individual object geometries
var singleGeometry = new THREE.Geometry();
singleGeometry.merge(top.geometry, top.matrix);
singleGeometry.merge(bottom.geometry, bottom.matrix);
singleGeometry.merge(left.geometry, left.matrix);
// Adding more merges...
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);
Your assistance on this matter would be greatly appreciated. Thank you!