三个 js 补间 js 性能滞后与许多同时补间

Question

第一次和所有这些 - 我是 Three.js 和 Tween.js 的新手，希望看看是否可以从一个位置同时补间 200k Three.js 个顶点给另一个。请原谅我互换使用像素和顶点这两个词。

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

对于 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 个位置？非常感谢您的帮助！

Answer 1

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

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

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 点示例。

三个 js 补间 js 性能滞后与许多同时补间

Three js tween js performance lag with many simultaneous tweens

javascript

performance

three.js

tween

tween.js