仅扩展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

如果您希望几何体仅"向上"缩放,您需要做的就是确保几何体的"底部"穿过原点.在您的情况下,您可以使用如下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 2

你问题的通常情况是"地面"上的某种东西,就像一个"人"的网状物一样,无论大小如何,都应该在地面上.有两种方法.

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