3つのjsでアニメーションのオブジェクト位置を解析して更新します

Question

three.jsでアニメーション化することについて私が読んだすべてのチュートリアルは、循環的またはランダムな軌道でオブジェクトを移動することについてです。私の問題は、時間の経過とともに原子の特定のxyz位置を含む長い129K行の.txtファイルがあることです。すべての反復は、以下から始まります。

256 
Atoms. Timestep: 66000 
1 0.702825 2.71217 2.71612 
1 16.9592 2.64886 6.79019 
1 0.681418 2.68359 10.8911 
1 16.96 2.6822 14.9396 
1 0.659922 6.77858 2.72442 
1 16.9873 6.7709 6.77907 
... 

これは256個までの原子を繰り返します。最初の2行を無視すると、次の256行はアニメーションの最初の「フレーム」からの原子のxyz位置であり、合計500フレームあります（500 x 258 =合計129000行）。私はアニメーションの最初のフレームを最初の256個の位置を別々のファイルに入れて解析しました。これで残りのドキュメントを使用して次のフレームごとに原子の位置を更新したいと思います。ここで iは最初のフレームのための位置を解析するために使用されるコードである：「グループ」は、全ての原子のオブジェクトを含む配列である

fetch('Une_image_256_atomes.txt').then(response => response.text()).then(text => { 
     const atoms = text.split('\n') 
     .map(line => line.trim())  
     .map(line => line.split(' ')) 
     .map(([size, x, y, z]) => ({ 
      size: Number(size), 
      x: Number(x), 
      y: Number(y), 
      z: Number(z) 
     })); 

     for (var i = 0; i < atoms.length; i++) { 
      atom = sphere.clone(); 
      atom.position.set(atoms[i].x, atoms[i].y, atoms[i].z); 
      atom.name = "atom"; 
      scene.add(atom); 
      group.push(atom); 
     } 

ました。

1. それは同じコードを持つすべての短いファイルを解析するために500個の小さいファイルやループに長いファイルをカットした方がよいか、私は一度に長いファイルを解析する必要がありますか？それが後者の場合、アニメーションのすべてのフレーム=次の256の位置になるように、どのように反復するのですか？

2. 各フレームの時間を設定する方法はありますか？アニメーションをより速くしたい場合は1ms、遅い場合は10msとしましょう。

3. 最初にボタンをクリックすることなく、アニメーションをページの読み込み中に実行するにはどうすればよいですか？

Answer 1

1）メモリが許すならば、一つのファイルにそれらすべてを維持し、あなたがフレーム毎に256箇所のセットを持っているような2次元配列にそれらを解析します。ループを考えてみましょう：

var i, j; 
for(i = 0, i < numberOfFrames; ++i){ 
    for(j = 0; j < numberOfAtoms; ++j){ 
     moveAtom(j, framePositions[i][j]); 
    } 
} 

2）使用間隔（setInterval、clearInterval）自分の位置の更新およびレンダリングのタイミング実行を設定します。

3）これは、データファイルを解析し、間隔を開始する関数を実行するのと同じくらい簡単です。これはJavaScriptの一般的な習慣であり、その方法についてはウェブ上に多くの例があります。