javascript - three.js - how to translate geometry - Stack Overflow

admin管理员组

文章数量:1352819

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

Share Improve this question Follow edited Oct 11, 2017 at 15:54 WestLangley 105k1111 gold badges287287 silver badges283283 bronze badges asked Oct 10, 2017 at 10:51 wrdevelopwrdevelop 5311 gold badge11 silver badge44 bronze badges 3

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptthreejshow to translate geometryStack Overflow