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
Comments
Post a Comment