Question

我试图在三个中缩放移动物体，但是当我缩放它时，它会缩放我的物体并将其移动到另一个位置。

我使用以下方法设置对象的比例

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

我正在寻找一种能够从中心扩展物体的解决方案。

谢谢！

Answer 1

对象围绕其原点缩放。例如，如果您有一个立方体：

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

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

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

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

您的物体的起源可能不在其中心。您可以在模型本身（如果您导入它）或在Three.js中移动原点。

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

1 个答案: