Merging multiple object changes the texture of the final object

Questions
,
1

hello everybody, I was trying to create object by merging multiple object, but the final object is not same as the single object.

see the image.
image
This appears when i manually add all the object in the scene. The handles are white in color. but when i try to merge into a single object. the result changes. the handles also take the texture and this i what i don’t want
image

the merged code and is shown below.

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

			var geometry = new THREE.CylinderGeometry( 1, 1, 8, 32 );
			var material = new THREE.MeshPhongMaterial( {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();

//this is where the merging is done

           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(middle1.geometry, middle1.matrix);
			singleGeometry.merge(middle2.geometry, middle2.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);
			singleGeometry.merge(cylinder1.geometry, cylinder1.matrix);
			singleGeometry.merge(cylinderleft1.geometry, cylinderleft1.matrix);
			singleGeometry.merge(cylinderRight1.geometry, cylinderRight1.matrix);

			var material = new THREE.MeshPhongMaterial({map:texture}); // if i remove the texture, the object is showing white. i thing some thing have to be done here which is overriding all the texture
		    var mesh = new THREE.Mesh(singleGeometry,  material);

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

any help will be really appreciated

2

Have you tried passing an array of materials into your final Mesh call?

let materialArray = [
    new THREE.MeshBasicMaterial({color: 0xFF0000}),
    new THREE.MeshBasicMaterial({color: 0x00FF00}),
    new THREE.MeshBasicMaterial({color: 0x0000FF}),
    ...
];

var mesh = new THREE.Mesh(singleGeometry, materialArray);

You would also need to add an extra parameter where you merge each geometry, which would be that geometry’s material index (in the materialArray).

singleGeometry.merge(top.geometry, top.matrix, 0);
singleGeometry.merge(bottom.geometry, bottom.matrix, 1);
singleGeometry.merge(left.geometry, left.matrix, 2);

See here for documentation - https://threejs.org/docs/index.html#api/en/core/Geometry.merge

3

@danlong, thank you for your reply. I did what you said but still it is not working. see the code below for more info

let materialArray = [
new THREE.MeshPhongMaterial({map:texture}),
new THREE.MeshPhongMaterial({map:texture}),
new THREE.MeshPhongMaterial({map:texture}),
new THREE.MeshPhongMaterial({map:texture}),
new THREE.MeshPhongMaterial({map:texture}),
new THREE.MeshPhongMaterial({map:texture}),
new THREE.MeshPhongMaterial({map:texture}),
new THREE.MeshPhongMaterial({color:0xffffff}),
new THREE.MeshPhongMaterial({color:0xffffff}),
new THREE.MeshPhongMaterial({color:0xffffff}),
new THREE.MeshPhongMaterial({color:0xffffff}),
new THREE.MeshPhongMaterial({color:0xffffff}),
new THREE.MeshPhongMaterial({color:0xffffff})
];

var singleGeometry = new THREE.Geometry();
singleGeometry.merge(top.geometry, top.matrix,0);
singleGeometry.merge(bottom.geometry, bottom.matrix,1);
singleGeometry.merge(left.geometry, left.matrix,2);
singleGeometry.merge(right.geometry, right.matrix,3);
singleGeometry.merge(middle1.geometry, middle1.matrix,4);
singleGeometry.merge(middle2.geometry, middle2.matrix,5);
singleGeometry.merge(back.geometry, back.matrix,6);
singleGeometry.merge(cylinder.geometry, cylinder.matrix,7);
singleGeometry.merge(cylinderleft.geometry, cylinderleft.matrix,8);
singleGeometry.merge(cylinderRight.geometry, cylinderRight.matrix,9);
singleGeometry.merge(cylinder1.geometry, cylinder1.matrix,10);
singleGeometry.merge(cylinderleft1.geometry, cylinderleft1.matrix,11);
singleGeometry.merge(cylinderRight1.geometry, cylinderRight1.matrix,12);			

var mesh = new THREE.Mesh(singleGeometry,  materialArray);
4

Oh, what does your final mesh look like after that merge?

5

same as this… no change
image

6

Are you able to make a code demo with just that logic separated?

See my merged demo, with different materials - https://codepen.io/danlong/pen/dQxbqv

7

What happend to this? What is the new way to merge multiple meshes into one now?

THREE.Geometry() was removed? What can I use to create custom Geometry? (these examples work neither: Three.js Custom Geometry)

8

I mean, there was like a warning thread pinned for like 6 months before the Geometry was finally removed (it’s still in the library, just moved to examples/deprecated.)

You can use BufferGeometryUtils to port quite a bit of functionality from the original Geometry to BufferGeometry.

1 Like
9

I have a variant for beginners there. * discourse.threejs.hofk.de
See BeginnerExample
// … step 02: buildt custom geometries … :slightly_smiling_face:

2 Likes
10

wow I discovered yesterday your work and was amazed! and now you answer on my question :smiley:
(I even just linked your work to a question, before I saw that you answered me here Create custom Fish Geometry) I will try to understand what you created there! thx