三个 JS - 如何缩放移动对象

Three JS - How to scale a moving object

本文关键字：缩放 移动 对象 JS 何缩放 三个      更新时间：2023-09-26

我正在尝试在 THREE 中缩放一个移动对象，但是当我缩放它时，它会缩放我的对象并将其移动到另一个位置。

我使用以下内容来设置对象的比例 

    // initiates the scale transition
function doTriangleScale(intersection){
  var tween = new TWEEN.Tween(intersection.object.parent.scale)
  .to({
    x: scaleSize,
    y: scaleSize,
    z: scaleSize,
   }, scaleEase)
  tween.start();
  // should have a check if the user is still on the object in question, no time for this now
  setTimeout(function(){
    doTriangleScaleRevert(intersection);
  }, 2000)
}
// triggers the scale revert to default
function doTriangleScaleRevert(intersection) {
  var tween = new TWEEN.Tween(intersection.object.parent.scale)
  .to({
    x: 1, 
    y: 1, 
    z: 1 
  }, scaleEase)
  tween.start();
}
如果对象没有移动，

这就可以工作，但是我的对象在渲染动画中使用以下代码移动

scene.traverse(function (e) {
    if (e instanceof THREE.Mesh && e.name != "pyramid") {
        e.rotation.x += rotationSpeed;
        e.rotation.y += rotationSpeed;
        e.rotation.z += rotationSpeed;
        if(triangleFloatLeft){
          e.position.x += 0.01;
        }else{
          e.position.x -= 0.01;
        }
    }
});

我正在寻找一种可以从其中心缩放对象的解决方案。

谢谢！

对象围绕其原点缩放。例如，如果您有一个多维数据集：

var geo = new THREE.BoxGeometry(1, 1, 1);

如果使用几何geo缩放网格，它将围绕其中心生长。但是，如果移动几何图形的原点：

geo.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0.5, 0));

现在它会向上生长，因为原点被移到了盒子的地板上。

对象的原点可能不在其中心。您可以在模型本身（如果导入了它）或 Three 中移动原点.js如上所述。

相关文章：