Question

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

我想在网格中显示200k像素。用户可以决定以多种方式对这些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性能滞后与许多同时补间

1 个答案: