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

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.verticesNeedUpdate = true。

• 然后将中心坐标加入到网格中，进行补偿。

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

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

• Three.js 可以根据 边界框的中心 使用 geometry.center() 和 THREE.GeometryUtils.center(geometry )。
• 您可以通过第一次遍历顶点以获得它们的平均坐标来计算质心。
• 您可能既不需要边界框的中心，也不需要质心，而是自定义中心。例如，如果您正在缩放“人物”网格并希望他们的脚以任何比例接触地面:在水平面上，您想要的中心可以是前两个中的一个，但其垂直坐标必须是找到的最低垂直坐标(脚底)。

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