Три js-проигрывателя с двумя одновременными твинами

Question

Долгое время в первый раз и все это - я новичок в Three.js и Tween.js и надеялся увидеть, возможно ли одновременное чередование 200k вершин Three.js от одна позиция в другую. Извините за взаимозаменяемое использование слов пикселей и вершин.

Я хотел бы отображать 200 тыс. Пикселей в сетке. Пользователь может решить сортировать эти 200 тыс. Пикселей несколькими способами, заставляя их перестраиваться в сетке. Я хотел бы, чтобы все пиксели одновременно перемещались между их исходным положением и конечной позицией. В настоящее время у меня есть вершины, одновременно движущиеся с подростками, но у меня серьезные проблемы с производительностью, когда анимация приближается к завершению. Я надеюсь, что кто-то может помочь!

---

Для каждого из 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 секунд после того, как вершины близки к финалам. Я попытался посмотреть график анимации, и кажется, что все это время сбрасывается в обновление твинов.

Я как-то поставляю избыточные обновления tween, используя мой метод 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 точек.