如何在不改变位置的情况下缩放网格？

Question

我在这个场景中有 27 个网格，每个网格都有一个关联的编号。数字最高的将具有标度 1。其余的将依次具有小于 1 的值。

接下来我希望它相应地爬上每个循环。当每个网格的位置发生变化时，就会出现我的问题。

确实它被缩放到应有的大小，但它改变了位置。我正在努力，因为几个屏幕正在堆叠。

我只需要你爬上并保持与本例相同的位置：

美国各州已按比例缩放，但仍保持其位置。我认为它们会缩放到图的中心。

我创建了网格（每个都称为 "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

因为网格位置不在它的中心，或者任何你想要的参考：如果你创建一个平均顶点 x 分量超过 100 的几何体，它的可见位置将是它的真实位置加上(100,0,0)。如果您没有指定网格的位置（默认情况下为 (0,0,0)），它将精确地位于 (100,0,0)。例如，将其缩放 0.5 将导致平均位置为 (100,0,0)*.5=(50,0,0)，使网格明显改变其位置。

需要做的是：

所有顶点减去圆心坐标。顶点在 geometry 内部，所以一旦完成，需要设置 geometry.verticesNeedUpdate = true。
然后将中心坐标添加到网格，进行补偿。

因此生成的网格将定位在其中心而不会移动。

定义中心有三种不同的可能性：

Three.js 可以根据 边界框的中心 以及 geometry.center() 和 THREE.GeometryUtils.center(geometry) 自动将网格居中。
您可以计算质心，方法是第一次遍历顶点以获得它们的平均坐标。
您可能既不想要边界框的中心，也不想要质心，而是自定义中心。例如，如果您正在缩放 'people' 网格并希望它们的脚以任何比例接触地面：在水平面上，您想要的中心可以是前两个中的一个，但其垂直坐标必须是找到的最低垂直坐标（脚底）。

当然，如果您的网格是从 3D 编辑器软件导入的，您也可以在其中执行此操作。

如何在不改变位置的情况下缩放网格？

How to scale a mesh without changing the position?

javascript

scale

three.js