Three.js: Change the pivot point of my object?

Created on 20 Feb 2012 · 10Comments · Source: mrdoob/three.js

I'm very new in this area, so excuse if it's a stupid question.

My problem:

I want to build a prism (polygon consits of 24 planes). So I have 24 planes, everyone of them is 15° degreed of each other and grouped. Because it is to complicated to calculate how much the x and z distance is, it would be easier if you set the pivot point in the bottom right for example? right? but how? or is there another possibility to create a circle which consists of planes?

sorry for my bad english :-/

Question

Source

AppleTea

Most helpful comment

You have two options.

Offset all the vertices in your geometry:

geometry.applyMatrix( new THREE.Matrix4().setTranslation( 0, 10, 0 ) );

Create a object that will act as pivot:

mesh.position.y = 10;

var pivot = new THREE.Object3D();
pivot.add( mesh );

scene.add( pivot );

mrdoob on 20 Feb 2012

👍19 👎2

All 10 comments

You have two options.

Offset all the vertices in your geometry:

geometry.applyMatrix( new THREE.Matrix4().setTranslation( 0, 10, 0 ) );

Create a object that will act as pivot:

mesh.position.y = 10;

var pivot = new THREE.Object3D();
pivot.add( mesh );

scene.add( pivot );

mrdoob on 20 Feb 2012

👍19 👎2

is there any pros or cons in those two methods?

nkint on 1 Apr 2015

geometry.applyMatrix( new THREE.Matrix4().setTranslation( 0, 10, 0 ) );

is now

geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 10, 0 ) );

https://github.com/mrdoob/three.js/commit/7f05ba167c522d1b9bac01677c2249b0f1b8c834

placegraphichere on 4 Apr 2015

👍7

the applyMatrix makeTranslation thing, doesnt work in my case. dont know why.
the pivot object works. and IMHO it's easier.
note:
use this

mesh.position.x = ###;
mesh.position.y = ###;
mesh.position.z = ###;

instead of:

mesh.position.set(###,###,###);

JimmyJangkrik on 5 Aug 2015

Thanks @placegraphichere, that helped.

Tyguy7 on 14 Sep 2015

Something like this should work as well with three.js v78, if you wanted to eg. rotate around your objects edge instead if its center:

.js mesh.geometry.translate( -myObjectWidth/2, 0, 0 );

nylki on 20 Jun 2016

But be aware that using geometry.translate() is going to modify the position of all the vertices. It's a good solution as long as you're not planning on changing the pivot again later.

mrdoob on 20 Jun 2016

👍10

I want to translate my mesh (3d box container) origin from center to left bottom corner. So when I will add any other small mesh box inside the container mesh, it should gets placed inside the left bottom corner instead of placing at center.

mesh.geometry.translate( -myObjectWidth/2, 0, 0 );

When I am using this, my mesh position is also getting changed