Javascript 仅向上缩放Three.js几何体

我正在尝试缩放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();

---

通常情况下，你的问题是“地面”上的东西，比如“人”网，无论大小，它的脚都应该放在地面上。有两种方法

• Zebra在评论中提出的方式。根据网格的高度，您可以轻松实现它：正如您所写的，当在

  y

  中缩放时，网格的顶部和底部都会高出一半。因此，您只需将其位置移动到

  高度*刻度/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;
  }
  

  函数原始底部（几何体）{
  //1.找到最低的'y'坐标
  var shift=geometry.boundingBox？geometry.boundingBox.min.y:geometry.computeBoundingBox（）.min.y；
  //2.然后将所有顶点向上平移
  //所以垂直原点是脚的底部：
  对于（var i=0；i

---

如果希望几何体仅“向上”缩放，则只需确保几何体的“底部”通过原点即可。在您的情况下，您可以像这样使用

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

在我的例子中，这是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中的3D对象位置位于对象的中心。因此，如果希望“向上缩放”，则需要在缩放对象的同时向上移动对象。虽然可能有一个更简单的方法来实现你想要的。完美。这应标记为正确答案。