Merge positioned Meshes

Questions
1

Hi all,

I have a complex Mesh made by a several positioned simple meshes (BoxGeometry at the center and PrismGeometry meshes positioned around the box). All these simple meshes have the same half-transparent material, and as a result, edges between these simple meshes is visible. My goal is to make it seem like a one seamless object.

I tried BufferGeometryUtils.merge, but merge fail and null geomerty is returned.

Is there some general approach how to merge already instantiated and positioned meshes?

image
image895×835 89.7 KB

Thanks!

2

Are you using buffer geometry? As in “BoxBufferGeometry”? If not, I would suggest switching your geometry to BufferGeometry as Geometry is depricated in modern releases.

r133 - Method: “MergeBufferGeometries” from /BufferGeometryUtils.js

var mergedGeoms = []; // merge array

var newBox1 = new THREE.BoxBufferGeometry( 2, 2, 2 ); // buffer geometry
    newBox1.translate( 0, 0, 0 ); // set position 
    mergedGeoms.push( newBox1 ); // add to merge array

var newBox2 = new THREE.BoxBufferGeometry( 2, 2, 2 ); // 2nd buffer geometry
    newBox2.translate( 0, 0, -0.1 ); // set position
    mergedGeoms.push( newBox2 ); // add to merge array

var mergedBoxes = mergeBufferGeometries( mergedGeoms ); // merged geometries

Now the geometries are merged and you can use this geometry and apply a material. You can add as many geometries as you like to the mergedGeoms array. Without an example of your geometries there is no way to really know how you’ve positioned them. So I provided a simple position translation to the example geometries.

3

Yes, I’m using BufferGeomerty. Is it maybe possible to reuse some of the existing code bellow?

I create a box first, then I create first prism (on the right side, closer to camera), then copyPrism is created and mirrored by y axis. Prism and copyPrism are then added together and copied again on the left side (mirrored by x axis).

The problem might be in .clone() function, hense it does not create a new instance of BufferGeomerty, but use an existing one?


        const cubeGeometry = new THREE.BoxGeometry(0.44, 0.88, 1.1);
        const material = new THREE.MeshBasicMaterial({
            color: "blue",
            opacity: 0.1,
            transparent: true,
            side: THREE.DoubleSide,
            depthWrite: false
        });

        var baseBox = new THREE.Mesh(cubeGeometry, material);

        var A = new Vector2(0.22, -0.44);
        var B = new Vector2(0.44, 0);
        var C = new Vector2(0.22, 0.44);

        var height = 1.1 / 2;
        var geometry = new PrismGeometry([A, B, C], height);

        var prism = new Mesh(geometry, material);

        const copyPrism = prism.clone();
        //flip by changing a scale: scale.y *= -1;
        flipObject(copyPrism, false, true);
        prism.add(copyPrism);

        const leftSide = prism.clone();
        //flip by changing a scale: scale.x *= -1;
        flipObject(leftSide, true, false);
        prism.add(leftSide)

        //var geo = new BufferGeometry()
        //geo.merge(BufferGeometryUtils.mergeBufferGeometries([prism.geometry, copyPrism.geometry, leftSide.geometry]))
        baseBox.add(prism);
        baseBox.add(getGeometryWireframe(baseBox.geometry));

        return baseBox;
4

Try this example of prism. Perhaps this
Is closer to what you are looking for. I’m not sure what version of ThreeJS this is using but its a good example of a simple prism geometry. You will need to apply your own transparent material of course… Try working with this and post back if you get stuck.