I've been using an old revision of Three.js for quite some time, so I decided to upgrade to the latest (r68). I knew I would bump into some issues, but I wasn't expecting the removal of geometryputeCentroids() and .centroid property.

I'm loading models using the OBJMTLLoader library. The problem with this is that since it no longer has the puteCentroids() method, I have no way of getting them. I've tried to calculate them using other methods, but to no avail:

• Three.js How to get position of a mesh?
• Three.js move and rotate the center of geometry
• Three.js Child Mesh position always return (0,0,0)

I've also tried to use the .localToWorld(point) methods, but they're not working either. It always returns (0,0,0).

For now, when I click a mesh, I'm calculating (or trying to calculate) its centroid with:

 if (mesh.centroid === undefined) {
    mesh.centroid = new THREE.Vector3();
    mesh.centroid = mesh.geometry.center();
    console.log(mesh.centroid); }

I'm also using this whenever I add a new object to the scene (which has child meshes):

//desperate try to find different values for centroids
object.updateMatrix();
scene.updateMatrix();
object.updateMatrixWorld();
scene.updateMatrixWorld();

What's even more strange is that the centroids I'm trying to calculate aren't consistent. It always shows the same vectors in the console.log(), no matter which order I click the meshes.

THREE.Vector3 {x: 158.89799999999997, y: -4.115949999999998, z: 67.75310000000002, constructor: function, set: function…}
THREE.Vector3 {x: 0.000005004882780212938, y: 0.16375010757446518, z: 0.0000024658203301441972, constructor: function, set: function…}
THREE.Vector3 {x: -1.7053025658242404e-13, y: -0.0818749484539012, z: 1.1368683772161603e-13, constructor: function, set: function…}

I was wondering if someone had a similar issue with this. I haven't tried previous revisions of three.js, since I really want to upgrade to the latest version and keep it consistent from there.

Thank you in advance.

EDIT: Forgot to mention an important detail. I want the centroid in WORLD coordinates.

After using mrdoob 's method, I was able to get a centroid. I always get the same value for every mesh because, even though I'm using .calculateBoundingBoxes() on each mesh, these bounds refer to the main parent object. Each geometry has all of the object's vertices assigned, and I'm assuming that the bounding boxes are calculated according to these vertices, and that's why I'm getting the same values for every geometry.

I've been using an old revision of Three.js for quite some time, so I decided to upgrade to the latest (r68). I knew I would bump into some issues, but I wasn't expecting the removal of geometry.puteCentroids() and .centroid property.

I'm loading models using the OBJMTLLoader library. The problem with this is that since it no longer has the .puteCentroids() method, I have no way of getting them. I've tried to calculate them using other methods, but to no avail:

• Three.js How to get position of a mesh?
• Three.js move and rotate the center of geometry
• Three.js Child Mesh position always return (0,0,0)

I've also tried to use the .localToWorld(point) methods, but they're not working either. It always returns (0,0,0).

For now, when I click a mesh, I'm calculating (or trying to calculate) its centroid with:

 if (mesh.centroid === undefined) {
    mesh.centroid = new THREE.Vector3();
    mesh.centroid = mesh.geometry.center();
    console.log(mesh.centroid); }

I'm also using this whenever I add a new object to the scene (which has child meshes):

//desperate try to find different values for centroids
object.updateMatrix();
scene.updateMatrix();
object.updateMatrixWorld();
scene.updateMatrixWorld();

What's even more strange is that the centroids I'm trying to calculate aren't consistent. It always shows the same vectors in the console.log(), no matter which order I click the meshes.

THREE.Vector3 {x: 158.89799999999997, y: -4.115949999999998, z: 67.75310000000002, constructor: function, set: function…}
THREE.Vector3 {x: 0.000005004882780212938, y: 0.16375010757446518, z: 0.0000024658203301441972, constructor: function, set: function…}
THREE.Vector3 {x: -1.7053025658242404e-13, y: -0.0818749484539012, z: 1.1368683772161603e-13, constructor: function, set: function…}

I was wondering if someone had a similar issue with this. I haven't tried previous revisions of three.js, since I really want to upgrade to the latest version and keep it consistent from there.

Thank you in advance.

EDIT: Forgot to mention an important detail. I want the centroid in WORLD coordinates.

After using mrdoob 's method, I was able to get a centroid. I always get the same value for every mesh because, even though I'm using .calculateBoundingBoxes() on each mesh, these bounds refer to the main parent object. Each geometry has all of the object's vertices assigned, and I'm assuming that the bounding boxes are calculated according to these vertices, and that's why I'm getting the same values for every geometry.

• javascript
• three.js
• centroid

• Maybe related, I just made a puteCentroids() function to calculate face centroids gist.github./DelvarWorld/c9c41b549d0b1e97da8890a79e3ab8d0 to replace the functionality removed in newer three builds – Andy Ray Commented Jul 5, 2016 at 3:47

1 Answer 1

If you want to pute the centroid of the whole geometry this is the code you need:

geometry.puteBoundingBox();

var centroid = new THREE.Vector3();
centroid.addVectors( geometry.boundingBox.min, geometry.boundingBox.max );
centroid.multiplyScalar( - 0.5 );

centroid.applyMatrix4( mesh.matrixWorld );