three.js - how to translate geometry

Question

I have a script that positions cubes of various width, height and depth and am struggling to line them up accurately based on the xAxis, yAxis and zAxis (which also vary).

var geometry = new THREE.BoxGeometry(width, height, depth);
var cube = new THREE.Mesh(geometry, material);
cube.position.set(xAxis, yAxis, -zAxis);
scene.add(cube);

I believe this is because the cube is positioned based on it's centre, however is there a method to position it based on the front, left and corner - which would solve this issue for varying sized cubes?

Answer 1

You can translate your geometry so one corner of the box is located at the origin:

var geometry = new THREE.BoxGeometry( width, height, depth );
geometry.translate( width / 2, height / 2, depth / 2 );

If you have many cube instances of different sizes, it is better to use this pattern:

var geometry = new THREE.BoxGeometry( 1, 1, 1 ); // create once and reuse
geometry.translate( 0.5, 0.5, 0.5 );

var cube_1 = new THREE.Mesh( geometry, material );
cube_1.scale.set( width, height, depth );

three.js r.87