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

Answer 2

如果您希望几何图形仅缩放＆＃34;向上＆＃34;，您需要做的就是确保＆＃34;底部＆＃34;您的几何体穿过原点。在您的情况下，您可以使用translate()方法，如下所示：

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
geometry.translate( 0, 0.5, 0 );

var tween = new TWEEN.Tween( mesh.scale ).to( { y: 2 }, 1000 );
tween.start();

盒子的底部将保持固定，盒子的高度将会改变。

three.js r.73

Answer 3

因为在我的情况下，Google上有关如何缩放几何体的第一项，我将发布我的函数以更改几何体。

function _alterGeometry(geometry, opt) {

    var toAlter = [];

    var matrixMultiplier = function (mtx) {
        var matrix = new THREE.Matrix4();
        mtx.forEach(function (m, index) {
            matrix = new THREE.Matrix4().multiplyMatrices(matrix, m);
        });
        return matrix;
    };

    if (opt.position)
        toAlter.push(new THREE.Matrix4().setPosition(new THREE.Vector3(opt.position.x, opt.position.y, opt.position.z)));

    if (opt.rotation && opt.rotation.x)
        toAlter.push(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), opt.rotation.x));

    if (opt.rotation && opt.rotation.y)
        toAlter.push(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), opt.rotation.y));

    if (opt.rotation && opt.rotation.z)
        toAlter.push(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), opt.rotation.z));

    if (opt.scale)
        toAlter.push(new THREE.Matrix4().scale(opt.scale));

    geometry.applyMatrix(matrixMultiplier(toAlter));
    return geometry;

}

仅扩展Three.js几何体

3 个答案: