Question

我试图通过函数 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

也许这两个功能都不像我期望的那样有效。

Answer 1

好的，我刚才弄明白问题出在哪里。 Lerp中的official documentation看起来像 .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);
}

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

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

1 个答案: