解析和更新三个js中动画的对象位置

Question

我读过的关于在three.js 中制作动画的所有教程都是关于以圆形或随机轨迹移动对象的。我的问题是我有一个 129k 行长的 .txt 文件，其中包含随着时间的推移原子的特定 xyz 位置。每次迭代都以：

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 个位置放入一个单独的文件并对其进行解析来对动画的第一帧进行建模，现在我想使用文档的其余部分为每一帧更新我的原子的位置。 这是我用来解析第一帧位置的代码：

    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. 有没有办法设置每一帧的时间？如果我想让动画更快，假设 1 毫秒，如果更慢，假设 10 毫秒。

3. 如何让动画在页面加载时运行而无需先单击按钮？

Answer 1

1) 如果内存允许，请将它们全部保存在一个文件中，并将它们解析为一个二维数组，这样每一帧就有一组 256 个位置。考虑循环：

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 中的一种常见做法，网上有很多关于如何做到这一点的示例。