# What is the best way of effectively aligning meshes on themselves

**URL:** <https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921>\
**Category:** Questions\
**Created:** [May 25, 2018, 1:53pm UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921 "2018-05-25T13:53:54Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [May 25, 2018, 1:53pm UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921/1 "2018-05-25T13:53:54Z")

</div>

I am building a product configurator, and i have different meshes i want to group together as a single object, what how do i effectively align them well on each other as three.js is non visual? or is it a case of trial and error till i get it ?

---

<div class="post-metadata">

**Author:** ![Atul\_Mourya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atul_mourya/32/1155_2.png) [@Atul\_Mourya](https://discourse.threejs.org/u/Atul_Mourya)\
**Post date:** [May 25, 2018, 2:19pm UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921/2 "2018-05-25T14:19:19Z")

</div>

> [@eshiett1995](#):
>
> have different meshes i want to group together as a single object

Not sure, what you meant by ‘align’.

But, lets say you have an array of objects, you can threejs’s group constructor to group them all as a single object.

```
    var objects = [object1, object2, object3, ....]
    var group = new THREE.Group();
    objects.forEach(function ( object ){
        group.add( object );
    } );
    scene.add(group)

```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 25, 2018, 2:23pm UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921/3 "2018-05-25T14:23:25Z")

</div>

@Atul_Mourya  
Works well, if objects have specific positions already, not just [0, 0, 0] (thus all of them in one point) 🙂

---

<div class="post-metadata">

**Author:** ![Atul\_Mourya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atul_mourya/32/1155_2.png) [@Atul\_Mourya](https://discourse.threejs.org/u/Atul_Mourya)\
**Post date:** [May 25, 2018, 2:30pm UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921/4 "2018-05-25T14:30:49Z")

</div>

If you don’t have a known position for your meshes, I would recommend to import all your meshes in threejs editor, align all the objects and export the objects with preset positions.

After that you can import the objects in you project. This will ensure the grouping doesn’t overlap at center i.e [0,0,0]

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [May 25, 2018, 2:42pm UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921/5 "2018-05-25T14:42:07Z")

</div>

the problem with the threejs editor is that it hangs as i keep adding more and more meshes

---

<div class="post-metadata">

**Author:** ![Atul\_Mourya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atul_mourya/32/1155_2.png) [@Atul\_Mourya](https://discourse.threejs.org/u/Atul_Mourya)\
**Post date:** [May 25, 2018, 2:55pm UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921/6 "2018-05-25T14:55:17Z")

</div>

Strange! Because, I have worked with 2 million triangle without any issue on my computer which is Intel i5, Nvidia GT 610, 8 GB RAM.

I works flawlessly.  
You can try importing and exporting objects in one by one. I would not be an issue then.

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [May 25, 2018, 2:57pm UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921/7 "2018-05-25T14:57:39Z")

</div>

strange you said this, because i am using a quadcaore i5, AMD R550x and 12GB ram, it is horribly lagging the more i add meshes

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [May 25, 2018, 8:31pm UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921/8 "2018-05-25T20:31:37Z")

</div>

during the grouping can one specify the position to add the mesh ?

---

<div class="post-metadata">

**Author:** ![Atul\_Mourya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atul_mourya/32/1155_2.png) [@Atul\_Mourya](https://discourse.threejs.org/u/Atul_Mourya)\
**Post date:** [May 26, 2018, 5:46am UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921/9 "2018-05-26T05:46:41Z")

</div>

Yes you can. In such case, use array of json data with position data.

```
var objects = [
        { object : object1, position: { x: 22, y: 49, z: 55 },
        { object : object2, position: { x: 12, y: 91, z: 52 },
        { object : object3, position: { x: 22, y: 27, z: 35 },
        { object : object4, position: { x: 72, y: 53, z: 75 }
        ...... and so on
]
var group = new THREE.Group();
objects.forEach(function ( element){
    element.object.position.set( element.position.x, 
                                 element.position.y, 
                                 element.position.z );
    group.add( element.object );
} );
scene.add(group);
```

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [May 26, 2018, 8:18am UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921/10 "2018-05-26T08:18:38Z")

</div>

okay, i tried something tho for the alignment of the shirt meshes. firstly i opened the editor and tried to align the parts perfectly, then took their coordinates and inserted them pro-grammatically, but it didn’t seem to be perfect as i had done it with the Threejs Editor, why is this ?

---

<div class="post-metadata">

**Author:** ![Atul\_Mourya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atul_mourya/32/1155_2.png) [@Atul\_Mourya](https://discourse.threejs.org/u/Atul_Mourya)\
**Post date:** [May 26, 2018, 8:35am UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921/11 "2018-05-26T08:35:36Z")

</div>

If you would have done it correctly, the result won’t be surprising. I would recommend to create a sample [jsfiddle](https://jsfiddle.net/s3rjfcc3/) so we can get the proper solution to your issue.

---

<div class="post-metadata">

**Author:** ![eshiett1995](https://avatars.discourse-cdn.com/v4/letter/e/6de8d8/32.png) [@eshiett1995](https://discourse.threejs.org/u/eshiett1995)\
**Post date:** [May 27, 2018, 2:50pm UTC](https://discourse.threejs.org/t/what-is-the-best-way-of-effectively-aligning-meshes-on-themselves/2921/12 "2018-05-27T14:50:57Z")

</div>

I tried another method, i created input that enabled me align them together, check it out …[https://ngcouture.herokuapp.com/](https://ngcouture.herokuapp.com/) and please i need help with my 3D models, it is looking so distorted in terms of graphics, please is there material texturing or lighting i can use to make it look more realistic…i have heard of how people use lighting and shaders to make low poly models look realistic.