Threejs lerp，lerpVectors 在没有动画的情况下工作

Question

我正在尝试在一段时间后通过函数 lerp、lerpVectors 向不同方向移动 10 个网格。他们两个都给了我相同的结果，他们只是将网格传送到新位置而没有 animation 移动到那里。这是我的代码（"lerp"）：

 var newPos;
 var timer = 0;
 function render() {
  if (timer === 120) {
    for (var i = 0; i < count; i++) {
      mesh = meshes[i];
      newPos = new THREE.Vector3(Math.random() * 200 - 100, Math.random() * 200 - 100, Math.random() * 200 - 100);
      mesh.position.lerp(newPos, 0.5);
    }
  }

  timer++;
  renderer.render(scene, camera);
}

我确信还有另一种方法可以通过计算距离然后将它们减少到 0。但我想 lerp 和 leprVectors 做同样的事情，所以问题是我做错了什么？

r83

可能这两个功能都不是我想的那样。

Answer 1

好的，我刚刚弄清楚问题出在哪里。 Lerp in the official documentation looks as .lerp(v3, alpha) and the value alpha should changing dynamically, so I added clock:

var delta = clock.getDelta();

和 alpha 现在：

alpha += delta;

我还向每个网格添加了布尔变量，以检查它是否足以执行 lerp，此外，我在启动时为每个网格设置了一个新位置作为参数如下：

mesh.newPosition = new THREE.Vector3(
      Math.random() * 200 - 100, Math.random() * 200 - 100, Math.random() * 200 - 100
    );

因此我更新了渲染函数：

var timer = 0;
var alpha = 0;
var delta;
var currentX, currentY, currentZ;

function render() {
  delta = clock.getDelta();
  for (var i = 0; i < count; i++) {
    mesh = meshes[i];

    if (timer === 120) {
      mesh.endTransition = false;
    }

    if (!mesh.endTransition ) {
      currentX = Math.abs(mesh.newPosition.x - mesh.position.x);
      currentY = Math.abs(mesh.newPosition.y - mesh.position.y);
      currentZ = Math.abs(mesh.newPosition.z - mesh.position.z);

      if (currentX >= 1 || currentY >= 1 || currentZ >= 1) {
        alpha += delta;
        mesh.position.lerp(mesh.newPosition, alpha);
      } else {
        mesh.endTransition = true;
      }
    }
  }

  timer++;
  renderer.render(scene, camera);
}

也许我的解决方案可以改进。

Threejs lerp，lerpVectors 在没有动画的情况下工作

Threejs lerp, lerpVectors work without animation

animation

three.js

translate-animation

lerp