javascript - 三个js补间js的性能落后于许多同时进行的补间

第一次很长一段时间，而且一切如此-我是Three.js和Tween.js的新手，希望看看是否有可能同时将200k Three.js顶点从一个位置补间到另一个位置。请原谅我对像素和顶点一词的可互换使用。

我想在网格中显示200k像素。用户可以决定以多种方式对这20万个像素进行排序，以使它们在网格中重新排列。我希望所有像素同时在其初始位置和最终位置之间进行补间。目前，顶点与补间同时移动，但是一旦动画接近完成，我就会遇到严重的性能问题。我希望有人能帮帮忙！

对于每个200k顶点，我有一个与之关联的补间对象位于此列表中，该列表是在场景中绘制顶点后创建的，

var scPartVerts = scene.children[0].geometry.vertices;
var dataSetLen = 200000;
tweenList = []
for (i=0; i<dataSetLen; i ++){
    tweenList.push(new TWEEN.Tween(scPartVerts[i]))
}

使用D3（正是我所熟悉的处理点击事件的方法），我为每个补间提供了一个新的XY位置以移至

d3.select("#key").on("click", function() {
    for (i = 0; i < dataSetLen; i ++){
        var newX = desiredXPostionList[i];      //grab the new X from presorted list
        var newY = desiredYPositionList[i];     //grab the new Y from presorted list
        tweenList[i].to( {
                x: newX,
                y: newY
            }, 2500)
            .start();
    }

然后在渲染时更新补间，

function render() {
    scene.children[0].geometry.verticesNeedUpdate = true;
    TWEEN.update();
    renderer.render( scene, camera );
}

动画似乎在补间的〜75％处运行良好，然后一旦顶点接近其最终位置，就开始进行磨削，断断续续，0 FPS，剧烈停止约30秒。我试图看一下动画时间轴，看来所有时间都被转储为更新补间。

我是否可以使用d3.select方法提供冗余的补间更新？（JavaScript是否将一键单击注册为10并尝试更新补间10x？）还是tween.js不能同时平滑补间200k位置？非常感谢您的帮助！

最佳答案

我的方法是从头开始使用循环。当然，解决方案不是最终的真理。

计划：设置动画的持续时间和当前时间，

var duration = 10; // seconds
var currentTime = 10;
var clock = new THREE.Clock();

记住顶点的结束位置，为其设置一个随机的起始位置，找到这些位置之间的向量（方向），

fieldGeom = new THREE.PlaneGeometry(500, 500, 500, 500);
fieldGeom.vertices.forEach(function(vertex){
    vertex.startPosition = new THREE.Vector3(THREE.Math.randInt(-500,500),THREE.Math.randInt(-500,500),THREE.Math.randInt(-500,500));
    vertex.endPosition = vertex.clone();
    vertex.direction = vertex.startPosition.clone().sub(vertex.endPosition);
    vertex.copy(vertex.startPosition);
});

然后在动画循环中添加结果向量，并乘以currentTime / duration的比例

  var delta = clock.getDelta();
  currentTime -= delta;
  if (currentTime < 0) currentTime = 0;

  fieldGeom.vertices.forEach(function(vertex){
    vertex.addVectors(vertex.endPosition,vertex.direction.clone().multiplyScalar(currentTime / duration));
  });
  fieldGeom.verticesNeedUpdate = true;

jsfiddle示例为250K点。

关于javascript - 三个js补间js的性能落后于许多同时进行的补间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40602944/