javascript - 仅向上扩展Three.js几何

Question

我正在尝试缩放y轴的几何形状。这使我的多维数据集缩放上下。我认为mesh.transformY可以使多维数据集向上缩放比例值的一半。这将使其看起来像只是向上缩放的多维数据集。还有其他解决方案吗？

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
        color: 0xffffff
    }));

    mesh.position.set(0, 2, 0);
    mesh.scale.set(0.98, 0.95, 0.992);
    mesh.castShadow = true;
    scene.add(mesh);

    var tween = new TWEEN.Tween(mesh.scale)tween.to({y: 2}, 1000)
    tween.easing(TWEEN.Easing.Elastic.InOut);
    tween.yoyo(true);
    tween.start();

Answer 1

您问题的通常情况是在“地面”上的某物，例如“人”网，无论其大小如何，都应始终将其脚放在地面上。有两种方法。

Evilzebra在评论中提出的方式。根据网格的高度，您可以轻松实现它:如您所写，按y缩放时，网格的顶部和底部都将变高一半。因此，您只需要将其位置移至height * scale / 2即可:

function scaleY ( mesh, scale ) {
    mesh.scale.y = scale ;
    if( ! mesh.geometry.boundingBox ) mesh.geometry.computeBoundingBox();
    var height = mesh.geometry.boundingBox.max.y - mesh.geometry.boundingBox.min.y;
    //height is here the native height of the geometry
    //that does not change with scaling. 
    //So we need to multiply with scale again
    mesh.position.y = height * scale / 2 ;
}

另一种方法是在几何图形的底部移动坐标的原点(局部空间)，因此位置不会更改。为此，您必须将几何原点移动到最低y坐标。然后，您将可以使用原生ThreeJS方法随意更改比例:

function originToBottom ( geometry ) {

    //1. Find the lowest `y` coordinate
    var shift = geometry.boundingBox ? geometry.boundingBox.min.y : geometry.computeBoundingBox().min.y;

    //2. Then you translate all your vertices up 
    //so the vertical origin is the bottom of the feet :
    for ( var i = 0 ; i < geometry.vertices.length ; i++ ) {
        geometry.vertices[ i ].y -= shift;
    }
    //or as threejs implements (WestLangley's answer) : 
    geometry.translate( 0, -shift, 0);

    //finally
    geometry.verticesNeedUpdate = true;
}