three.js - Positioning Objects at the same Elevation -

i have issue position of cubes in application. when set them same size rendered on same y position defined: example:

geometry = new three.boxgeometry(50, 50, 50); material = new three.meshbasicmaterial({ color: 0xff0000 }) mesh = new three.mesh(geometry, material); mesh.position.set(100, 0, 400); // set y 0 because want cubes on same level buildings in city 

and same next cubes, changing x , z positions. however, when create cubes different sizes, objective, follows,

geometry = new three.boxgeometry(50, 100, 50); 

they appear on different level in final visualization on browser, shows image:

https://cloud.githubusercontent.com/assets/3678443/8651664/35574c18-2972-11e5-8c75-2612733ea595.png

any ideas on how solve problem? doing wrong?

boxgeometry centered on origin. there 2 solutions translating box sits on xz-plane.

option 1. translate geometry bottom face of box passes through origin. translating geometry half height.

geometry = new three.boxgeometry( 50, 50, 50 );  geometry.applymatrix( new three.matrix4().maketranslation( 0, 50 / 2, 0 ) );  mesh = new three.mesh( geometry, material ); mesh.position.set( 100, 0, 400 ); 

option 2. translate mesh setting position.

geometry = new three.boxgeometry( 50, 50, 50 );  mesh = new three.mesh( geometry, material ); mesh.position.set( 100, 50 / 2, 400 ); 

the first option preferable use case.

three.js r.71