仅扩展Three.js几何体 [英] Scaling a Three.js geometry only up

问题描述

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

I'm trying to scale the geometries y-axis. This made my cube scale both up and down. I think mesh.transformY works to animate the cube up half of the scaling value. This would make it look like the cube just scaled upwards. Are there other solutions for this?

    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();

推荐答案

你问题的通常情况是''地面'，就像一个'人'的网状物，无论大小如何都应始终在地上。有两种方法。

The usual case of your question is something on a 'ground', like a 'person' mesh, that shall always have its feet on the ground whatever its size. There are two ways for that.

• Evilzebra在评论中提出的方式。基于网格的高度，您可以轻松实现它：正如您所写，当在 y 中进行缩放时，网格在顶部和底部都会变得更高。因此，您只需将其位置移至 height * scale / 2 ：

• The way Evilzebra proposed in the comment. Based on the height of your mesh you can implement it easily : as you wrote, when scaling in y, the mesh will get half taller both on top and bottom. So you just have to move its position to 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方法随意更改比例：

Another way is to move the origin of the coordinates (local space) at the bottom of the geometry, so the position is not changed. For that you have to move the origin of the geometry to the lowest y coordinate. You will then be able to change your scale at will with the native ThreeJS method :

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;
}

这篇关于仅扩展Three.js几何体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！