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

vel*_*z11 5 javascript scale three.js

我在这个场景中有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); 
Run Code Online (Sandbox Code Playgroud)

Atr*_*sis 6

因为网格位置不在其中心,或者您想要的任何参考:如果创建平均顶点x组件超过100 的几何体,其可见位置将是其实际位置加上(100,0,0).如果没有为网格指定位置(默认情况下为(0,0,0)),则它将精确地位于(100,0,0)处.例如,按.5缩放将导致平均位置为(100,0,0)*.5 =(50,0,0),使得网格明显改变其位置.

需要做的是:

  • 从所有顶点减去中心的坐标.顶点位于几何体内部,因此一旦完成,geometry.verticesNeedUpdate = true需要进行设置.

  • 然后将中心的坐标添加到网格中,以进行补偿.

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

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

  • three.js所可以根据自动居中的网格边界框的中心geometry.center()THREE.GeometryUtils.center(geometry).
  • 您可以通过首次循环顶点来计算质心,以获得它们的平均坐标.
  • 你可能既不想要镂空盒的中心,也不想要质心,而是一个定制的中心.例如,如果要缩放"人物"网格并希望他们的脚以任何比例触地:在水平面上,您想要的中心可以是前两个中心之一,但其垂直坐标必须是找到的最低垂直坐标(非常的脚底).

当然,如果您的网格是从3D编辑器软件导入的,您也可以在其中进行.