Search code examples
javascriptthree.js3d

Geometries merged with BufferGeometryUtils differ from the original model


When i try to merge GLB model geometries with three.js (BufferGeometryUtils.mergeBufferGeometries), new geometries don't always align to the original model.

Other geometries are oversimplified, such as the round window in the example.

This is the portion of code:

let geometries = [];
model.traverse( c => {
    if (c.isMesh){
        let clonedGeometry = c.geometry.clone();
        clonedGeometry.applyMatrix4( c.matrixWorld );
        for ( const key in clonedGeometry.attributes ) {
            if ( key === 'position' || key === 'normal' ) continue;
            clonedGeometry.deleteAttribute( key );
        }
        geometries.push( clonedGeometry );
    }
});
let mergedGeometry = BufferGeometryUtils.mergeBufferGeometries( geometries );

How can I get merged geometries more similar to the original?

original glb model, merged geometries in blue


Solution

  • Problem origin

    Vertices with georeferenced coordinates have values greater than a million for x and y. Rounding errors appears.

    Solution

    • calculate minimum x and y of the vertices;
    • subtract the minimum value from the coordinates;
    • merge the geometries and create mesh;
    • set mesh.position to minimum calculated;