# Merge positioned Meshes

**URL:** <https://discourse.threejs.org/t/merge-positioned-meshes/30969>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [October 19, 2021, 12:07pm UTC](https://discourse.threejs.org/t/merge-positioned-meshes/30969 "2021-10-19T12:07:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Duzij](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/duzij/32/21677_2.png) [@Duzij](https://discourse.threejs.org/u/Duzij)\
**Post date:** [October 19, 2021, 12:07pm UTC](https://discourse.threejs.org/t/merge-positioned-meshes/30969/1 "2021-10-19T12:07:57Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/9/c9f96a4f16e9e218e24a448fd3aa2de0a1d491a9.png)

Thanks!

---

<div class="post-metadata">

**Author:** ![D13](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@D13](https://discourse.threejs.org/u/D13)\
**Post date:** [October 19, 2021, 4:10pm UTC](https://discourse.threejs.org/t/merge-positioned-meshes/30969/2 "2021-10-19T16:10:02Z")

</div>

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

```javascript
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.

---

<div class="post-metadata">

**Author:** ![Duzij](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/duzij/32/21677_2.png) [@Duzij](https://discourse.threejs.org/u/Duzij)\
**Post date:** [October 20, 2021, 2:00pm UTC](https://discourse.threejs.org/t/merge-positioned-meshes/30969/3 "2021-10-20T14:00:40Z")

</div>

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?

```javascript

        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;

```

---

<div class="post-metadata">

**Author:** ![D13](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@D13](https://discourse.threejs.org/u/D13)\
**Post date:** [October 20, 2021, 2:31pm UTC](https://discourse.threejs.org/t/merge-positioned-meshes/30969/4 "2021-10-20T14:31:12Z")

</div>

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.

> <https://stackoverflow.com/questions/27193732/three-js-creating-a-right-triangular-prism>