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?

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?

• javascript
• three.js

• Hi Any example on jsfiddle? – user8556290 Commented Oct 10, 2017 at 10:56
• Or a picture with the desired result, as it's hard to understand, at least for me, what "front, left and corner" is. – prisoner849 Commented Oct 10, 2017 at 10:58
• 1 "am struggling to line them up accurately based on the xAxis, yAxis and zAxis" - what is the exact issue? Maybe an image would be helpful. – Paul Kertscher Commented Oct 10, 2017 at 11:07

1 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