What is the best way of effectively aligning meshes on themselves

Questions
1

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 ?

2

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)
1 Like
3

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

1 Like
4

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]

5

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

6

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.

7

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

8

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

9

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);
10

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 ?

11

If you would have done it correctly, the result won’t be surprising. I would recommend to create a sample jsfiddle so we can get the proper solution to your issue.

12

I tried another method, i created input that enabled me align them together, check it out …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.