Merge 2 geometries, and build a new large mesh

Questions
#1

I have 2 mesh, I want combine them into one large mesh.

but the one of them is gone, only one left to build the new mesh.

What could go wrong? Thanks a lot.

`

path.updateMatrix();
circleGeometry.merge( path.geometry, path.matrix );

if (plane) {
	scene.remove(plane);
	circleGeometry.dispose();
}
if (path) {
	scene.remove(path);
	pathGeometry.dispose();
}

plane = new THREE.Mesh( circleGeometry, new THREE.MeshPhongMaterial( { color: 0x456789, side: THREE.FrontSide } ) );
// plane.position.set( 0, 0, 2 );

scene.add( plane );

`

#2

error: THREE.DirectGeometry: Faceless geometries are not supported.

What is Faceless geometries?
2 planes can’t be merged?

#3

Can you please show how you create your geometries? It’s important to know if you work with THREE.Geometry or THREE.BufferGeometry.

#4

// create the round mesh

	var circleRadius = 8;
	var circleShape = new THREE.Shape();
	circleShape.moveTo( 0, 0 );
	circleShape.absarc( 0, 0, circleRadius, 0, Math.PI * 2, false );

	var circleGeometry = new THREE.ShapeGeometry( circleShape );

	var plane = new THREE.Mesh( circleGeometry, new THREE.MeshBasicMaterial( { visible: true , color: 0x456789 } ) );
	scene.add( plane );

// create the path mesh
//in every frame, record the position of 2 of the vertices of a moving box, and create the path mesh with these vertices

			var v1 = new THREE.Vector3( 0, 1, 0 );
			v1.applyMatrix4( cube.matrixWorld );
			var v2 = new THREE.Vector3( 0, -1, 0 );
			v2.applyMatrix4( cube.matrixWorld );

			vertices.push( [ v1, v2 ] );

			var rectShape = new THREE.Shape();
			rectShape.moveTo( vertices[0][0].x, vertices[0][0].y );

			for (var i = 1; i < vertices.length; i++) {
				rectShape.lineTo( vertices[i][0].x, vertices[i][0].y );
			}
			for (var i = vertices.length-1; i >= 0; i--) {
				rectShape.lineTo( vertices[i][1].x, vertices[i][1].y );
			}

			rectShape.lineTo( vertices[0][0].x, vertices[0][0].y );

			if (path) {
				scene.remove(path);
				pathGeometry.dispose();
			}

			pathGeometry = new THREE.ShapeGeometry( rectShape );

			path = new THREE.Mesh( pathGeometry, new THREE.MeshPhongMaterial( { color: 0x999999, side: THREE.DoubleSide, transparent: true, opacity: 0.5 } ) );

Appreciated.

#5

Um, it seems the usage of Geometry.merge() works as intended. Check out the following live demo which demonstrate the merge of two geometries: https://jsfiddle.net/mgq3p09w/

#6

Thank you.
I created 2 mesh, and merged successfully.

But the path(old code) won’t merge with other mesh. I can’t change the color of it. I can remove the path. and It disappeared. It is not a part of the combination.

merge
merge.png828×736 31.9 KB

the 2 circle and one square are merged, they share the same material.

#7

Sorry, but your last post does not clearly describe your issue. I simply don’t understand it…

Things might getting more clear if you demonstrate the issue with a live example: https://jsfiddle.net/f2Lommf5/

#8

https://jsfiddle.net/5os9xj0L/1/
mouse down and release the square will draw a path, I want the path to be merged with circle.
I’ve been struggling for days, so frustrated.
Thanks a lot.

#9

When you merge geometry, you have to notify the renderer that the (face) data have changed. You can do this by setting Geometry.elementsNeedUpdate to true. Besides, when updating the material color to orange, it’s not necessary to create a completely new material. You can just set the color property to the desired value like so: plane.material.color.set( 0xff6600 );.

You also have this error in your app:

three.js:11085 THREE.DirectGeometry: Faceless geometries are not supported.

This is because the very first shape you generate consist of only two lines. This is something that ShapeGeometry can not triangulate. Hence, you produce a faceless geometry which is not a valid in context of meshes. To avoid this problem, init your array with two additional points like demonstrated in the updated fiddle:

https://jsfiddle.net/p8rdzovt/2/

#10

Thank you Michael, you’re really helpful.

1 Like