Threejs lerp，lerpVectors 无需动画即可工作答案

【问题标题】：Threejs lerp, lerpVectors work without animationThreejs lerp，lerpVectors 无需动画即可工作
【发布时间】：2017-10-20 10:20:12
【问题描述】：

我正在尝试通过函数 lerp、lerpVectors 在一段时间后向不同方向移动 10 个网格。他们都给了我相同的结果，他们只是将网格物体传送到新的位置，而没有动画移动到那里。这是我的代码（带有“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

也许这两个功能都不像我预期的那样工作。

【问题讨论】：

标签： animation three.js translate-animation lerp

【解决方案1】：

好的，我刚刚发现问题出在哪里。 official documentation 中的 Lerp 看起来像 .lerp(v3, alpha) 并且值 alpha 应该动态变化，所以我添加了 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);
}

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

【讨论】：