How to scale a mesh without changing the position?

Question

I have in this scene 27 meshes, each of which has an associated number. The one with the highest number will have the scale 1. The rest will have a value less than 1 successively.

Next I want it to climb each of the loops accordingly. My problem occurs when the position of each mesh is changed.

Indeed it is scaled to the size that is due, but it changes position. I'm struggling as several screens are stacking.

I just need you to climb and stay in the same position as in this example:

US states are scaled, but still keeping their position. I think that they scale to the center of the figure.

I created the meshes (each called "municipios")

for(var s=0; s< features.features[x].geometry.coordinates[0].length; s=s+1){                       
   geometria[x].vertices.push(new THREE.Vector3((((features.features[x].geometry.coordinates[0][s][0])+75.5)*10),(((features.features[x].geometry.coordinates[0][s][1])-5.5)*10),0));                                   
}
forma_figura[x]=new THREE.Shape(geometria[x].vertices);
extrude_geometria[x]=new THREE.ExtrudeGeometry(forma_figura[x],datos_extrusion);
municipios[x] = new THREE.Mesh( extrude_geometria[x], materialExtrude[x] );
scene.add(municipios[x]);

// so I change the scale:
//formula is the value of scale. The biggest number has escale 1.
new TWEEN.Tween(municipios[x].scale).to({ x: formula, y: formula  }, 1000).start();
//this ultimate line is the same:    municipios[x].scale.set(formula,formula,formula); 

Answer 1

Because the mesh position is not at its center, or whatever reference you want it to be : if you create a geometry with average vertices x component over 100, its visible position will be its real position plus (100,0,0). If you did not specify a position for the mesh ((0,0,0) by default), it will look being at (100,0,0) precisely. Scaling it by .5 for instance will result in the average position being at (100,0,0)*.5=(50,0,0), making the mesh apparently change its position.

What needs to be done is :

• to substract the coordinates of the center from all the vertices. Vertices are inside the geometry, so once it is done, geometry.verticesNeedUpdate = true needs to be set.

• then to add the coordinates of the center to the mesh, to compensate.

So the resulting mesh will be positionned at its center without having moved.

There are three different possibilities to define the center :

• Three.js can center your mesh automatically based on the center of the bounding box with geometry.center() and THREE.GeometryUtils.center(geometry).
• You can compute the centroid by looping through the vertices a first time to get their average coordinates.
• You may neither want the center of the bouding box, nor the centroid, but a custom center. For example if you are scaling 'people' meshes and want their feet touch the ground at any scale : on the horizontal plane the center you want can be one of the two first, but its vertical coordinate must be the lowest vertical coordinate found (the very bottom of the feet).

Of course if your meshes are imported from a 3D editor software you can also do that inside it.